HTMLの文法を改めて見直し、まとめてみました。

2015.4.24 (金)
maincatch

春になり、ニワカソフトにも新卒の社員が入社してきました。頑張ってHTML・CSSの勉強をしている所を見ると、初々しくて羨ましくなります。長いことWEB制作の世界に身を置いていても「あれ?<dl>の中って<dd>だけでも文法的にOKなんだ!」とかの色々な発見があると思います。そんなこんなで、少しHTMLの基礎に立ち返ってみようかと思いHTMLの文法やその他諸々を記事にしてみました。

ブロック要素とインライン要素

HTMLの話で大体一番最初に耳にする言葉じゃないでしょうか?僕も勉強し初めの頃はいまいち理解できなくて、とりあえず「タグの前後で改行が入る=ブロック要素」「タグの前後で改行が入らない=インライン要素」とかなり乱暴で大雑把ですが、そんな覚え方をしていました。まずはブロック要素の説明です

ブロック要素

cssや属性値での指定がない場合、要素の横幅が親要素の横幅100%なHTMLタグであり、CSSで処理してあげない限りはブロック要素とブロック要素を横並びに配置する事は出来ません。横幅がデフォルトで100%な為、「必ず改行されるタグ」になる訳ですね。配置場所は、の中ならどこに設置しても構いません。ブロック要素の横幅(領域)を確認したい時はbackground-colorで背景色(borderでも良いですが、borderの幅も換算されるので背景色のほうがお勧めです)を指定してあげると目視できます。

この背景色の領域は親要素の<div>の領域になります。

<p>タグの領域を表示しています。

親要素の横幅は790pxです。

上の<p>タグは特に横幅を指定していません。親要素の幅は790pxありますが、cssで左右に35pxずつマージンを取っているため、上の<p>は100%=720pxの横幅になります。

ブロック要素に該当するHTMLタグ

<address>、<blockquote>、<center>、<div>、<dl>、<fieldset>、<form>、<h1>-<h6>、<hr>、<noframes>、<noscript>、<ol>、<p>、<pre>、<table>、<ul>

(※<li><dt><td>などの「入れ子としてのみ存在が許されるタグ」は上記から外しています。)

インライン要素

単体での使用は出来ず、必ずブロック要素の中に存在しなければいけないタグであり、横幅は要素の内容に比例します。故にインライン要素は内容が親要素である親のブロック要素の幅を超えない限り、横並びになります。そしてインライン要素は原則としてブロック要素をその子孫要素として持つことができません。インライン要素の横幅(領域)を確認したい時はbackground-colorで背景色(borderでも良いですが、borderの幅も換算されるので背景色のほうがお勧めです)を指定してあげると目視できます。

この背景色の領域は親要素の<div>の領域になります。
<span>タグの領域を表示しています。表示を分かり易くするため前後に改行を入れています。CSSでcenter寄せをしているので左右にマージンを取っている様に見えますが違います。 別の<span>タグの領域を表示しています。インライン要素はこのように横並びになります。
親要素の横幅は790pxです。

上の<span>タグはcssでcenter寄せをしています。分かり難いですが<span>タグを2個配置しており、横並びになっていることが確認できます。

インライン要素に該当するHTMLタグ

<a>、<abbr>、<acronym>、<b>、<basefont>、<bdo>、<big>、<br>、<cite>、<code>、<dfn>、<em>、<font>、<i>、<img>、<input>、<kbd>、<label>、<q>、<s>、<samp>、<select>、<small>、<span>、<strike>、<strong>、<sub>、<sup>、<textarea>、<tt>、<u>、<var>

特殊なインライン要素

この後で説明しますが、インライン要素は「高さ=height」と「横幅=width」が設定できません。設定したい時はCSSでdisplay:block;を設定してあげなければなりません。しかし一部インライン要素では高さと幅を持っている、設定できる要素があります。下記に列挙したものが該当要素です。

<button>、<img>、<input>、<object>、<select>

