HTML/CSS

HTMLの要素を理解しよう

2020年12月9日

HTMLの要素を理解しようと書かれた画像

 

あなた
HTMLのそれぞれの部分の意味は何ですか?

 

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

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

 

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

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

 

※補足

この記事は連載の1つです。

以下の学習ステップを歩んできていることを想定しています。

>>【完全無料】HTMLとCSSの学習ステップ一覧

 

HTMLとCSSの学習ステップ一覧と書かれた画像
【完全無料】HTMLとCSSの学習ステップ一覧

  てんし君こちらはプログラミング初心者の方向けのHTMLとCSSの基本的な学習用ページです。   ここで紹介している学習カリキュラムをやりきれば、最終的にこちらのようなWebサイトを作成可能です。 ...

続きを見る

 

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

 

HTMLは要素の集まりである

 

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

 

html css javascript
HTMLとCSSとWEBページの関係性【理解できます】

  あなたHTMLとCSSとWEBページってどんな関係性なんでしょうか?   HTMLとCSSの勉強を始めるとHTMLとCSSを使ってWEBページをつくることができるというような言葉をよく見ますよね。 ...

続きを見る

 

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

 

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

 

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

あなたの目の前には、一見意味のわからない文字列が並んでいる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要素
<div id="title"> </div>
ul要素
<ul> </ul>
li要素
<li> </li>
a要素
<ahref="#">DEMO1</a> <ahref="#">DEMO2</a> <ahref="#">DEMO3</a> <ahref="#">DEMO4</a>

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

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

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

 

いかがでしょうか?

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

 

各要素の意味一覧

 

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

 

HTML要素意味
htmlHTML要素であることを示す(大元の親であることを示す)
headメタデータの集まりであるヘッダー要素であることを表す
body文書の見た目の(本体)部分を表す
h1~h6見出し。数字が大きくなるほど小さくなる。
p段落
div特定の要素をグループ化する
formフォーム要素
ul順不同のリストを作る要素
liリストの各項目を表す
tableテーブル要素であることを示す
trテーブルの各行の要素
th、tdテーブルにおける見出しのセル、データセル
b太文字を表す
aリンクを設定する
img画像要素

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

 

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

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

 

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

 

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

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

 

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

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

 

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

今回は以上です。

 

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

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

 

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

HTMLとCSSの学習ステップ一覧と書かれた画像
【完全無料】HTMLとCSSの学習ステップ一覧

  てんし君こちらはプログラミング初心者の方向けのHTMLとCSSの基本的な学習用ページです。   ここで紹介している学習カリキュラムをやりきれば、最終的にこちらのようなWebサイトを作成可能です。 ...

続きを見る

 

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

wordpress
【無料あり】WEB制作を学べるオンラインスクールランキング【副業で稼ぎたい方向け】

  あなたWeb制作の副業で稼ぎたいけど、どのスクールで学ぶのが良いの? スクール選びで失敗はしたくないです。   ↑このような疑問や不安を解決するべく、現役のWebエンジニアがWEB制作を学べるスク ...

続きを見る

 

プログラミングスクールに関する情報

【無料あり】プログラミングスクールおすすめランキング【WEBエンジニアになりたい方向け】と書かれた画像
【無料あり】プログラミングスクールおすすめランキング【WEBエンジニアになりたい方向け】

  あなたプログラミングスクールに通いたいけどたくさんありすぎてどこがいいのかわかりません。   最近はエンジニアブームということもありプログラミングスクールが増えました。 一方でたくさんありすぎてど ...

続きを見る

返金保証ありのプログラミングスクールランキング【エンジニアが選びました】と表示されたパソコンの画面
【転職保証つき】返金保証ありのプログラミングスクールランキング【エンジニアが選びました】

  あなた返金保証がついているオススメのプログラミングスクールってありますか?   結論から話すと、返金保証つきのプログラミングスクールランキングは次の通りです。   1位:DMMWEBキャンプ  【 ...

続きを見る

wordpress
【無料あり】WEB制作を学べるオンラインスクールランキング【副業で稼ぎたい方向け】

  あなたWeb制作の副業で稼ぎたいけど、どのスクールで学ぶのが良いの? スクール選びで失敗はしたくないです。   ↑このような疑問や不安を解決するべく、現役のWebエンジニアがWEB制作を学べるスク ...

続きを見る

フリーランス
無料あり:フリーランスを目指せるプログラミングスクールランキング【体験をもとに徹底分析しました】

  あなたフリーランスエンジニアを目指すことができるプログラミングスクールってありますか?   最近では、高年収や働きやすさの魅力からフリーランスエンジニアを目指す方も増えてきました。 結論から話すと ...

続きを見る

WEB系自社開発企業にいけるプログラミングスクールランキング【現役エンジニアおすすめ】と書かれた画像
WEB系自社開発企業にいけるプログラミングスクールランキング【現役エンジニアおすすめ】

  あなたWEB系の自社開発企業に就職したいです。 オススメのスクールを教えて下さい。   結論から話すと、WEB系自社開発に行きやすいスクールのランキングは以下の通り。   第1位:テックアカデミー ...

続きを見る

-HTML/CSS

S