誰でも分かるhtmlの基本的な書き方

HTML/CSS

この記事ではプログラミング初心者の方で、まずはhtmlを学びたいと言った方に約1分間の購読で学べる『htmlの書き方』を説明致します。

cssの書き方については以下から。

htmlの基本的な書き方

htmlは<要素></要素>で囲った中に文字列もしくは新たな要素を書き込んでいきブラウザで表示させます。

<>のことをタグと言い、<>の中に入る要素はそのまま『要素名』と言います。

要素の種類は、『img』『p』『h1』と様々な物があり、その数は100種類以上です。そのため要素名に関しては全て暗記が必要です。

重要なタグ要素

中でも<head>タグと<body>タグは初めに覚えておきましょう。

<head>タグは、タイトルを表す<title>タグやメタ情報を表す<meta …>タグなど、ブラウザ上で私たちが見る事の無い内部的な情報を書き込む要素となっています。

逆に<body>タグは、段落やテキスト記入時に使う<p>タグや、見出しを表す<h1>などブラウザで表示される部分を書き込んでいく要素となっています。

また<!DOCTYPE html>と言う一番上に書かなくちゃいけない要素があり、これはhtmlのバージョンを示している要素です。<!DOCTYPE html>はHTML5のバージョンを使用している事を示しています。

例文

上記2点と要素名の暗記で以下の例文は書けるようになります。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>初心者必見!!1分で分かるhtmlの書き方</title>
  </head>
  <body>
    <h1>htmlの基本的な書き方</h1>
    <p>htmlは<要素>と</要素>で囲った中に文字列もしくは新たな要素を書き込んでいきブラウザで表示させます。</p>
  </body>
</html>

上記のコードを『index.html』と言うファイル名で保存し、ブラウザにドロップして持っていくと下記の様にブラウザに表示されます。

その他には、各要素のルールを覚えていく必要があります。これもほとんど暗記が必要なので下記の様な記事を見るか、もしくは参考書などで調べてみましょう。

【一覧表あり】HTML5でのタグの入れ子のルールを徹底まとめ

またWEBサイトは『html』のみでは表現しきれず、別に『CSS』や『PHP』などの言語も同時に学んでいく必要があります。

html含め、それらの勉強に下記の『ドットインストール』や『プロゲート』というサイトが非常におすすめなので是非勉強してみて下さい。

https://dotinstall.com

https://prog-8.com


以上が、無知でも分かるhtmlの基本的な書き方

この記事ではあえて詳しく説明をしていません。

何となくの理解からでも良いので、自分で調べて学ぶ力こそがプログラミング学習には必要かと思います。その"何となく理解"を与えられたら幸いです。

2019年12月30日HTML/CSSHTML,WEB

Posted by KT