skillup

技術ブログ

デザイン

HTML5について

投稿日:2016年9月12日 更新日:

CSSのサンプルを書いていく途中で、HTML5タグが出来てたので簡単におさらいです。

HTML5のメリット

  1. 動画の埋め込みなどが比較的簡単にできる
  2. 新しいタグが作られ、よりHTMLをすっきりかけるようになる

1ですが、私はあまり触れたことがないです。ここでは2を中心に説明していこうかなあと思います。

HTML5とは何かを簡単にまとめてみた

HTML5とは?初心者向けに特長や使い方を超わかりやすく説明してみた

form周りのhtml

html5はform周りのタグが進化しています。

必須チェック(requied)やオートコンプリート(autocomplete)などをすることができます。

ただし、ブラウザなどではきかないものもあるようなので調べておきましょう。

フォームを劇的に使いやすくする!HTML5の8つの新属性

HTML5 でフォームを大幅に改良

文章構造の明確化

header,footer,nav,section,articleなどですね。従来だとすべてdivで分けていたと思いますが、これらのタグを使うことによりHTMLをよりわかりやすく書くことができます。

navについて

主にグローバルナビなど。

[15-4] リストマーカーを画像や任意のテキストに変更する方法

sectionとarticleについて

  • sectionとarticleですが一般的に下記のような基準で使い分けられるようです。
  • 情報のあるコンテンツはarticleかsection
  • そのコンテンツ自体で独立している場合はarticle、そうでない場合はsection(パーツや要素)
  • 意味のないhtml上のタグ(レイアウトを組むためのもの)などはdiv
  • ただすごく神経質に使い分ける必要はなさげ(汗)

あとは例をいっぱい見て、体で覚えたほうがよさげですね。

参考リンク

HTML5の新規タグ「section、article、header、footer」の使い方

もう悩まない!HTML5の「section要素」と「article要素」の違いについて

divとsectionとarticle要素それぞれの特徴、使い分けと組み合わせ方 -HTML5のセクショニング コンテンツ

HTML5のお勉強 articleとsectionとか

-デザイン
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

data- HTML5のカスタムデータについて

HTML5のカスタムデータ属性について。 HTML5ではタグにdata-*とすることで任意の値を持たせることができます。 いまさら聞けない、HTML5カスタムデータ属性の基本と使いどころ 例として下記 …

no image

固定されたナビ(ヘッドとサイド)

boostrapでサイトを作るときにヘッダーとサイドバーを固定したいときについてメモします。 Contents1 ヘッダーを固定したい場合2 サイドバーを固定したい場合3 参考リンク ヘッダーを固定し …

no image

CSSの適用ルールと継承について

前回のエントリーでも書いたようにいまいちわかっていないことが多いので、復習します。 Contents1 セレクタの種類2 セレクタの詳細度3 継承 セレクタの種類 CSSのセレクタには下記のようなもの …

no image

CSSはまりやすいポイント ※随時更新予定

CSSにてよく確認するのネタに関して Contents1 中央寄せ2 命名3 テーブル 中央寄せ vertical-alignを指定できるのは「インライン要素」と「テーブルセル」だけ text-ali …

no image

CSSを書くときのコツ

前回のCSSのルールを踏まえて、今回はCSSを書くときの概念的なルールです。 Contents1 CSSのデメリット1.1 抽象化が難しい1.2 すべてのルールがグローバルスコープ2 CSSを書くとき …

アーカイブ