HTML5について、各要素の使い方とかまとめてみたよ

2019年1月3日

目次

HTML5とは

  • HTMLは「Hypertext Markup Language」の略。HTMLの5回目の大幅な改定が「HTML5」。現在のバージョンはHTML5.2

広義のHTML5

  • 通常のHTML5は「広義のHTML5」といもいわれ、以下を含む
    • タグを使ってマークアップする「狭義HTML5」
    • 文書のデザインを指定する「CSS3」
    • 動きを定義する「JavaScript」

ブラウザへの対応状況

  • Google Chrome、FireFox、Microsoft Edge、SafariはHtml5を使用しても概ね差支えはない。
    Internet Explorer 11 は、用途が特定のIE出なければ動作できない既存のシステム用となったため、HTML5の対応はよくない。
    Microsoftの公式サイトでも、Microsoft Edgeの利用が推奨されている。
    Internet Explorerの今後について

セクショニング・コンテンツとは

  • セクションとは「区分、節、部門」のことで、要するに「区切り」のこと。

  • セクショニング・コンテンツは見出しやフッターの範囲を定義するコンテンツのこと。
    • article,aside,nav,section要素がセクショニングコンテンツ
      見出しやフッターの範囲を定義するコンテンツ
      潜在的に見出しとアウトラインを持っている

各セクショニング・コンテンツについて

article要素

  • 記事本文など
  • 自己完結してい、独立して配布可能、または再利用可能なもの
    一つの記事として成り立っている
    RSSで配信できるものみたいな感じ
  • トップページには存在しない場合が多い

section要素

  • 見出しをともなうコンテンツグループ
  • 見出しをつけられない場合はsectionを使用すべきでない場合が多い
    見出しがつけられない場合はdivでOKと考える
  • articleはコンテンツ自身で、sectionはコンテンツの一部

  • 全部divだと、何が問題になるのか
    例えばコピーライトを最後に置いた時に、どの部分のコピーライトなのかわかりづらい
    ⇨検索エンジンから見ると区別がつけられない
    あとは単純に人が見た時にわかりづらい。HTMLの構造に沿って書かれていることで、見やすくわかりやすいページが作成できる。

  • header,footer要素はセクショニングコンテンツではない
    もしセクショニングコンテンツだと、、、
    ⇨ヘッダー、フッターで独立してしまい、記事との関連性がなくなってしまう

  • セクショニングコンテンツのh1について
    HTML５では、ヘッダーにh1が使用されていても、セクショニングコンテンツごとにh1から初めても良いと書いてあった。
    5.1、5.2ではその記載が消えている
    なのでこれから作る場合にはなるべくやめたほうがいいかもしれない
    各セクショニングコンテンツはh2から始める

  • 例：古いHTMLをHTML5に置き換える場合、ヘッダーなどの置き換えに関して、ヘッダー、フッターはセクショニングコンテンツで囲む必要はないので、

<div id="header">
  <h1>サイト名</h1>
</div>

↓

<header id="header">
  <h1>サイト名</h1>
</header>

でOK
sectionに囲む必要なし

aside要素

  • コンテンツとわずかに関係しているものの、切り離せる時に使う
  • あまり重要でないコンテンツ
  • サイドバー、ブログロールなど

例えばアフィリンクはasideで囲むべきではない
googleアドセンス広告はasideでいい

nav要素

  • ナビゲーションリンクを持つセクション
  • 主要なナビゲーション（グローバルナビゲーション）はnav
  • footerないのごちゃごちゃしたリンクにもnavを使用できるが、通常不要である
  • セクショニングコンテンツなので、見出しが必要
  • デザインカンプに見出しがない場合、HTMLに見出しをつけ、CSSで非表示に

セクショニング・コンテンツっぽいけど実は違うもの

header,footer要素

  • セクショニングコンテンツではない
  • 1ページで複数回使用できる
    ⇨セクション内のヘッダー、フッターとして利用OK

main要素

  • bodyの主要コンテンツを表す
  • セクショニングコンテンツではなく、かつ文書のアウトラインに影響しない

テキストのマークアップ

  • 強調はemとstrongのどちら？
    • emはその内容の強調を表す
    • strongはそのコンテンツに対する強力な重要性、深刻性、または緊急性を表す
    • smallは小さな活字体などの副次的なコメントを表す
  • 引用したコンテンツはqとciteのどちら？

address要素

  • 住所をマークアップする要素
  • 直近のセクショニングコンテンツの著者の連絡先を表す
  • 連絡先は、住所、電話番号、SNSアカウントなど
  • 著者ごとのアーカイブページへのリンクもaddressでマークアップしてOK

time

  • 投稿日などの日付をマークアップする要素
<time datetime="2016-05-01">2016/5/1</time>

検索エンジンが理解できるようにするためこういった書式が必要
日付マークアップしたら何が嬉しい？
⇨検索エンジンがarticle属性の中にあるtime属性を認識し、記事を書いた日付がわかる
　そうなると検索結果に日にちが表示される
　URLに日付を入れるのは不要
　time属性はgoogleが決めているのでそうするほうが検索にヒットしやすくなる

small要素

  • 免責事項
  • 警告
  • 法的制約
  • 著作権
  • イメージ的には注意書きだけどあまり目立たせたくないもの
    　例：「効果には個人差があります」とか

s要素

  • 現在関係ないものを打ち消す

q要素

  • 引用をする時に囲む
    日本語の場合はカギカッコがつく
    英語とかだとダブルクオーテーションとかになる
    部分的に英語を利用したいとかの場合、lang属性を部分的に適用する
<p lang="en">The man said <q>Things that are impossible just take longer.</q> I disagreed with him.</p>

<

p lang="en">The man said Things that are impossible just take longer. I disagreed with him.

cite要素

  • 作品を参照することを表す
  • 作品のタイトルまたはURL参照を含まなければならない
  • 本、新聞、エッセイ、歌、ゲーム、彫刻、絵画などなど
  • タイトルだけをアークアップすればOK
<p>Wikipediaの<cite>HTML</cite>の記事によると…（略）</p>

WikipediaのHTMLの記事によると…（略）

i要素

  • 異なる品質のテキストを示す
  • 主なテキストと異なる言語の擁護派lang属性で注釈をつけるべき

input要素

  • ユーザーからデータを受け取るための入力欄
    広範に渡る種類のデータ入力やコントロールウィジェットが利用できます。
<p><input type="text" value="テキスト入力欄"></p>
<p><input type="password" value="パスワード入力欄"></p>
<p><input type="radio" value="ラジオボタン"></p>
<p><input type="checkbox" value="チェックボックス"></p>
<p><input type="file" value="ファイル選択"></p>
<p><input type="hidden" value="隠しデータ"></p>
<p><input type="button" value="汎用ボタン"></p>
<p><input type="range" value="スライダ－"></p>
<p><input type="date" value="カレンダー"></p>
<p><input type="color" value="カラー選択"></p>
  • テキスト入力欄

  • パスワード入力欄

  • ラジオボタン

  • チェックボックス

  • ファイル選択

  • 隠しデータ

  • 汎用ボタン

  • スライダ－

  • カレンダー

  • カラー選択

HTML5の最新仕様

HTML5HTML5,セクショニング・コンテンツ

Posted by naomiti3333