Loading

プレオ日誌

blog

HTML5でマークアップしてみよう!

HTML5でマークアップしてみよう!

こんにちは、フロントエンドエンジニアの岡田です。

「HTMLマークアップについては理解できた!実際にホームページを作りたいけど、じゃあ具体的に何から書き始めればいいの?」

そんな方へ、HTMLマークアップ第2回はマークアップの導入部分についてご紹介していきます。

前回記事はコチラ▼
HTMLマークアップって?

DOCTYPE宣言

DOCTYPE宣言とは、どのバージョンのHTMLやXHTMLで作成されているのか示すもので、ソースコードの先頭に記述します。
HTML5では以下のように、シンプルに記述することができます。
大文字、小文字でも問題ありません。

<!DOCTYPE html>

文字コード

webページが文字化けしないように文字コードを指定します。

<meta charset="UTF-8">

titleタグ

titleタグはページのタイトルです。
ブラウザのタブや検索結果に表示されます。

SEO対策で重要視するキーワードがある場合はtitleタグにも含めましょう。

<title>title</title>

 

ベースの記述

上記3つを含めて、基本的には以下のようなコードがベースとなります。

これにプラスして<head>~</head>内にその他のmetaタグや、css・jsなどの外部ファイル読み込みの記述を追加していきます。

 

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>title</title>
	<meta name="description" content="">
	<meta name="keywords" content="">
</head>
<body>

</body>
</html>

HTML5タグを使ったサンプル

HTML5タグを使用し、下記サンプルのようにマークアップすることができます。

ヘッダー要素には<header></header>を、記事のまとまりごとに<article></article>でグループ化、フッター要素に<footer></footer>を使用します。
見出しとなるテキストはhタグで囲みましょう。

 

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>title</title>
	<meta name="description" content="">
	<meta name="keywords" content="">
</head>
<body>

	<header>
		<div><img src="images/logo.png" alt="ロゴ" width="200" height="150"></div>
	</header>

	<section>
		<h1>ホームページの作り方</h1>
		<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
		<article>
			<h2>HTMLについて</h2>
			<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
		</article>
		<article>
			<h2>CSSについて</h2>
			<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
		</article>
	</section>

	<footer>
		<p>copyright</p>
	</footer>

</body>
</html>

 

今回はマークアップの導入部分についてご紹介しました。

HTMLには他にもさまざまな役割を持ったタグがたくさんあります。
どんなタグがあるのか、どういった際に使うのか、調べてみると面白いですよ。
制作するホームページの内容、要素の意味に応じて使用するタグを使い分けていきましょう。

ご質問などお気軽にお問い合わせください

お電話でのお問い合わせ

096-312-3430

月〜金曜日(祝日除く) 9:00〜18:00

メールでのお問い合わせ

お問い合わせフォーム >

デザイン相談会
デザイン相談会を行っています。毎週月曜開催・予約制

これから開業する方はもちろん、事業主の方も大歓迎です。デザインやWEBサイト、ブランディングなどについて今現在お困りのことがあればお気軽にご相談ください。プレオデザインでお役に立てることがあれば嬉しいです。

相談会に申し込む >

TOPへ戻る