HTMLの要素を理解しよう

あなた

HTMLのそれぞれの部分の意味は何ですか？

前回はHTMLでCSSを読み込む方法を解説しました。

前回：HTMLでCSSを読み込む方法

しかしまだまだHTMLファイルには見慣れない文字があるはず。

そこでこの記事ではその文字列を「要素」として見ていく方法を紹介します。

ではさっそく見ていきましょう。

HTMLは要素の集まりである

今回は以下の記事で使ったHTMLファイルとCSSファイルを例に解説します。

まだ準備できていない方は準備しておいてください。

文字列は部分（要素）ごとに分けることができる

では解説に入っていきます。

あなたの目の前には、一見意味のわからない文字列が並んでいるHTMLファイルがありますよね？

しかし、実は要素ごとにわけることができます。

以下は今まで使ってきたindex.htmlファイルの1部です。

この部分を探してください。

<div id="title">
    <ul>
        <li><a href="#">DEMO1</a></li>
        <li><a href="#">DEMO2</a></li>
        <li><a href="#">DEMO3</a></li>
        <li><a href="#">DEMO4</a></li>
    </ul>
</div>

上記は以下の要素に分けることができます。

<div id="title">
</div>

<ul>
</ul>

<li>
</li>

<ahref="#">DEMO1</a>
<ahref="#">DEMO2</a>
<ahref="#">DEMO3</a>
<ahref="#">DEMO4</a>

ちなみに最初のタグを「開始タグ」、終わりのタグを「終了タグ」といいます。

<div id="title">　→開始タグ
</div>　→　終了タグ

<ul>→開始タグ
</ul>　→　終了タグ

いかがでしょうか？

「HTMLの文字列も色んな要素にわけることができるんだな」という認識がここまでで出来ていいればOKです。

各要素の意味一覧

HTMLで良く使われる要素とその意味を表にしてまとめていました。

※全部知りたい方はこちらを参考にどうぞ

ちなみに、今全てを暗記する必要はありません。

ただ「なんとなく意味はわかる」という状態にまずはなっておきましょう。

要素として扱えることで解説もわかりやすくなる

ということで今回は「HTMLファイルの文字列も、各パーツにわけることができて、それぞれ意味があるんだよ」という話をしました。

（今後は当サイトのHTML/CSS講座でも〇〇要素と呼んでいくので、この記事の内容は把握しておいてください）

実は今後紹介していくCSSも、HTMLの各要素を指定して装飾しています。

そのように、HTMLも要素ごとに捉えると扱いやすくなるわけです。

あなたも、ぜひHTMLを要素ごとに見ることができるようになっておきましょう。

今回は以上です。

次はHTMLのタグの書き方を解説していきます。

>>次の回：HTMLのタグの書き方【だれでもわかるように解説】

\ HTMLとCSSについて最初から学びたい方はこちら /

\ Web制作の副業で今すぐ稼ぎたい方はこちら /