HTMLの構成を正しく理解しよう。理解を深めればコーディングが楽になる
htmlとはHyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略です。
正しい構成で記述しないと、ホームページとして機能しません。
特にHTMLやCSSを学習し始めて間もない人は、必ず構成を理解した上でコーディングする必要があります。
この記事では、htmlの基本的な構成を徹底的に解説します
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 3ヶ月〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
全体の構成
htmlは以下のような要素で構成されています。
HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>Doctype宣言、htmlタグ、headタグ、bodyタグの4つが基本的な構成となります。
これらをひとつずつ解説していきます。
Doctype宣言
ファイルがhtmlであるということを示す宣言です。
html5では「<!DOCTYPE html>」と記述します。
html4.01では「<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>」と記述されていました。
html5でかなりシンプルになっています。
html5ではDoctype宣言自体が不要という意見もありますが、html5であることをブラウザに明確に伝えるために記述しておくべきです。
Doctype宣言がないとブラウザが互換モードになってしまい、CSSが正しく解釈されないことがあります。
htmlタグ
Doctype宣言のすぐ下に記述します。
htmlのすべての要素はhtmlタグの中に記述する必要があり、外側に書かれているものは正確に読み込まれません。
htmlタグの中に書かれているものがhtmlのコードだと判断されるのです。
headタグ
ページに必要な情報を定義する領域です。headタグ内に記述される代表的な要素を解説します。
HTML
<head>
<meta charset="utf-8">
<title>ページのタイトル</title>
<meta name="description" content="ページの説明">
<link rel="stylesheet" href="style.css">
</head>headタグの中身について、それぞれに意味があります。
働きを理解し、記述しましょう。
文字コード
「<meta charset=”utf-8″>」の部分です。
metaタグはブラウザや検索ロボットにページの情報を知らせるためのタグで、これは文字コードがutf-8であるということです。
utf-8は世界中で使用されている最も一般的な文字コードです。
これを指定しておかないと、ページ内の文字が正しく解釈されない可能性があります。
英語版のブラウザからアクセスすると文字化けを起こすといったリスクがあるので、日本語で作られたページには忘れずに記述しましょう。
タイトル
titleタグでページのタイトルを記述します。
検索結果やブラウザのタブに表示されるだけでなく、SEOにも重要な意味を持つので必ず指定してください。
ページの説明
metaタグは前述の通りブラウザや検索ロボットにページの情報を知らせるためのタグで、descriptionにはページの内容を説明するための文章を記述します。
SEOの効果はありませんが、検索結果でタイトルの下の表示されクリック数に大きな影響を及ぼす重要な要素です。
外部ファイルの読み込み
「<link rel=”stylesheet” href=”style.css”>」の部分です。
linkタグはhtmlと他のファイルを関連付ける役割を持っています。
relはファイルとの関係性を示し、ここでは読み込むファイルがcssであるということを示しています。
hrefは実際に読み込むファイルです。
CSSを使用しないページは皆無であるといって過言ではありません。
そしてcssは外部ファイルの読み込みが主流なので、limkタグはほぼ間違いなくheadタグに記述する要素だと言えるでしょう。
bodyタグ
画像やテキストなど、ページの内容を記述する領域です。
例えば、以下のような記述を行います。
HTML
<body>
<header>ヘッダー</header>
<h1>大見出し</h1>
<p>テキスト</p>
<h2>小見出し</h2>
<p>テキスト</p>
<div><img src="sample.png" alt=”画像”></div>
<footer>フッター</footer>
</body>このようにさまざまなタグを用いて、実際にユーザーの目に触れるコンテンツを構築していきます。
まとめ
htmlの構成について解説しました。
まずは必要なDoctype宣言を行い、その直下にhtmlタグを記述します。
htmlタグの中に、まずはページの情報を定義するheadタグ、続いてページの内容を記述するbodyタグというのが基本的な構成です。
どんなページでも基本的な構成は絶対に変わらないので、最初に覚えるようにしてください。
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 12週間〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
