Wall Surrounded Journal

http://twitter.com/call_me_nots

(X)HTMLでマークアップをやってみよう

マークアップのことを考えずに文章を書くと

文字エンコーディング とは
文字エンコーディング
日本語 文字符号化
英語 character encoding
ふりがな もじえんこーでぃんぐ
フリガナ モジエンコーディング

文字の変換表。
プログラミングにおいて、文字はそれぞれ整数値と結び付けられている。この、「整数値」から「文字」へと変換するための変換表が「文字エンコーディング」である。
文字エンコーディングは複数存在する。文字エンコーディングが異なると、「文字」と「整数値」の組み合わせも異なる。たとえば「あ」という文字は、「シフトJIS」という文字セットでは「0x82A0」だが、「Unicode」という文字セットでは「0x3042」である。

その文章のタイトルは?

(X)HTML文書で最もその内容に気を遣うべきなのがtitle要素だそうです。

したがって、上の文章で最もtitleっぽいのをhead要素でマークアップしてみましょう。

<head>
<title>文字エンコーディング とは</title>
</head> 
文字エンコーディング
日本語 文字符号化
英語 character encoding
ふりがな もじえんこーでぃんぐ
フリガナ モジエンコーディング

文字の変換表。
プログラミングにおいて、文字はそれぞれ整数値と結び付けられている。この、「整数値」から「文字」へと変換するための変換表が「文字エンコーディング」である。
文字エンコーディングは複数存在する。文字エンコーディングが異なると、「文字」と「整数値」の組み合わせも異なる。たとえば「あ」という文字は、「シフトJIS」という文字セットでは「0x82A0」だが、「Unicode」という文字セットでは「0x3042」である。

次は見出し

次は見出しをh1~h6で囲みましょう。

また、body要素の直下には

  • p / h1~h6 / div / ul / ol / dl / pre / hr / blockquote / address / fieldset / table / form / noscript / ins / del / script
のいずれかが現れることになります。
したがって、見出しの他の文章もp要素でマークアップします。
<head>
<title>文字エンコーディング とは</title>
</head> 
<h1>文字エンコーディング</h1>
<h2>日本語 文字符号化</h2>
<h3>英語 character encoding</h3>
<h4>ふりがな もじえんこーでぃんぐ</h4>
<h4>フリガナ モジエンコーディング</h4>

<p>文字の変換表。</p>
<p>プログラミングにおいて、文字はそれぞれ整数値と結び付けられている。この、「整数値」から「文字」へと変換するための変換表が「文字エンコーディング」である。 </p>
<p>文字エンコーディングは複数存在する。文字エンコーディングが異なると、「文字」と「整数値」の組み合わせも異なる。たとえば「あ」という文字は、「シフトJIS」という文字セットでは「0x82A0」だが、「Unicode」という文字セットでは「0x3042」である。</p>

なお、多くのページで同様の要素が登場するようなもの(お問い合わせ先など)には、見出しを振るよりも、dl要素(定義リスト)を使って記述する方が便利。

また、body要素の中で使われるものは、大きく「ブロックレベル要素」と「インライン要素」に分けることができます

body要素の後にhead要素、html要素をマークアップする

<html xmlns="http://www.kab-studio.biz/Programing/JavaA2Z/Word/00000693.html" lang="ja" xml:lang="ja">
<head>
<title>文字エンコーディング とは</title>
</head> 
<body>
<h1>文字エンコーディング</h1>
<h2>日本語 文字符号化</h2>
<h3>英語 character encoding</h3>
<h4>ふりがな もじえんこーでぃんぐ</h4>
<h4>フリガナ モジエンコーディング</h4>

<p>文字の変換表。</p>
<p>プログラミングにおいて、文字はそれぞれ整数値と結び付けられている。この、「整数値」から「文字」へと変換するための変換表が「文字エンコーディング」である。 </p>
<p>文字エンコーディングは複数存在する。文字エンコーディングが異なると、「文字」と「整数値」の組み合わせも異なる。たとえば「あ」という文字は、「シフトJIS」という文字セットでは「0x82A0」だが、「Unicode」という文字セットでは「0x3042」である。</p>
<body>
</html> 

DOCTYPEを最後に、<html>よりも前で宣言する

詳しくは

あたりを参照。

(必要に応じて)XML宣言

XML宣言とは、XML文書の先頭に付き、その文書がXML文書であることを明確に示す文字列である。以下がXML宣言の例。

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

xml versionはとりあえず"1.0"にしとけ。

encoding:文字エンコーディング宣言
XML文書のデフォルトはUnicode(UTF-8UTF-16)。
その場合は省略可だが、明示しておいた方がよろしいらしい。

standaloneスタンドアロン宣言
当該XML文書が、外部で参照するファイルなしで処理できる文書であるならば、これをスタンドアロン文書と呼び、「standalone="no"」で宣言する。
なお、XHTMLではまず「standalone="no"」であり、この宣言の省略時も"no"として扱われる。

ただし、古いブラウザでの表示を念頭に入れた場合、XML宣言は省略した方がいい場面もあります。(後方互換モードで解釈される場合)

divやsectionによる構造化