XHTML と HTML5 のhead要素の書き方の違い

XHTML と HTML5 のhead要素の書き方の違い

今更感がものすごいですが、やっとHTML5の勉強を始めました。
HTML5の文書構造について勉強した事を書きだしていこうと思います。まずは、head要素内の宣言文やmetaタグ書き方についてです。


ちなみにHTML5のロゴはこちらのページ”W3C HTML5 Logo”からダウンロードできます。
Creative Commons Attribution 3.0 で提供されているので自由に使えるようです。

1. DOCTYPE宣言文

XHTMLの場合

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Transitionalかstrictによっても書き方が違いますし長いです。

★↓↓ HTML5の場合

<!DOCTYPE html>

とても短く、Transitional、strictなどの指定もないです。

2. xmlns属性と言語指定

XHTMLの場合

<html  xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">

xmlns属性をhtmlタグに記入しなくてはいけません。

★↓↓ HTML5の場合

<html lang="ja">

lang属性だけの記述でよいです。

3. エンコーディング

XHTMLの場合

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
//

★↓↓ HTML5の場合

<meta charset="utf-8" />

charsetの記述だけでよいです。

4. リンクタイプ

■スタイルシート読み込み

XHTMLの場合

<link rel="stylesheet" type="text/css" href="style.css" />

★↓↓ HTML5の場合

<link rel="stylesheet" href="style.css" />

type属性を省略できます。

■ファビコンの読み込み

XHTMLの場合

<link rel="shortcut icon" href="favicon.ico">

★↓↓ HTML5の場合

<link rel="icon" href="favicon.ico">

iconの指定だけでよいです。

HTML5だとだいぶ簡素化して書けるようになりますね。

Related Article

3 Comments & Tracbacks

  • KEITA 2016-10-21 12:12 PM

    HTML5では閉じタグの / は不要ですよ。

    Reply

    • saori 2016-12-02 10:29 AM

      コメントありがとうございます。返信が遅くなり申し訳ありません。
      そうえいばそうですね!

      Reply

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー トラブル コードサンプル スライドショー コンテンツ 素材 jQueryプラグイン Facebook php 引っ越し お知らせ JavaScript CSS カテゴリー Shareボタン IE 投稿タイプ seo Photoshop レスポンシブ Macアプリ ナビゲーション タクソノミー HTML5 WPセキュリティ Git カスタムメニュー サイドバー PHPリファレンス SVG query_posts API WP使い方 iTunes データベース コメント function RSS 条件分岐 get_posts() スマートフォン Sass/Compass マルチサイト機能