HTML要素　-よく使うタグ名と使う場所とコード確認-

<!DOCTYPE html>

<!DOCTYPE html>（Document Type DeclarationまたはDOCTYPE宣言）は、HTML文書がどのバージョンのHTML仕様に従っているかをブラウザに伝えるための特別なタグです。これはHTML文書の冒頭に配置され、文書がHTML5仕様に基づいていることを示します。

標準モードの有効化<!DOCTYPE html>は、ブラウザに対して文書が標準モードであることを示しています。標準モードは、最新のHTML仕様に基づいてるということです。
HTML5のバージョン宣言<!DOCTYPE html>はHTML5仕様のDOCTYPE宣言を表しています。
文書の先頭に配置<!DOCTYPE html>はHTML文書の冒頭に配置される必要があります。通常、他のHTML要素やタグの前に来ます。これにより、それ以下が、ブラウザが文書の解釈方法を正確に理解し、標準モードで表示できるようになります。
省略はできない　HTML文書でDOCTYPE宣言は省略できません。ブラウザが正しく文書を解釈するためには、DOCTYPE宣言が必要です。この宣言がないと、ブラウザはクイークモード（互換モード）で動作する可能性があり、一貫性が損なわれることがあります。

<!DOCTYPE html>はHTML文書がHTML5仕様に基づいていることを示すための重要な一文です。

html要素(ルート要素)

HTML（HyperText Markup Language）のルート要素は、HTML文書の最も外側に位置する要素で、文書全体を囲む場所になります。

ルート要素名は<html>というタグで表されます。HTML文書はこの<html>要素内に全体が包まれており、この要素が文書の構造を定義します。

下記のように<html>タグでHTML文書が始まり、</html>タグで終わります。文書全体がこのタグ内に収められます。

<html>
    <!-- ここにHTML文書の全体が入ります -->
</html>

<html>タグ内には、lang属性を使用して文書の言語を指定できます。これにより、ブラウザや検索エンジンが適切な言語の処理を行うことができます。lang=”ja”は、日本語　lang=”en”は、英語圏のサイトということになります。

<html lang="ja">
    <!-- 日本語のHTML文書 -->
</html>

また<html>タグ内には、文書全体に関するメタデータを指定するための<head>要素と、HTML文書の実際のコンテンツが格納される<body>要素があります。これらは、<html>からみて子要素となります。

<html>
    <head>
        <!-- メタデータや他の重要な情報 -->
    </head>
    <body>
        <!-- ここに実際のコンテンツが入ります -->
    </body>
</html>

head要素(メタデータ)

<head> 要素は、実際のページ上には直接表示されませんが、全体の設定やメタデータ、スタイルの指定など、ページ全体に関わる情報を含む重要な場所です。

タイトル要素

<head> 内には <title> タグを使って、ページのタイトルを指定します。ブラウザのタブやブックマーク、検索エンジンのタイトル結果などで表示されるタイトルです。重要な要素です。

<head>
    <title>ページのタイトル</title>
</head>

文字エンコーディングの指定　utf-8

