プロジェクト

全般

プロフィール

Wiki » Web »

HTMLの書き方

HTMLの仕様

仕様の参照先は、JavaScriptとHTMLファイル に記載しました。

書き方超まとめ

HTML メモ 
<!DOCTYPE html>
<html lang="ja">
 <head>
  <meta charset="UTF8">
  <title>コンテンツの題名</title>
 </head>
 <body>
  <h1>見出し</h1>
  <p>段落</p>
  <!-- コメントの記述（ブラウザには表示されない） -->
 <body>
</html>

先頭は DOCTYPE宣言
html要素で全体を囲む
html要素直下にhead要素、body要素を順に記述
head要素直下にmeta要素、title要素を順に記述
meta要素の属性でコンテンツの文字コードを指定
body要素直下にコンテンツを記述
（見出し、箇条書き、表、リンク、画像、フォームなど）
  • html要素のlang属性にページを記述している言語（英語、日本語、など）を指定するのが推奨とのこと
  • コンテンツの中で、タグを識別する記号（< と >）を使うときは、エスケープが必要（< と >）
  • h1はページで一つ、次はh2、と順番に指定（見栄えの理由で飛ばさない）
    • 次のセマンティックタグでsectionを使う場合、section毎にh1、h2、と指定可能、見出しレベルをスキップしてもよい。h1はそれぞれのsectionで使用可能

セマンティックタグ

最近のHTMLでは、セマンティックタグ（文書の構造を意味的に分類するタグで、header、main、footer、article、section、aside、nav、figureなど）を使って文書の意味的な構造を記述します。HTML4まででは、divを使ってコンテンツをブロックに分けていましたが、多段のdivが登場したりと構造が見えにくくなるほか、divで記述したブロックの意図が見えないといった課題があります。そこでコンテンツの構成を意味的に示すタグが追加されました。一例を次に示します。

  • ヘッダー (header)
    ページ上部にある要素を記述、ロゴ・タイトル・ナビゲーションメニューなどが置かれます。
    • ナビゲーション（nav）
      本文（main）のナビゲーションメニューを置きます。headerの中に含めることが多いです。
  • 本文 (main)
    • セクション (section)
      見出しより上位のまとまりです。
      • これまでの見出し1-6は、section毎に構成 (h1 ... h6)
    • 独立した記事 (article)
      ニュース記事、ブログ記事などがページに複数並ぶときに、それぞれの記事が独立して成り立つ場合に使用します。
    • 図や表など (figure)
  • サイドバー (aside）
    補足情報を置きます。サイドバーに適用することが多いです。
  • フッター (footer)
    ページ下部にある要素を記述、著作権表記、リンクなど。

そのほか、mark, nav, details, summary, time などがあります。

推奨する書き方

フォーム

入力要素にlabelを指定

フォームで使用するinput要素などの入力部品の要素に対して、label要素を指定すると、アクセシビリティ、操作性向上（説明の文字をクリックしてもコントロールが反応する）の効果があります。

  • チェックボックスの場合、チェックボックスの□欄だけでなく、文字列の部分をクリックしてもチェックを付ける・外すの操作となる
  • 文字入力の場合、キャプションの文字部分をクリックすると文字入力欄にフォーカスがあたる

入力部品の要素とlabel要素の紐づけは2つ方法があります。

  • 属性 for と id とで紐づける方法
  • 入力部品の要素を囲むlabel要素を指定する方法
<label for="user-name">氏名を入力してください。</label>
<form action="user-info" method="get">
    <input type="text" name="user" id="user-name">
    <input type="submit" value="確定">
</form>

<label><input type="radio" name="os" value="Windows"　checked>Windows</label>
<label><input type="radio" name="os" value="MacOS">MacOS</label>
改行がなくなってしまう

<label>要素で入力部品を囲むと、次の要素が改行されず横に表示されてしまいました。
対処案

  • <p>タグで<label>要素を囲む
  • CSSでlabel要素を段落とする
    label {
  display: block;
}

参考文献

スタイルガイド、規約等

Google HTML/CSS Style Guide

https://google.github.io/styleguide/htmlcssguide.html

  • UTF-8で記述
  • HTTPS通信を使う
  • インデント2スペース
  • 小文字のみを使う（タグ、属性名など）
  • 属性値はダブルクオートで囲む
  • クラス名は、小文字で短く、複数語はハイフンで結合

約1ヶ月前に更新