HTMLの基本的な構造と要素を解説。タグの使い方もマスターしよう
HTMLを学習するにあたっては、基本的な構造と要素から理解した方が習得も早く、深く理解できるようになります。社内でHPを運用している方、これから関わるかもしれない方にも参考になると思います。基礎構造となる3つのポイントと、タグの使い方について解説しますので、ぜひマスターしてみてください。
目次[非表示]
HTMLの基本構造について知ろう
Webサイトを構築していく上では、HTMLは必須と言えるプログラミング言語です。まずは、HTMLの基礎構造について具体的に知る前に、基礎構造とはどのようなものなのか、役割や仕組みについて理解しましょう。
簡単なWebサイトの改修の内製化を目指すフロントエンド(HTML・CSS・JavaScript)入門5日はこちら
マークアップしていく土台作り
HTMLでは、サイト内の文書にマークアップしていく作業を行います。基礎構造とは、まずはこのマークアップを行うための土台作りと考えれば良いでしょう。
HTMLのマークアップを家の建築に例えるなら、基礎構造とは、材木は何に使われるのか、空間は寝室なのか浴室なのかといったように、役割と定義付けをしていくためのものです。
例えば、HTML5を使うためには、以下の要素を必ず使う必要があります。
- HTML5文書の宣言
- htmlタグ
- headタグ
- bodyタグ
- 文字コードを指定するmetaタグ
上記の要素がHTMLの基本構造と呼ばれるものです。それぞれに書く場所も決まっています。本記事では、これら要素について詳しく見ていくことになります。
マークアップとは
マークアップがどういうものかについても、軽くおさらいをしておきましょう。
マークアップとは、Webサイトを作成するにあたり、文書に「見出し」や「タイトル」などの意味付けをしていく作業のことです。そのためHTMLは、「マークアップ言語」と呼ばれます。
マークアップは、Webサイトを見やすくするという役割を持ちますが、SEO対策にも効果を発揮します。適切にマークアップすることで見やすい記事になると共に、検索サイトで上位表示することも可能になるのです。
■関連記事
HTMLの基本構造となる3要素
HTMLの基本要素のうち、とくに基本構造において重要な役割を持つ3要素について解説します。書く場所も決まっているので、覚えておきましょう。
全国の若手~ベテランエンジニアが受講している個別指導のオンライン・リモート講座(入門5日・基礎10日)はこちら
全ての要素となるHTMLタグ
ページがHTMLであることを宣言するために使われるタグです。このタグの中に、HTMLのコードを記述していくことになります。
この中に、HTMLに必要な全ての要素を記述していくことになるため、HTMLファイル内に記述する宣言以外の全てのタグの親要素となります。
Doctype宣言の下に、必ず記述することになるタグです。
文書自体の情報となるheadタグ
文書のヘッダ情報を表すために用いられるタグです。ヘッダ情報とは、そのWebページがどんな意味を持つのか、どんな言語が使われているのかなど、文書自体が持っている情報のことです。
ヘッダ情報がなくても、デザインを整えてWebページらしい見た目にすることはできますが、コンピューターやWebブラウザに正しく読み取ってもらうために、挿入した方が良いとされています。
例えばヘッダ情報に<H2>と記述すれば、それは大見出しと呼ばれる項目にあたるということになります。ヘッダ情報の中には、メタタグとリンクタグを主に使うことになります。
文字コード（エンコード）の指定
文字コードは、文字を機械が処理するために文字の種類に番号をつけたものです。「Shift_JIS」「UTF-8」「EUC-JP」などといったものが使われます
HTML上でどの文字を使っているのかを明らかにするために指定する必要があります。仮に文字コードを誤って利用した場合、文字化けが起こってしまう可能性があるので注意が必要です。
これは「UTF-8」を指定しています。特に理由がない場合は、「UTF-8」を使用するようにしましょう。
文章の内容を記述するbodyタグ
bodyタグとは、文書の内容を記述するために用いられます。bodyタグ内に記述した見出しや文章、画像などが実際のWebサイト上に表示されます。
というように、headタグの下に記述します。bodyタグ内では、文字の色や画像の大きさの設定、リンクの色などの設定も可能です。
bodyで使われるタグ
bodyタグは性質上、さまざまなタグが使われます。その中で代表的なものを以下に記載しました。
- <header>～</header>：ヘッダーを表示するためのタグで、サイトロゴやメニューを表示します。
- <footer>～</footer>：サイトの最下部に位置するタグです。
- <h1>～</h1>：「h+番号」で見出しを指定します。
- <p>～</p>…文書内に段落を作るためのタグです。
- <div>～</div>：区分（Division）タグです。囲んだ文章をグループ化するためのタグです。
- <br>…改行（Break）タグです。※閉じタグは不要です。
- <img>…画像を挿入するためのタグです。※閉じタグは不要です。
■関連記事
その他の主な基本構造となる要素
上記の基本的な要素以外の、基本構造において重要な要素について紹介します。HTMLを扱う上で覚えておきましょう。
若手、新人エンジニアの成長を阻む 人材育成5つの失敗と解決策はこちら
バージョン情報を宣言するDoctype宣言
Webサイトを作るコードでは、まずそのコードがどんな文書なのかを明確にする必要があります。『Doctype宣言』とは、そのコードがどんな文書なのかを宣言する要素です。
この文書がHTMLであること、HTMLのバージョンを明記することを目的としています。HTML5のバージョンでは、以下の記述を最初に設置しましょう。
上記が、Doctype宣言の記述となります。
情報を表すmetaタグ
文書の中身は、キーワードやページの概要、見出しなど、さまざまな情報を含んでいます。この情報を表すために使われるのが『metaタグ』です。
metaタグは、以下のように記述します。
metaタグは、以下のような情報を持たせることも可能です。
content属性などはSEO対策としても重要になります。meta要素をうまく設定することで、検索エンジンやブラウザにWebページを認識させることが可能です。
表題を表すtitleタグ
文書のタイトルをつけるのが『titleタグ』です。ブラウザで表示した場合、タイトルバーのところに表示されます。検索エンジンでは、検索結果やブックマークにも表示されるようになる重要なタグです。
titleタグは以下のように記述します。
titleタグはheadタグの中でしか使用できず、またHTML文書の中で一つきりしか入れてはいけないという決まりがあります。
<h1>のタグもタイトルと呼ばれることがありますが、基本的に別です。<h1>の文章と同じである必要はありません。
■関連記事
階層構造についても理解しよう
HTML文書に記載されているタグは、ある要素が別の要素を含み、それがまた別の要素を含む、という入れ子構造になっています。この関係は、親子関係に例えて表現されます。
階層構造における代表的な要素の関係性について、覚えておきましょう。
短期5日・10日講座(Java・フロントエンド)研修実績はこちら
親要素と子要素とは
以下の要素について見ていきましょう。
この文では、<p>の中に<strong>という要素が入っています。この場合、直接<strong>タグを囲んでいる<p>を親要素、そして囲まれている<strong>を子要素と呼びます。
親要素と子要素は、この「直接」囲むという関係性の場合に呼ばれます。基本的に子要素が、親要素の中からはみ出すことはありません。
先祖要素と子孫要素とは
続いては以下の記述について見ていきましょう。
<div>は<p>の親要素です。反対に、<p>は<div>の子要素です。また、<p>は<strong>にとって親要素であり、反対に<strong>は<p>の子要素となります。
そして、<div>にとって、<strong>は子要素の子要素です。このように、直結した下位の要素を「子孫要素」、逆に上位の要素を「先祖要素」と呼びます。
<div>は<strong>の「先祖要素」、<strong>は<div>の「子孫要素」です。
兄弟要素
「兄弟要素」とは、同じ親要素を持つ並列関係にある要素のことです。以下の記述に注目してください。
<div>要素にとって、<h2>と<p>はそれぞれ子要素になります。そして、<h2>と<p>は、同じ親要素を持つ兄弟要素と呼ぶことができます。
加えて、<h2>は<p>より前に表示されているため、<h2>は<p>の兄、<p>は<h2>の弟と呼びます。
先行要素と後行要素
親要素や先祖要素のように囲う側の要素、また兄にあたる要素を「先行要素」、逆に子要素や子孫要素と弟要素のことを「後行要素」と呼びます。
■関連記事
構造を理解してHTMLをマークアップしていこう
HTMLを記述する上で、基本構造を理解することは重要です。必要となる要素は必ず記述しなければWebサイトの表示に不具合が生じる可能性もあります。必要要素は必ず記述するようにしましょう。
全国の若手~ベテランエンジニアが受講している個別指導のオンライン・リモート講座(入門5日・基礎10日)資料ダウンロードはこちら
また、親要素や子要素などの入れ子構造についても、子要素は親要素をはみ出して記述することは基本的にできません。
基本構造を理解することで、何をどこに記述すれば良いのかがわかるようになり、綺麗で見やすいWebページを作成することができるようになります。
