WEBサイトを構築する上で「HTML」は必須のプログラミング言語です。
今回はHTMLの基本構成について徹底解説します！
基礎の理解を深められるよう、最後までご覧ください！
HTMLの基本構成とは？
「HTML」とは「Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)」の略です。
サイト内の文書にマークアップしていく作業をHTMLで行います。
この基本構造は、サイト作成において必ず記載するものになります。
HTMLには以下の要素が必須となります。
- DOCTYPE宣言
- htmlタグ
- headタグ
- bodyタグ
以下が最低限の要素で構成された基本構造のコードになります。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Webサイトのタイトル</title>
<meta name="description" content="ページの説明文">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- サイトの要素が入る -->
</body>
</html>HTMLとして読み込むためには「DOCTYPE宣言」以外の全ての要素を<html>タグ内に配置しなければいけません。
<html>要素の子要素として<head>タグと<body>タグを一つずつのみ記述することができるというルールがあります。
正しい構成でマークアップしないと、Webサイトが正常に機能しないので確実に押さえておきましょう！
「<!DOCTYPE html>」について
「DOCTYPE宣言」とはサイト内のコードがどんな文書であるのかを宣言することを目的として記述するものです。
htmlタグより前に記述する必要があります。
<!DOCTYPE html>とは文書がHTMLであること、HTMLのバージョンがHTML5であることを示す宣言です。
以下のように最初に記述しましょう。
<!DOCTYPE html>「<html> ~ </html>」について
<html> ~ </html>は「DOCTYPE宣言」のすぐ下に記述します。
HTMLに必要な全ての要素を<html>タグの中に記述する必要があります。
つまり、「DOCTYPE宣言」以外の全てのタグの親要素になります。
<html>タグの中に記述されているものがHTMLのコードだと判断されるため、外側に書かれているものは正確に読み込まれないので気を付けましょう。
以下のように<!DOCTYPE html>直下に記述します。
<!DOCTYPE html>
<html>
<!-- 子要素が入ります -->
</html>「<head> ~ </head>」について
<head> ~ </head>はWebサイトのhead要素を表すために使用されるタグです。
head要素には、文章の属性、CSSやJavascriptファイルの読み込みなど、そのWebページの基本情報を記述します。
コンピューター(ブラウザや検索エンジン)が読み取る部分になるので、Webページ画面上には表示されません。
以下のように<html>タグ内に記述しましょう。
<!DOCTYPE html>
<html>
<head>
<!-- ヘッダ情報が入ります -->
</head>
</html>head要素の中に入る代表的な要素は以下になります。
- meta要素
- title要素
- link要素
それでは、これらの要素について詳しく解説していきます。
meta要素とは
meta要素はhead要素内に記述し、文字コードや概要をWebブラウザや検索エンジンに伝えるものです。
ここでは代表的なmetaタグを紹介します。
- 文字コード：文字化けを防ぐ
- メタディスクリプション：Webページの概要文
- ビューポートタグ：モバイル端末での表示の最適化
- OGPタグ：SNSでシェアされたコンテンツの最適化
- noindex / nofollow ：不要なページを除外する
title要素とは
title要素はhead要素内に記述し、HTMLのタイトルを指定するものです。
Webブラウザのタブや検索結果に表示され、SEOにも重要な要素のため、必ず記述しましょう。
人間にもコンピューターにもわかりやすく簡潔な内容にしましょう！
<title>タグでページのタイトルを以下のように記述します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webサイトのタイトル</title>
</head>
</html>link要素とは
link要素はHTMLと他の外部ファイルを関連付ける時に使用します。
ここではCSSファイルを例に解説します。
link要素には「rel属性」と「href属性」が必須です。
「rel属性」でファイルとの関係を表し、この場合はCSSが読み込むファイルであることを示しています。
「href属性」で実際に読み込むファイルのURLを記述します。
以下のように<head>タグ内に記述します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webサイトのタイトル</title>
<link rel="外部ファイルとの関係を示すキーワード" href="外部ファイルのURL">
</head>
</html>CSSファイルの例
<link rel="stylesheet" href="style.css">
「<body> ~ </body>」について
<body> ~ </body>はWebサイトのbody要素を表すために使用するタグです。
body要素に記述した見出しや文章、画像などが実際のWebサイトに表示され、CSSによって装飾やレイアウトすることができます。
以下のように<head>タグの下に記述します。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Webサイトのタイトル</title>
</head>
<body>
<!-- ここにbody要素が入ります-->
</body>
</html>body要素で使用されるタグ
ここでは代表的なbody要素で使用されるタグを紹介します。
<header> ~ </header>：ヘッダーを表示するためのタグで、サイトロゴやメニューを表します。<h1> ~ </h1>：「h+番号」で見出しを指定するタグです。<div> ~ </div>：囲んだ文章をグループ化するためのタグです。<p> ~ </p>：段落を作成するためのタグです。<a href=""> ~ </a>：リンクを挿入するためのタグです。<table> ~ </table>：テーブルを作成するためのタグです。<footer> ~ </footer>：フッターを表示するためのタグで、サイトのに一番下に配置します。
まとめ
今回は、HTMLの土台部分となる基本構成について解説してきました。
いかがでしたでしょうか？
HTMLを記述する上で基本構成を理解することはとても重要です。
正しい知識を身に着けて、きれいで見やすいWebサイトを作成しましょう。
別投稿では、HTML/CSSについての基本知識や、コーディングに役立つ知識についてご紹介していきますのでそちらもぜひチェックしてみてください！
コメント