HTMLの基本的な構造について、きちんと理解した状態で使えるようHTMLを構成する骨組みとなる要素について調べました。
目次
- HTMLとは
- < !DOCTYPE html > とは
- < html >~< /html > とは
- < head >~< /head > とは
- < meta charset="UTF-8" > とは
- < meta name="description" content="~" > とは
- < title >~< /title > とは
- < body >~< /body > とは
- おわりに
1.HTMLとは
HTMLとは「Hyper Text Markup Language（ハイパー・テキスト・マークアップ・ランゲージ）の略で、Webページの土台となるファイルを作成する言語です。Webページに表示したい文章などを「<」と「>」で挟まれた「タグ」と呼ばれる特殊な文字列で囲んで書いていきます。
「タグ」には様々な種類があり、それぞれに意味をもっています。タグで文字列を囲むことで、「ここは見出しです」「これはリンクで、クリックするとこのページに移動します」という指示をしています。そうやって、コンピューターがそのページを理解できるようにすることがHTMLタグの役目です。インターネット上に存在する多くのWebサイトがHTMLを使って作られています。
2.< !DOCTYPE html > とは
< !DOCTYPE html >はDoctype（ドクタイプ）宣言と言い、そのページがどのバージョンのHTMLで、どの仕様に合わせて作られているのかを書いています。
バージョンによって使用できるタグや属性が異なっていたり、指定方法が異なるため、ここで明確にする必要があります。
現在は、「HTML5」が主流となっています。
HTML5はHTML4に比べ以下のように、シンプルに記述することができます。
3.< html >~< /html > とは
Docutype宣言のすぐ後に記述します。これはHTMLの文書だということを表しています。「lang」はWebページの言語を設定できる部分で、「ja」はJapaneseの略です。つまり日本語の文書であることを示しています。
| 言語名 | 言語コード |
|---|---|
| 日本語 | ja |
| 英語 | en |
| アメリカ英語 | en-US |
| イギリス英語 | en-GB |
| 中国語 | zh |
| 韓国語 | ko |
| ドイツ語 | de |
| フランス語 | fr |
etc...
4. < head >~< /head > とは
この部分はページのタイトルや説明文、使用する外部ファイルのリンクなど、ページの情報を記述しています。ブラウザーには表示されません。
ブラウザに表示されないことから役割を理解しづらいように思えますが、実際にはhtmlを表示させることや、Web上の情報を検索エンジンが収集するために使用されるクローラーと呼ばれる自動プログラムへ情報を伝えるなど大きな役割を担っています。
5. < meta charset="UTF-8" > とは
これは文字コードを「UTF-8」にするという指定です。これが正しく表記されていないと文字化けをしてうまく文字が表示されない場合もあるので、必ず記述しましょう。「meta」は「メタ要素」と言います。
6. < meta name="viewport" content="width=device-width, initial-scale=1.0" > とは
viewportタグは、PCやモバイル（スマホ、タブレット）といったデバイスごとにコンテンツの表示領域を設定するためのmetaタグのことです。
width=device-width：表示領域の幅。端末画面の幅に合わせる指定ができます。
initial-scale：ページが最初に表示されたとき、ユーザーがコンテンツを見やすく表示させるための設定です。「1.0」とすることで、ユーザーが最初にページを開いた時に画面全体に違和感なくコンテンツを表示することが可能です。
このタグを使用し、デバイスごとの表示設定を行うことで、スマートフォンやタブレットでも文字や画像を見えやすくすることができます。
デバイスごとに調整した画面表示のデザインをレスポンシブデザインと呼びます。
7. < title >~< /title > とは
ページのタイトルを記述します。この名前がブラウザのタブや、ユーザーがWebサイトをブックマークしたり、検索した時のページタイトルとして表示されます。
8. < body >~< /body > とは
HTML文書の本体部分です。ここにコンテンツを入力することで、実際にブラウザー上で表示されます。
body部分では様々なHTMLタグを使って見出しや段落など目的に合わせた要素で表示していきます。
9. おわりに
タグによっては目に見えない部分での役割などただコンテンツを書いているだけでは分かりにくいものもありますが、具体的な役割をしっかりと把握することで、なぜこのタグが必要なのかを理解でき、エラーが起きた場合などに原因を突き止めやすくなると感じたので、それぞれの目的を意識しながらHTMLを使用していきたいと思います。
参考文献
Mana.1冊ですべて身につくHTML&CSSとWebデザイン入門講座.SBクリエイティブ株式会社,2019.