メニュー
HTMLは文書の構成を表現するための言語です。HTMLであることの宣言や、関連するメタ情報1、本文の文書構成などを示す基本的な表現方法について説明します。

HTMLの構造

3年以上前に更新されました。情報が古い可能性があります。
 更新日 : 2019年12月11日

HTMLは文書の構成を表現するための言語です。HTMLであることの宣言や、関連するメタ情報1、本文の文書構成などを示す基本的な表現方法について説明します。

HTMLの基本テンプレート

まずはHTMLでほぼ必ず利用するべきテンプレートを紹介していきます。
エディタをインストールしている場合には下記のHTMLを自分で書いて保存し、実践してみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<meta name="keywords" content="検索キーワード">
	<meta name="description" content="説明文">
	<title>タイトル</title>
	<link rel="shortcut icon" href="favicon.ico">
	<link rel="stylesheet" href="css/style.css">
	<script type="text/javascript" src="js/library.js"></script>
	<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
	<header>
		<h1>サイト名</h1>
	</header>
	<article id="sample" align="center">ここにいろんな文を書いたり画像を置いたり…</article>
	<footer>
	</footer>
</body>
</html>

これがHTMLの基本形です。順番に説明していきましょう。

まず、<と>で文字を囲っているのがわかると思いますが、この記号で囲っているものをタグと言います。このタグがHTMLの文書を示すための記号です。HTMLのタグにはいろんな種類があります。各種タグに関してはそれぞれ改めて記事にしていきます。

また、HTMLを見てすぐわかるかと思いますが、タグには開始と終了の合図があります。2行目の<html lang=“ja”>から始まり、最後に</html>となっていたりしますね。HTMLがどこから始まり、どこで区切れるのかなどを正確に表現するために開始タグと終了タグがあります。タグの中には開始と終了を示す必要がない、単体で利用することができるタグも存在します。

<!DOCTYPE html> 1行目

1行目にはHTMLであることの宣言です。この宣言をすることによってHTML5というバージョンであることも示しています。

近年のブラウザではWebサイトを閲覧する際には、ある程度自動的にHTMLであると勝手に解釈して表示してくれるようになっていますが、この宣言はしておきましょう。ちなみにこの宣言をすることによって標準的なHTMLであることも意味しています。

<html lang="ja”> 〜 </html> 2行目〜最後

2行目にもhtmlと書いてありますが、この2行目がHTML文書がここから始まるよ〜という宣言になります。1行目と変わらない気もしますが、ここは思考停止してこういうものだと思ってください。ここからHTML文書が始まるため、終了を明確にするための終了タグが一番最後にあります。

<head> 〜 </head> 3行目〜

ここにはヘッダ情報を記述していきます。ヘッダ情報のほとんどは実際にHTMLを表示した際には表示されない部分です。

ここには、文字コードの指定やこのHTMLのタイトル、検索キーワードなどを記述していきます。見る人にとっては見えない部分なので重要に見えませんが、記事を見つけるための検索等に引っかかりやすくするための情報などを載せたりします。

<body> 〜 </body> 13行目〜

ここがHTMLに表示される本体です。HTMLを見に来たユーザーはこのbodyタグを見に来ています。この中に、文書や画像などを、各種タグを利用しながら書いて本文を完成させます。

HTMLの基本はこれだけ

HTMLは今説明したhtmlタグ、headタグ、bodyタグが基本中の基本となります。

このベースを元に、書きたい内容を書き足しながら各種タグを学んで行けば、十分書けるようになります。各種タグも、使っているうちに覚えるものもあれば、覚えるほど利用しないタグなども出てきます。

その都度検索して使い方を読むだけで十分扱えるようになります。

最後に上記HTMLの表示結果を画像で残します。
エディタでファイルを保存している場合にはFinderやエクスプローラーで保存したHTMLファイルをダブルクリックするとブラウザが立ち上がり表示できます。

属性について

HTMLタグの中には、属性をつけることができるタグがあります。

先程の<html lang="ja">のlang="ja"も属性の一つです。
タグによって利用できる属性が異なるため、注意が必要です。

属性の書き方

基本的には<開始タグ 属性名="属性の値" 属性名="属性の値">のように記載していきます。開始タグから半角スペースを空けて属性名="属性の値"と記載します。

属性の値は必ず"半角のダブルクオーテーションではさみましょう。
また、複数の属性を書くときも半角スペースを空けて別の属性を書いていきます。

例として、上記のHTMLではarticleタグに2つの属性を記載しています。

<article id="sample" align="center">ここにいろんな文を書いたり画像を置いたり…</article>という部分です。
id属性でarticleタグに自由に名前をつけています。今回はsampleという名前ですね。
また、align属性で表示位置を指定しています。leftやcenter、rightという値が書けるため、今回は真ん中に表示するためにcenterという値を設定しています。

まとめ

今回はHTMLの基本的な構造と属性について説明していきました。

その他各種タグに関しては別途それぞれ記事にしますが、HTMLの基本構造と属性の書き方について学んでいれば、あとはネット上に転がっている記事でも十分理解できるかと思います。

  1. データに関連するデータ。表示するわけではないが、データ自身に関連のある情報 ↩︎

タグ