上記がブロック要素とインライン要素の説明となります。ちなみにHTML5ではブロックレベル要素とインライン要素の分類は無くなります。代わりに、メタデータ、フロー、セクション、ヘッディング、フレージング、エンベッディッド、インタラクティブというコンテンツの種類が定義されています。ただ、ブロック要素=改行、インライン要素=改行なしの概念は引き継いでいます。

よく使うHTMLタグの記述ルール

<div>
入れられるものdivタグの中には、ほぼ何でも入れることが出来ます。divの中にdivなどブロックレベル要素を入れ子にしても問題ありません。
入れられないもの<html> <head> <body> <meta>・・・等の基本的にbodyの外に記述する要素。
<h1>~<h6>
入れられるものhタグの中に入れていいのはインライン要素のみになります。は入れられません。また「h2の後にh1を記述する」といったような数字を遡るようなコーディングは文法的には問題ありませんがSEO的にはNGです。
入れられないものブロックレベル要素 div…etc
<p>
入れられるものa、img、span、strong、em…などなどのインライン要素。
pタグの中に入れていいのはインライン要素のみになります。初心者で間違えやすいのは、pの中にdivや、pを入れ子にしてしまったり、hを入れてしまったりなどなど…。恐らくこの勘違いの原因は、市販されている教本の最初に<p>が出てくることが多いからじゃないかなと思います(笑)
入れられないものブロックレベル要素、pの中には、divやpやhなどのブロックレベル要素を入れることは出来ません。
<ul><ol>
入れられるものul,olタグの中に入れることができるのは「li」タグのみです。それ以外のタグは入れることが出来ません。
入れられないもの「li」タグ以外のタグ全て。
<li>
入れられるものdiv、h1~h6、p、ul、dl、ol、li、span、img、strong、em…。liは「ul」「ol」の中でしか使えないタグです。liタグの中にはどんな要素も入れることが出来ます。例えば、liタグの中に新たにulリストを設置してリストの入れ子を作ったり、pやdivなどのブロックレベル要素を入れたり。NGのように思われるかもしれませんが、NGではありません。
入れられないもの特になし
<dl>
入れられるもの「dt」「dd」の2つのみです。それ以外のタグは入れることが出来ません。
入れられないもの「dt」「dd」以外のもの
<dt>
入れられるもの定義リスト「dl」の定義部分を司る「dt」タグ。dtの中にはインライン要素のみが入れられます。a、img、span、strong、em…など。間違いやすいのは、dtの中に見出し要素のhタグを入れるケースですが、これはブロックレベル要素なので入れられません。
入れられないものブロックレベル要素、address、blockquote、center、div、dl、fieldset、form、h1-h6、hr、ol、p、pre、table、ul
<span>
入れられるものspanタグの中にはインライン要素しか入れてはいけません。a、img、span、strong、em…など。僕の中では<div>のインラインverという位置付けです(笑)。
入れられないものブロックレベル要素、address、blockquote、center、div、dl、fieldset、form、h1-h6、hr、ol、p、pre、table、ul
<strong>/<em>
入れられるものインライン要素しか入れてはいけません。a、img、span、strong、em…など。
入れられないものブロックレベル要素、address、blockquote、center、div、dl、fieldset、form、h1-h6、hr、ol、p、pre、table、ul
<a>
入れられるものa、img、span、strong、em…などのインライン要素。よくある間違いは、aタグでブロックレベル要素を囲んじゃう・・・ですね。ですが、実はHTML5では<a>でブロック要素を囲んでも文法的に問題なしとなっております。
入れられないものブロックレベル要素、と言われていますが文法的に問題なしとなっております。

以上となります。今回の記事に該当するHTMLの文法は4.01基準(XHTMLも)となります。HTML5になって上記のルールが変更されているものも多々ありますので、ご注意下さい。

ニワカソフトでは常に新しいことに挑戦し、より良いものを皆様にご提供できるよう努力しております。ぜひホームページの新規作成・リニューアルはニワカソフトにご相談ください!!