プロジェクト

全般

プロフィール

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スペース
  • 小文字のみを使う(タグ、属性名など)
  • 属性値はダブルクオートで囲む
  • クラス名は、小文字で短く、複数語はハイフンで結合


8日前に更新