よくある構造

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>たいとる</title>
    </head>
    <body>
        <p>
            Hello
        </p>
    </body>
</html>

リンク

<a href="http://www.yahoo.co.jp/"></a>

テーブル

AB
AB
AB

スタイルシート

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />

<style type="text/css">
    p{
    }
</style>

色指定

<div style="color: #ff0000;"></div>
<img src="" />
<div>
<p>
<hr>
<table>

alt と title

img要素でalt属性の内容がポップアップしない - Web標準普及プロジェクト

<img src="logo.png"
    alt="もじら組"
    title="オープンソースブラウザ、Mozillaの開発支援・ユーザコミュニティもじら組へようこそ">

チェックボックスの縦位置をテキストと揃える

<input type="checkbox" name="find_type" value="1" id="find_type2" style="vertical-align:middle;">

同じレイアウトのはずのページの水平位置がずれる

ページ縦幅の違いにより、ブラウザのスクロールバーの出現有無が変わり、 結果、ページ横幅に違いが出てしまうことがある。 常にスクロールバーを出すようなスタイルシート等を埋め込めば解決する。

html{
 overflow-y:scroll;
}

細いHR

<hr style="border-color:#408040;" noshade size="1">

記号等

HTML表記表示説明
&quot;"ダブルクォーテーション
&amp; & アンパサンド
&lt; < 小なり
&gt; > 大なり
&nbsp; 空白
&copy;©コピーライト
&#NN; 任意 文字コードNN (10進表記) の文字
&#xNN;任意 文字コードNN (16進表記) の文字
&#64;@アットマーク
&cent;¢セント
&#xb1;±プラスマイナス

参考:HTMLの特殊文字 : IT用語辞典

URLエンコーディング

http://extra.pxt.jp/studylog/ja/libs/urlencode/index.html

: … %3A
& … %26
あ … %E3%81%82
% … %25

ヘッダ

<meta http-equiv="Content-Type"
 content="text/html; charset=Shift_JIS">

※ charset = { Shift_JIS, EUC-JP, UTF-8 }


<meta http-equiv="Content-Language"
 content="ja">

折り返さない

<span style="white-space:nowrap;">aaaaaa</span>

強制折り返し

pre {
    width: 800px;
    max-width: 800px;
    padding: 1em;
    background-color: #EEEEEE;
    white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -pre-wrap;     /* Opera 4-6 */
    white-space: -o-pre-wrap;   /* Opera 7 */
    white-space: pre-wrap;      /* CSS3 */
    word-wrap: break-word;      /* IE 5.5+ */
    overflow: auto;
}
<td style="word-break:break-all; max-width:400px;">

センタリング

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<div align="center">
<table>
<tr><td>hoge</td></tr> <!-- これもセンタリングされる -->
</table>
</div>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<table align="center">
<tr><td>hoge</td></tr> <!-- これはセンタリングされない -->
</table>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<center>
<table>
<tr><td>hoge</td></tr> <!-- これもセンタリングされる -->
</table>
</center>

参考URL