読者です 読者をやめる 読者になる 読者になる

one's way blog

ワクワクを生み出せるWebエンジニアを目指して。

HTML5での最低限のお作法

Tips HTML5

HTML5で書く時に最低限記述した方が良い事、またそれぞれの意味をまとめてみました。

HTML5で書く時に最低限記述した方が良い事

初めに以下がHTML5で書く時のテンプレートです。

HTML5
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="author" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" href="">
<script></script>
</head>
<body>
</body>
</html>

説明

  • DOCTYPEの指定
 <!DOCTYPE html>

HTML文書のバージョンを指定します。
HTML4だと

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

と書かなければいけないので、HTML5でだいぶ簡単になったことがわかります。

  • コンテンツ言語の指定
<html lang="ja">

langを付けるとそのHTML文書がどの言語(ここでは英語とか日本語とか)で書かれているかを指定できます。
ほとんどの場合は問題なく表示されますが、この指定がないと何が困るかというと、
ブラウザの設定によってはフォントの選別やプラグイン(翻訳機能)とかがうまく機能しない場合があります。

<meta charset="UTF-8">

いわゆる文字化けなどはここの設定が原因のことが多いです。
(ファイル保存時の文字コードなどにも気を付けなければいけませんが)

  • 作者の指定
<meta name="author" content="">

作者を指定できます。
SEO的には2015年時点で関係ないようなので、あってもなくても良い様なのですが、
Githubなどソース共有が盛んな現在、書いておいても良いかもしれません。

  • キーワードとサイト説明の指定
<meta name="keywords" content="">
<meta name="description" content="">

検索エンジンで検索する際にキーワードを設定しておいた方がヒットしやすくなります。
descriptionはサイトの説明で、検索結果に出てきた際にリンクの下に書かれてある概要部分になります。
SEO対策の第一歩ですね。

<link rel="stylesheet" href="">
<script></script>

必要があれば外部ファイルの読み込みをします。



HTMLは色んな書き方ができる分、結局どれが一番良い書き方かわからなかったので、今回ちゃんと調べてみました。
基本的には最初に提示したテンプレートを埋めたら良いのですが、スマホ対応やターゲット
によっては書き方を変える必要があるのでご注意ください。