文字エンコーディングは、文書内のテキストがどの文字セットでエンコードされているかを定義します。一般的にUTF-8(大文字・小文字可）が使われます。

<head>
    <meta charset="UTF-8">
</head>

UTF-8とは？

UTF-8（Unicode Transformation Format – 8-bit）は、インターネットや多くのコンピュータ、システムで広く使用されています。いわゆる文字化け防止と呼ばれるコードです。日本語はShift-jisコードですのでUTF-8にしておくことで、文字コードの範囲が広がり、文字化けをおこしません。

メタデータ

<meta> タグを使用して、ページに関する追加の情報や指示を提供できます。例えば、キーワードや説明文、作者情報などが含まれます。またOGPの設定も可能です。

<head>
    <meta name="keywords" content="HTML, CSS, JavaScript">
    <meta name="description" content="Web開発に関する情報を提供するサイトです">
    <meta name="author" content="作者の名前">
</head>

OGPとは？

OGP（Open Graph Protocol）は、ウェブページがSNSや他のプラットフォームで共有されたときに、そのコンテンツを適切に表現するためのプロトコルです。OGPは、Facebookによって初めて提案され、その後、Twitterや他のSNSのプラットフォームにも採用されました。OGPはウェブページのメタデータ（タイトル、説明、画像など）を定義するためのマークアップ形式を提供します。ウェブページが共有されたときに、プラットフォームが自動的に適切なタイトル、説明、画像を表示できるようになります。

下記はhead要素内に記述するmeta要素を使ってOGPの指定です。

<!-- OGP Meta Tags -->
    <meta property="og:title" content="ページのタイトル">
    <meta property="og:description" content="ページの説明">
    <meta property="og:url" content="ページのURL">
    <meta property="og:image" content="画像のURL">
    <meta property="og:type" content="website">
    
<!-- オプションのOGPメタタグ -->
    <meta property="og:site_name" content="サイト名">
    <meta property="og:locale" content="言語コード（例: ja_JP）">
    <meta property="og:locale:alternate" content="別言語の言語コード">

外部スタイルシート

スタイルは外部スタイルシートとして別ファイルに保存することがあります。その外部スタイルシートを <link> タグを使って読み込むことができます。type=”text/css”は省略可です。

<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

rel=”stylesheet”とは？

<link>要素を使ってstyles.css を関連付ける際に必要な、rel属性を使って、「これはスタイルシートファイルである」という意味を設定しています。そのため省略は不可です。

type=”text/css”とは？

<link>要素を使ってstyles.css を関連付ける際に必要な属性です。MIME type=マイン型と呼ばれます。HTML5では、type="text/css"はデフォルトであり、通常は省略することができます。

外部スクリプト

JavaScriptコードも外部ファイルに保存し、それを <script> タグを使って読み込むことがあります。

下記は、src属性を使って、script.jsという外部ファイルを読み込んでいます。またこれらの外部スクリプトは、<bory>要素の終了タグ</boty>の前に配置する場合もあります。

<head>
    <script src="script.js"　type="text/javascript"></script>
</head>

type=”text/javascript”とは？

<type="text/javascript"は、HTML文書内でJavaScriptコードが記述されていることを示す属性です。これも、MIMEタイプを指定するためのものであり、JavaScriptコードがテキスト形式であることを示します。こちらもHTML5では、type="text/javascript"はデフォルトの設定であり、通常は省略することができます。す。

ビューポートの指定

レスポンシブサイト＝モバイルデバイスに適した表示を可能にするために、 <meta> タグを使用してビューポートを指定することがあります。

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

content=”width”というところにビューポートの幅をデバイスの幅（device-width）に設定し初期のズームレベル（スマートフォン）を1.0倍に設定しています。これは、ユーザーがピンチインやピンチアウトなどのジェスチャーを使ってコンテンツをズームできるようにするためです。

また、このメタタグには他のオプションも含まれます。たとえば、initial-scaleやminimum-scale、maximum-scaleなどの属性を指定して、ページの初期のズームレベルやユーザーがズームできる範囲を制御できます。

常に必要な html>head>body

上記を踏まえて、必ず必要なコードが下記となります。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
    </body>
</html>

レイアウトの構造を作成する要素

ウェブサイトにおいて、全体の構造を構成する要素があります。従来は<div>要素が使われている構造が多く存在しましたが、意味合いのある要素として、<article>, <section> , <header>, <footer>,<main>,<nav>,<aside>, <figure>,<figcaption>が挙げられます。

header要素

ページやセクションのヘッダーを定義します。通常、ページの冒頭で、ロゴやサイトのタイトル、ナビゲーションなどが含まれます。

<header>
    <h1>サイトのタイトル</h1>
    <nav>
        <ul>
            <li><a href="#">ホーム</a></li>
            <li><a href="#">サービス</a></li>
            <!-- 他のナビゲーションリンクも追加 -->
        </ul>
    </nav>
</header>

main要素

ドキュメントのメインコンテンツを定義します。通常、ページ内で一度だけの使用となります。

<main>
    <article>
        <h2>記事のタイトル</h2>
        <p>記事の内容</p>
    </article>
    <!-- 他の記事やコンテンツもここに追加 -->
</main>

footer要素

ページやセクションのフッターを定義します。通常、著作権情報、連絡先情報、サイトのクレジットなどが含まれます。

<footer>
    <p>&copy; 2024 サイトの名前</p>
</footer>

nav要素

<nav>要素は、ナビゲーションリンクのグループを定義するためのHTML要素です。サイトでのページ間のリンクやナビゲーションメニューに使用されます。

<nav>
    <ul>
        <li><a href="#">ホーム</a></li>
        <li><a href="#">サービス</a></li>
        <li><a href="#">製品</a></li>
        <li><a href="#">お問い合わせ</a></li>
    </ul>
</nav>

aside要素

<aside>要素は、主なコンテンツから独立した補足情報を表現するためのHTML要素です。通常はサイドバーや広告、関連記事など、主要なコンテンツから切り離された情報を含むために使用され、その目的に応じてさまざまな形で活用できます。

<article>
    <h2>記事のタイトル</h2>
    <p>記事の本文</p>
    <aside>
        <h3>関連記事</h3>
        <ul>
            <li><a href="#">関連記事1</a></li>
            <li><a href="#">関連記事2</a></li>
            <!-- 他の関連記事も追加 -->
        </ul>
    </aside>
</article>

<!-- または -->
<article>
    <h2>最新の製品</h2>
    <p>新製品の説明</p>
</article>

<aside>
    <h3>特別オファー</h3>
    <p>今だけ特別価格でご提供中！</p>
    <img src="ad-image.jpg" alt="特別オファー">
</aside>

figure要素

<figure>要素は、HTML内で画像、図表、動画などの独立したコンテンツをグループ化するための要素です。<figure>要素内には通常、対応する説明やキャプションを提供するための <figcaption> 要素も含まれることがあります。この組み合わせにより、コンテンツとその説明を関連付け、アクセシビリティを向上させることができます。

<figure>
    <img src="image.jpg" alt="説明文">
    <figcaption>画像の説明やキャプション</figcaption>
</figure>

section要素

<section>要素は、HTML文書内のセクションを定義するための要素です。セクションは関連するコンテンツのグループを示し、通常はセクション全体にタイトルが与えられます。ページ内には複数の<section>要素が存在することができ、セクションは独自のタイトルと内容（文章や箇条書き・写真）を持っています。

また<section>要素はネストできます。

<section>
    <h2>第1セクション</h2>
    <p>第1セクションの内容</p>
</section>

<section>
    <h2>第2セクション</h2>
    <p>第2セクションの内容</p>
</section>


<!--またはsectionの中にsection-->
<section>
    <h2>親セクション</h2>
    <p>親セクションの内容</p>
    <section>
        <h3>子セクション</h3>
        <p>子セクションの内容</p>
    </section>
</section>

section要素内がh2からの理由は？

<section>内で一般的に<h2>から始めるのは理由があります。HTMLの文書の構造を整理するためです。例えば、ページ全体のタイトルが<h1>であれば、その下にくるセクションの見出しは<h2>から始めます。さらに、<h2>内に更に具体的なサブセクションがあれば、その見出しは<h3>から始めます。このような構造は、文書の階層性を強調し、検索エンジンやアクセシビリティツールが文書の構造のためでもあります。

<h1>ページのタイトル</h1>

<section>
    <h2>セクション1</h2>
    <p>セクション1の内容</p>
</section>

<section>
    <h2>セクション2</h2>
    <p>セクション2の内容</p>
    <section>
        <h3>サブセクション</h3>
        <p>サブセクションの内容</p>
    </section>
</section>

article要素

<article>要素は、HTML文書内で独立したコンテンツや記事を表現するための要素です。<article>内には、通常、記事全体や個々のコンテンツが独立して存在し、他のコンテンツとは関連性があります。<article>は、単体で分離しても意味を持つコンテンツをグループ化するために使用されます。

単体で完結すべき

<article>内のコンテンツは、他のページのコンテキストから切り離しても意味を持つべき。例えば、ブログの記事やフォーラムの投稿などが<article>で囲まれることがあります。

<article>
    <h2>ブログ記事のタイトル</h2>
    <p>ブログ記事の本文</p>
    <!-- 他のコンテンツ要素もここに追加 -->
</article>

`<article>`内の見出しはh1から使える

<article>内では、見出し (<h1> から <h6>) を使用して記事のタイトルやセクションを明示的に示すことができます。

<article>
    <h1>主要なニュース記事</h1>
    <p>記事の本文</p>
</article>

HTML要素 -よく使うタグ名と使う場所とコード確認-