【超基礎】HTMLの基本構成と頻出タグ５＋６選

本ページではHTMLの基本構成と基本タグの基礎について解説していきます。

まずはHTMLコードの基本構造、全体像をつかんでから学習に入りたい方、ぜひご覧ください。

そのまま使えるサンプルコードも紹介しています。

HTMLの基本構成

HTMLは基本的には以下のような構成で構築されます。

DOCTYPE宣言文書がHTML5で書かれていることをブラウザに伝えるために記載します。これは常に文書の最初に来ます。文書を書く際の”拝啓”にあたるような決まり文句と覚えましょう。
HTML要素：HTML文書の最上位に位置する要素で、<html></html>で囲まれ、文書全体を表します。HTML要素の中には通常、headとbodyが含まれます。
head：この部分には、ブラウザや検索エンジンに対する情報が含まれますが、通常はユーザーには直接表示されません。ここには、ページのタイトル（タグ）、文字エンコーディング、ページの説明などが含まれます。ページのSEO（検索エンジン最適化）やユーザビリティに大きな影響を与える項目です。
body：これが実際にユーザーがブラウザで見る部分です。テキスト、リンク、画像、ビデオなど、ウェブページの主要なコンテンツはすべてここに配置されます。タグ付けすることでそれらのコンテンツを配置します。

headには以下のようなタグがあります。上３つはほぼ定型、下２つはCSSやJavascriptでHTMLを制御するときに使用されます。

<title>: このタグは、ブラウザのタブに表示されるページのタイトルを定義します。また、検索エンジン結果ページ（SERP）でのページタイトルとしても使用されます。
<meta charset=”UTF-8″>: このメタタグは、文書の文字エンコーディングを定義します。UTF-8は、すべてのUnicode文字をカバーするため、多言語コンテンツをサポートするために広く使用されています。
<meta name=”description” content=”…”>このメタタグは、ページの短い説明を提供します。この説明は、検索エンジン結果ページ（SERP）でスニペットとして表示されることがあります。
<link rel=”stylesheet” href=”styles.css”>: このリンクタグは、外部CSSファイル（この場合は”styles.css”）をHTML文書にリンクします。これにより、ウェブページのスタイルやレイアウトを制御することができます。
<script src=”script.js”>: このスクリプトタグは、外部JavaScriptファイル（この場合は”script.js”）をHTML文書にリンクします。これにより、ウェブページに対する動的な振る舞いを制御することができます。

例）

bodyには以下のようなタグがあります。

<h1>から<h6>: これらのタグは、ウェブページの見出しを定義します。<h1>が最も大きく、重要で、<h6>が最も小さく、重要度が低いです。
<p>: このタグは、段落を定義します。テキストは自動的に新しい行から始まります。
<a href=”…”>: このタグは、ハイパーリンクを定義します。href属性にURLを指定することで、他のページへのリンクを作成できます。
<img src=”…” alt=”…”>: このタグは、画像を挿入します。src属性に画像ファイルのパスを指定し、alt属性に画像の説明を記述します。
<ul>と<li>: これらのタグは、順序なしリスト（箇条書きリスト）を作成します。各リスト項目はタグで囲みます。
<div>: このタグは、ウェブページのセクションまたはコンテナを定義します。CSSと組み合わせて使用することで、ページレイアウトを制御するための強力なツールとなります。