HTMLの基本構造を理解すればどんなHTMLも読める！

ひなドリ

会社の先輩が書いたHTMLの中身見ても、記号みたいで何書いてあるか全然わかんない…

わかドリ

難しいよね。でも大丈夫。HTMLの基本構造を理解できると、難しいHTMLでも読めるようになるよ。このページでHTML基本構造を教えていくから、それがわかれば読めるようになるよ

この記事でわかること

HTMLの基本構造
HTMLを読むための超重要タグ3個
HTMLの構造＝階層（入れ子）構造

前回のゼロわかはこちら▼

Contents

HTMLの基本構造

基本構造はこの5つだけで説明できます。

DOCTYPE宣言
htmlタグ
headタグ
bodyタグ
metaタグ

上記がHTMLの基本構造と呼ばれ、それぞれどこに書くかが決まっていて、変な場所に書くとWebページは正常に表示されません。

大まかな構造と役割はこのようになります。

HTMLの基本となる超重要タグ3つ

htmlタグ

文書の素となるタグ。

Webページを作るときは、ほぼ全ての内容をこの中に書くことになる。

headタグとbodyタグのみ子要素として記述することができ、ほぼすべてのHTML文書は以下のような構造になる。

<strong><html></strong>

    <head>
        ～
    </head>

    <body>
        ～
    </body>

<strong></html></strong>

headタグ

画面には表示されないが、文章の属性や、読み込むファイルなどが書かれている重要なタグ。

どんなファイルを読み込んでいるか知りたい場合に、見つけるべきタグ。

<html>

    <strong><head>
</strong>        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
        <script src="scripts.js"></script>
        <title>わかドリのタイトル</title>
<strong>    </head></strong>

    <body>
        ～
    </body>

</html>

bodyタグ

最も重要とも言えるタグ。

Webページの表示は、ほぼ全てこの中に書かれている。

読めないWebページがある場合は、まずこのタグから探っていくことになる。

<html>

    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
        <script src="scripts.js"></script>
        <title>わかドリのタイトル</title>
    </head>

    <strong><body></strong>
        <h1>わかドリのHTML講座（見出し１）</h1>
        <p>ようこそわかドリのHTML講座へ！（文章）</p>
        <h2>わかドリの状態（見出し２）</h2>
        <p>わかドリです！（文章）</p>
        <p>わかドリは<strong>元気（強調）</strong>です（文章）</p>
        <p>わかドリのプロフィールは
            <a href="https://www.zerowaka-drill.tech/home/">こちら（リンク）</a>です
        </p>
        <img src="img/ブログイメージ画像.png" width="600px">
    <strong></body></strong>

</html>

意識しにくいけど重要なタグ

DOCTYPE宣言

そのコードがどんなファイルかを宣言するタグ。

重要だけど、Webページを作る上ですごく意識することは少ない。

なぜなら、一度書いたらいじることもないから。

ただ、無いとうまく動かなかったりするので、覚えておく必要がある。

今の主流であるHTML5の場合、以下のようにファイル先頭に記述。

<!DOCTYPE html>

title

ブラウザのタブなどに表示される文字。

ブラウザのページを認識するのに表示されて人の目に触れるので、触ることは結構ある。

<html>

    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
        <script src="scripts.js"></script>
        <strong><title>わかドリのタイトル</title></strong>
    </head>

</html>