(c)2005-2018 heitotsuHTML5 でも論理的マークアップが可能みたいなので、一往、私が試した中で推奨できると判断した HTML5 のマークアップを列挙しておきます。未確認のものも多々在りますが、其処ら辺はご容赦下さると幸です。
マークアップする上で最低限以下の要素は外さない様にして下さい。
以上、四つの項目を漏らさず記入すれば、最低限 69 文字でエラーの無い HTML5 の文書が作成できます。一往、少しだけ解説しておきます。
<!DOCTYPE HTML>
最初に HTML5 の文書である事を宣言します。文書型宣言は、ドキュメントタイプ宣言、若しくは DTD とも呼びます。構文が大幅に短かくなって生れ変りましたね。
<html lang="ja">
html 要素の lang 属性を使用して、日本語の html 文書である事を記述します。終了タグは無くても大丈夫みたいです。
<meta charset="utf-8">
meta 要素で文字符号化方式（キャラクターエンコーディング）を設定します。"shift_jis" は、古い方式と見做されてしまったので、今後は "utf-8" を charset 属性で設定する様にして下さい。文書は「utf-8 BOM 無し」として作成します。其の際、文字によっては JIS 第一水準、第二水準の環境下での表示が不可能な場合もありますので注意が必要です。因みに、従来の記述が残ってる場合は削除しておきます。
<title>5</title>
HTML の草創期から必須ですので、今更説明する迄もありませんよね。此の要素は終了タグも忘れないで下さい。
「utf-8 の日本語で書かれた HTML5 文書である事を記述した上で、タイトルを設定する」
必須事項を十分把握できたら、其れ以外の注意になります。以下の注意は、各種の html 要素の記述方法について、他のヴァージョンの html 文書に於ける構文との相違などの観点から説明してみます。
従来 meta 要素で指定して来た "Content-Style-Type" は規定から外されました。なので、行ごと削除です。
<meta http-equiv="default-style" content="style.css">
当該 html 文書のデフォルトとなる外部 CSS 文書を meta 要素で設定できる様になりました。http-equiv 属性で "default-style" を指定した上で、content 属性でデフォルトとなる外部 CSS 文書を設定する事ができます。唯、此れだけでは設定された外部 CSS 文書が有効になる訣ではないので、link 要素を一行追加します。
<link rel="stylesheet" href="style.css">
従来から存在する設定の方法ですが、type 属性は削除しておきます。
従来 meta 要素で指定して来た "Content-Script-Type" は規定から外されました。なので、行ごと削除です。
name 属性の "author" や "copyright" や "description" や "keywords" や "editor" 等は有効ですので、設定しておくといいかも知れません。
link 要素の rev 属性は一旦廃止され再度規定されたみたいです。どうも規定が安定しません。ですので、一往今後は rel 属性に "author" を指定してから href 属性にメールアドレスを設定する様にして下さい。
<link rel="author" href="mailto:foo@bar.com">
こんな感じに。此の設定は作者の連絡先を記したウェブページへのリンクでも良いみたいです。
rel 属性には、"stylesheet" や "author" 以外に、"search" や "Chapter" や "Appendix" や "Contents" や "Glossary" や "Copyright" や "Help" や "Start" や "Next" や "Prev" 等も設定可能とされます。
テーブル要素では、summary 属性が規定から外されました。なので、削除します。其の代りに従来から存在する caption 要素で、表の説明をする様にしてみて下さい。又、table 要素に title 属性を追加設定する方法なんかもあります。今更の蛇足ですが border 属性は既に非推奨です。
こんな感じに。
th 要素では、abbr 属性が必須ではなくなったのですが、規定から外されたとする意見もあります。なので、一往削除します。其の代りに、必要に応じて従来から存在する title 属性で、表内の項目の少し詳しい説明をする様にします。
<th title="foobarは仮の設定です">foobar</th>
| ○ | A | B | C | D |
|---|---|---|---|---|
| 1 | A1 | B1 | C1 | D1 |
| 2 | A2 | B2 | C2 | D2 |
| 3 | A3 | B3 | C3 | D3 |
大分昔に存在したとされる「CSS コミュニティー」方面の間では HTML5 に対して批判的意見を持った人も多いらしいので、積極的には推奨しませんが、以上の内容は論理的マークアップを実践する上での修正方法の一つとして提示しておきます。 ―― 此の文書は、HTML5 の規定に基づいて作成してあります ――
(c)2005-2018 heitotsu| SEO | [PR] !uO z[y[WJ Cu | ||
