posted on 2019.7.15
htmlとはHyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）を略した通称です。インターネット上でWebページを表現する為の技術の一つで、何回か改定を重ね現在は2014年に勧告されたHTML5の仕様が中心的に使われています。htmlはハイパーテキスト・マークアップ・ランゲージという名称どおり、テキストの見た目の文章構造などを表現するための形式言語で、表現形式ごとに用意されたタグを使用して、ウェブページを出力する側（おもにインタネットエクスプローラのようなブラウザソフト）が理解できるようにテキストや画像などをマークアップしていきます。
HTMLは皆さんがホームページを制作する上で最初に学ばなければならない技術です。簡単なHTMLの構造を確認しながら、用意されたタグの意味や使い方を順を追って解説していきたいと思います。
HTMLの文書構造【初心者向け】
HTML5の表現を中心にHTMLの基本の文書構造をdemoとして示します。簡単なウェブページに必要な要素は含ませてあります。意味を少しずつ汲み取っていきましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="ja"> <head> <title>猫猫子猫大好き子猫</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <article> <h1>【猫】大切な宝物</h1> <section> <h2>かわいい子猫ちゃんたち</h2> <img src="img/neko_neko_neko.jpg" alt=""/> <p>僕の愛すべき猫ちゃんたち。幸せ<span class="mark_heart">♡</span></p> </section> </article> </body> </html> |
上に書かれたhtmlファイルの内容がどのような意味を持つのか簡単に解説していきます。
<!DOCTYPE html>HTML文書がHTML5で書かれていることを表示する側（ブラウザなど）に伝えるための宣言になります。文書の最初に記述します。記述しないと後方互換モードになりレイアウトが崩れるおそれがあるので記述しましょう。後方互換モードは基本意味をなしません。<html lang="ja"><html>タグは、HTML文書であることを表示する側（ブラウザなど）に示す際に使用します。HTML文書自体のルート（１番最初）を表します。lang属性を指定することができます。jaは日本語で表示してくださいの意味。<head><head>タグ内は、<body>タグ以降に対して持たせたい意味や表現などに必要な要素を収納して置く場所になります。タイトル、スクリプト、スタイル、メタ情報などを含めることができます。中に入る要素がウェブページの要素として表示されることはありません。<title><title>タグはすべてのHTML文書で必須であり、ブラウザーのタイトルバーやページのタブに表示される文書のタイトルを定義します。<meta charset="UTF-8"><meta>タグは、HTML文書に関するメタデータ（情報）を提供します。メタデータはページに表示されませんが、マシン解析可能になります。charset属性はHTML文書の文字コードを指定します。指定を誤ると文字化けの原因になります。UTF-8 を推奨します<meta name="viewport" content="width=device-width, initial-scale=1.0">name属性にviewportを指定してあります。ビューポートとは表示領域を表します。デバイスによって異なり、スマートフォンではコンピューターの画面よりも小さくなります。デバイスの多様化に伴い、HTML5から<meta>タグを通じてビューポートを制御できる方法が導入されました。*viewportについては「レスポンシブwebデザインとは？基本の実装を学んでモバイルフレンドリーに対応しよう！」の記事もお読み下さい。
<body><body>タグはHTML文書のコンテンツの始まりを示す要素です。通常ブラウザには<body></body>で囲まれた範囲がブラウザに表示されます。<body>要素には、テキスト、ハイパーリンク、画像、表、リストなど、HTML文書のすべてのコンテンツが含まれています。<h1><h1>～<h6>までのタグはコンテンツの見出しを意味します。<h1>から順にhtml5以前は大見出し、中見出し、小見出しのように使用され、ウェブページ１ページに対して<h1>タグは１つでしたが、html5以降はセクションごとの見出しとして<h1>タグを複数回使用するケースもあります。<article><article>タグは、独立した自己完結型のコンテンツを指定します。個別に配信や再利用を行うことを意図したコンテンツを表します。同一ページ内に、投稿記事、ニュース記事、コメント記事など並べる場合などそれぞれを<article>タグで囲みます。<section><section>タグはHTML 文書の中で単独のセクション (区間) を表します。必ずではありませんが、通常はセクションごとに見出しがあります。<h2><h2>タグは見出しを表します。<h1>タグの次に中見出し、小見出しなどが連続するケースに使用します。通常、<h1>タグの直下に<h6>タグなど離れたタグを使用することはありません。<img><img>タグはHTMLページ内で画像を定義します。src属性に外部のurlパスを指定して画像を埋め込みます。alt属性は画像のテキストによる説明で、必須ではありませんがアクセシビリティのために非常に有用です。<ｐ><p>タグは段落を定義します。ブラウザは、各<p>要素の前後に自動的にスペース（マージン）を追加し、段落を表現します。HTMLの段落はテキストだけでなく画像やフォーム欄など関連するコンテンツを構造的にまとめることができます。
