HTMLの基本をマスターしよう！【わかりやすいまとめ】

HTML（Hyper Text Markup Language）についてどれくらい知っていますか？

Webページを作成するには、HTMLの基本構造を理解する必要があります。

HTMLはWebページのコンテンツや構造、スタイル、機能を決定するのに重要な言語です。

HTMLの概要

HTMLの基本構造は、HTML文書のスケルトン（骨組み）を定義するために必要な要素を示します。

※HTML文書とはHTMLが記述されたテキストファイルのことです。HTMLファイルとも呼ばれています。

HTML文書は、HTML要素として知られるタグの集合で構成されます。

これらのタグは、HTML文書の構造を決定するのに役立つものです。

HTML文書は、DOCTYPE宣言、html要素、head要素、body要素で構成されます。

構成要素	説明
DOCTYPE宣言	ブラウザーにHTMLバージョンを通知するために使用される
html要素	Webページのルート要素であり、headとbody要素を含む
head要素	Webページのメタデータを含むタイトル、メタ記述、スタイルシートなどの情報を提供する
body要素	Webページの実際のコンテンツを含む

<!DOCTYPE html>
<html>

  <head>
    <!-- ここにhead要素が入ります -->
  </head>

  <body>
    <!-- Webページの実際のコンテンツが入ります -->  
  </body>

</html>

※人が見やすいように改行をしたり字下げ(インデント)を行いましょう。

HTML要素は、開始タグ、終了タグ、およびコンテンツから構成されます。

コンテンツは、要素に含まれるテキスト、画像、リンク、および他の要素などです。

例　<body>テキスト</body>

HTMLタグ	説明
`<h1>`〜`<h6>`	見出し。適切な見出しをこのタグで表示させることがSEOに良い
<p>	段落を定義する要素
<img>	画像を表示する要素
<a>	リンクを定義する要素
<li>	リストのアイテムを定義する要素

HTML要素は、属性を持つことができます。

属性は、タグがどのように動作するかを制御するために使用されます。

例えば、<a>タグには、リンクのURLを指定するhref属性があります。

<a href="URLを指定">リンク</a>

他にもタグにクラス名をつけて、CSSを記述しやすくする属性などもあります。

<a class="クラス名を指定">リンク</a>

このように開始タグの中に記述します。

うるふ

基本はこれくらいです。基礎につまずいて落ち込むよりも、一つ一つ紐解いていきましょう。
他にも基礎的な記事を書いていますので是非読んでください。

Web業界は移り変わりが早いと言われています。

当然、古い参考記事が上位に表示されることがあるのです。

<div class="header" id="header">ヘッダー</div>

このようにヘッダーの要素を<div>で囲と、クラス名とIDの分の記述量が増えてしまいます。

現在は、下記のようにすることが多くなりました。

<header>ヘッダー</header>

他にも<footer>、<nav>、<aside>、<article>、<section>とあります。

これらは代表的で少し詳しくなれば間違えようがないのですが、限定的だったりニッチ過ぎたりすると記事の更新を待つより、公式文書を読み込んだほうが良いことがあります。

HTMLの公式文書は「HTML Living Standard」です。

HTMLに限らず他の言語や技術でも公式文書が一番正しいことを念頭に、その他の記事を読み込んでいくと良いでしょう。