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

メールでのお問い合わせ

お問い合わせフォーム >