HTMLの構造について

HTMLの構造について。

HTMLの構成

HTMLは、「ホームページなどのWeb上で表示されるテキスト情報がどんな役割なのか」を伝えるために使われます。

WordPressの投稿や固定ページによく使うHTML」ではHTMLのタグについて説明しましたが、今回はタグを含めてHTMLの作りがどう言ったものになっているのかついて説明します。

<a class=”sample” href=”https://example.com” target=”_blank”>サンプルテキスト</a>を参考に書いていきます

タグについて

一般的には開始タグ終了タグでテキストを囲むことにより、囲まれたテキスト(図例でいうところのサンプルテキスト)が何の役割を果たしているかをブラウザや検索エンジンに伝えることができます。

開始タグについて

開始タグは<>の中にタグの種類を入れて表現します。(例:<a>)
開始タグを入れることにより「Xタグはここから始まります」という意味になります。

終了タグについて

終了タグは、<>の中に/(スラッシュ)を入れて表現します。(例:</a>)
終了タグを入れることにより「Xタグはここで終了です」という意味になります。

要素名について

開始タグの「<」と終了タグの「</」の直後に書かれている英語部分(<a>でいうところのa)を要素名と言います。
要素名の種類ついては、以前のStepで行ったWordPressの投稿や固定ページによく使うHTML」でご紹介しています。

https://study-r.com/guild_lesson_detail/wp-html/

[/box]

要素について

開始タグから終了タグまでのひとかたまりを要素と言います。

HTMLの要素を組み合わせることにより、WordPressを含めホームページやブログなどがブラウザ上で表示できるようになっています。
HTMLは家でいうところの柱や壁、梁など構造の役割を果たしています。

普段WordPressで文章を書いている時は特に意識をする事がないと思いますが、そんな要素の関係を知ることにより、

  • CSSなどのプログラムの命令文を書く時
  • ヘッダー、フッターなどの位置把握

などに活かす事ができます。

親子要素について

要素はタグで囲んで親子関係を作ることができます。この要素を「親子要素」「親子関係」と呼びます。

外側の部分を親要素、内側の部分を子要素といいます。子要素のさらに内側に要素がある場合は孫要素となります。

家でいうところの、親要素が「自宅全体」で子要素が「自宅の中にある個室」の関係性がイメージしやすいかと思います。


自宅全体


自宅の中にある個室

兄弟要素について

親子関係とは反対に、並列している要素のことを「兄弟要素」や「兄弟関係」と呼びます。

家でいうところの、同じ廊下に並んでいる個室の関係性がイメージしやすいかと思います。

 

タグの属性について

タグの種類によってに必要な設定を加えることができます。
この設定を属性と言い、設定内容を属性値と言います。

リンクの設定で使うaタグでは、リンク先を指定するhref属性を使うことでリンク先を指定できます。(a以外のdivやpにhref属性を設定してもリンクにはなりません。)

実際のリンク先のURLなどは属性値として””(ダブルコーテーション)内に設定することができます。

補足
CSSでよく使われるclassやidも属性の一つです。
classやidは属性値を設定することで、細かい装飾を施すことができます。

まとめ

要素
  • 要素…開始タグから終了タグまでのひとかたまりを表す。
    例)<a class=”sample” href=”https://example.com” target=”_blank”>サンプルテキスト</a>
  • 要素の内容…WordPressで文章を書いている時に編集する場所。
    例)サンプルテキスト
タグ
  • 開始タグ…タグの開始を表す。
    例)<a class=”sample” href=”https://example.com” target=”_blank”>
  • 終了タグ…タグの終了を表す。
    例)</a>
属性
  • 属性…タグに加えられた設定を表す。
    例)左から class、href、target
  • 属性値…タグに加えられた設定の内容を表す。
    例)左から sample、https://example.com、_blank

要復習