【第2回】マークアップの流れ – HTML編

HTMLとは

HTMLはHyperText Markup Languageの略で、Webページを作成する時に使用される言語の一つです。

まずは簡単なHTMLファイルを作ってみましょう。
シンプルなHTMLのサンプルを下記に記載します。これをテキストファイルを開いて入力してください。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTMLサンプル</title>
</head>
<body>
シンプルなHTMLのサンプルです。
</body>
</html>

ソース1行目の<!DOCTYPE html>は タグよりも前に、HTML 文書の先頭で宣言する必要があります。
ウェブページをHTML5として認識させるには、 DOCTYPE宣言 <!DOCTYPE html> を記述する必要があります

ソース2行目の<html>はHTMLで記述するということの宣言です。
<html>で始まり</html>で終了します。

ソース3行目<head>からソース6行目</head>までにヘッダを記述します。
ここにはtitle要素やmeta要素など文書に関する情報を記述します。ここで書いた情報が直接表示されることはありませんが、的確な表示を行うためにブラウザ側に必要な情報を引き渡す役目があります。

ソース5行目の<title>はページのタイトルを表す要素です。一般的なウェブブラウザのタイトルバーに表示されます。

ソース7行目<body>からソース9行目</body>までに直接ブラウザに表示させたい文章を入力します。

上記をメモ帳で良いので入力して拡張子を「.html」にして保存すると、ブラウザで下記のように表示されます。

htmlsample

 

HTML5の基本構成

HTML5から新しく追加された要素を使ったサンプルを下記に記載します。これをテキストファイルを開いて入力してください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>HTML5サンプル</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="sample.css">
</head>

<body>
<header>ヘッダー</header>
<nav>ナビ</nav>
<article>
  <h1>タイトル</h1>
  <section>
    <h2>セクションタイトル</h2>
    HTML5から新しく追加された要素を使ったサンプルです。
  </section>
</article>
<aside>その他セクション</aside>
<footer>フッター</footer>
</body>
</html>

ソース3行目<head>とソース11行目<header>との違いを説明します。
<head>の中は、ブラウザには表示されないtitle要素やmeta要素の情報を<body>タグよりも上に記述します。<header>の中は、ブラウザに表示させるページのヘッダに当たるもので、ページ上部のロゴや検索バーなどを記述します。

ソース13行目<article>とソース15行目<section>との違いを説明します。
その部分だけを抜き取って、独立したページとして成り立つだけの内容であれば「article要素」を使用し、それ以外は「section要素」を使います。

ソース20行目<aside>は、その aside 要素の前後のコンテンツには関係し、やや本筋から逸れながらも軽く触れておきたい内容、一言でいえば余談を記述します。

ソース21行目<footer>の中は、ブラウザに表示させるページ下部のフッターに当たるもので誰が書いたのか、著作権などの情報を記述します。

上記をメモ帳などのテキストエディタで拡張子を「.html」にして保存すると、ブラウザで下記のように表示されます。

html5sample

 

文書マークアップの基本の流れ

・タイトル
すべてのHTML文書はtitle要素が必要で下記のように記載します。

<title>タイトル</title>

・見出し
HTMLではレベル1からレベル6まで6段階の見出し（Heading）要素タイプが用意されています。最も大きな見出しは第一等級の見出し、すなわち h1 要素としてマークアップし、以後見出しの等級に応じて記載します。
第二等級見出し(h2要素)
第三等級見出し(h3要素)
第四等級見出し(h4要素)
第五等級見出し(h5要素)
第六等級見出し(h6要素)

・p要素
HTMLでは段落は、p要素としてマークアップする事となっています。p要素は、ひとつの段落であることを表す際に使用する要素です。

<p>段落となる文章</p>

 

Webサイトの文字コード

HTML 5 では、文書で使う文字のエンコーディングとして、UTF-8 を用いる事を推奨しています。
UTF-8は全言語（日本語はもちろん、英語、フランス語、ドイツ語、中国語、etc…）で共通に使われているため、文字化けを起こしにくいという利点があります。
文字エンコーディングを指定しないと、文字化けが起きることがあります。

<meta charset="UTF-8">

 

div要素とspan要素

<div> と <span> は文書中での役割をもたない、ただ“範囲を指定する”だけの要素です。
<div> と <span>との違いは<div> はブロック要素であり、<span>はインライン要素になります。

 

id属性とclass属性

id属性
id属性は要素に固有の名前を付けるために使います。

固有の名前ですのでid属性の値は同じHTML文書内では重複して他の要素に記述することはできません。

id属性の記述例

<div id="mainColumn">
</div>

class属性
次にclass属性です。class属性は要素に対して分類を指定します。

分類ですのでclass属性の値はHTML文書内で複数の要素に同じ値を付けることができます。

class属性の記述例

<div class="headline1">
<h2>プレスリリース</h2>
</div>

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。