HTML+CSS References | HTMLの基本要素

骨組み

HTML(HTML5)の超基本構造は、次の通りです。

<!DOCTYPE HTML>
<html>
  <head>
  <!--
    HTMLヘッダ
    <head>～</head>の部分。
    そのHTMLページ全体を定義する部分で、
    多くの場合は編集する必要なし。
    # 問題発生時に情報を読み取る必要はあるかも。
  -->
  </head>
  <body>
  <!--
    HTML本文
    <body>～</body>の部分。
    ブラウザから見える部分。
    編集が必要な場合の殆どは、この中身を更新すればOK。
  -->
  </body>
</html>

ヘッダでよくある要素

編集する必要はほぼありませんが、知識として。
知っていると、ページに問題があった場合の対処がわかるようになったりします。

<meta>

メタデータの指定。

<meta charset="shift_jis">
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>～</title>

タイトル。タブやブックマークタイトルなどに使用。

<link>

リンクする外部リソース。
大抵はCSSファイルとのリンクに用いる。

<link rel="stylesheet" type="text/css" href="common.css">

<script>～</script>

ページに組み込むスクリプトを記述する。
外部スクリプトファイルへのリンクにも用いるが、
どんな場合でも閉じタグは省略せず、必ず閉じること。忘れがち。

<script type="text/javascript" src="../ctrl/jquery-1.8.1.min.js"></script>
<script type="text/javascript">
$(function(){
	$("a[href^='http://']").attr("target","_blank")
});
</script>

HTML本文でよくある要素

以前からあるページ

HTML4.01を基礎として記述されたhtmlでよく見かけるタグ。

<table>～</table>

本来は表を描画するためのタグ。
<tr>で行（横方向）、<td>で列（縦方向）をそれぞれ指定。
古いページでは、これを駆使してWebページデザインを行っている。
そのため、実際に編集したいポイントがtableの入れ子構造の奥の奥ということもざら。
入れ子構造を正しく把握し、デザインを崩さない様に編集すること。。

<table>
<tr>
	<td>1:top-left</td>
	<td>2:top-center</td>
	<td>3:top-right</td>
</tr>
<tr>
	<td>4:bottom-left</td>
	<td>5:bottom-center</td>
	<td>6:bottom-right</td>
</tr>
</table>

↓

1:top-left	2:top-center	3:top-right
4:bottom-left	5:bottom-center	6:bottom-right

<font>～</font>

フォントの色や大きさを指定するインライン要素。
<font size="12" color="#ff0000">のように指定する。
<font>～</font>で括られた部分のみに適用され、
文章中の単語や行に用いられる。

<b>～</b>、<i>～</i>

文字の見た目を太字（bold）や斜体（italic）にするインライン要素。
<strong>や<em>を使ったりもする。
<b>と<strong>、<i>と<em>は
見た目は同じでも、タグが内包する意味は異なり、
ブラウザごとに挙動が違ったりするので注意。

最近リニューアルしたページ

HTML5で書かれたページによくあるタグ。

<div>～</div>: ひとかたまりの範囲を指定するタグ。ブロック要素。
idやclassなどを指定して、そこからCSSを適用させるのが主な利用方法。
CSSをよく使うページほど多用されるので、閉じタグの混同に注意。
私が使う場合は、閉じタグの隣にコメントでidやclassを書いておいている。
<span>～</span>: ひとつの範囲として定義するタグ。インライン要素。
<div>とは違い、まとまり（箱）を作らない点に注意が必要。
大抵の場合はclassを指定されて<font>タグの代替品として使用される。
<span></span>がぽつんと置いてある場合は、
外部スクリプトで何かしら使われることもあるので触っちゃだめ。
<ol>～</ol>、<ul>～</ul>: リストを表示するタグ。リストアイテムは<li>～</li>で記述する。
<ol>は順序があり、記述した順に連番が振られる。
<ul>は順序がなく、箇条書きを生成する。
リストの中にリストを挿入すると、自動的にネスト（入れ子構造化）される。
<dl>～</dl>: 定義リストを表示するタグ。
定義語アイテムを<dt>～</dt>で、語の説明を<dd>～</dd>で記述する。
単語：それに対する説明、という組み合わせをリスト化する際に使う。
<header>、<nav>、<section>、<article>、<aside>、<footer>: HTML5から採用された、文書構造をより明確に示すためのセクションタグ。
ブラウザ上の扱いとしては、<div>と同様にブロック要素として扱われる。
IE8以前のブラウザでは、タグ自体を正しく解釈できない可能性がある。

要素は適宜思いついたら追加していく予定です。