今回はHTMLの構造を理解しましょう！
HTMLのおおざっぱイメージ
<タグ 属性="値">テキスト</タグ>
<タグ>HTML</タグ>
<タグ 属性1="値1" 属性2="値2"><タグ 属性1="値1" 属性2="値2"></タグ>
『タグ』のところにはそれぞれ要素名が入ります。
開始タグから、そのタグの終了タグ(見た目上の例外あり)までが1つの『要素』です。
例外は空要素です。『img』のような空要素には閉じタグがありません。
XHTMLでは<img src="***" />のようにしなければならないルール(XML由来)がありましたが、HTML5はXMLではないので不要です。
1行目
<タグ 属性="値">テキスト</タグ>
これが1つ目の要素です。
例
<h1 id="top">Amebaブログ</h1>
2行目
<タグ>HTML</タグ>
例
<nav><ul><li>項目1</li><li>項目2</li></ul></nav>
これ全体がnav要素で、直下にul要素、その中にli要素2つを内包しています。
属性は必要なければ何もつけなくていいです。
3行目
<タグ 属性1="値1" 属性2="値2"><タグ 属性1="値1" 属性2="値2"></タグ>
例
<form name="form" method="get" action="?"><input type="text" name="txt" value=""></form>
input要素は空要素なので閉じタグはありません。
内包することを『ネストする』とも言います。よく使われる表現なので覚えておくといいでしょう。
IT業界はコンセンサスだのアジェンダだのリスケだの意味不明なカタカナ語が飛び交う業界なので、使えなくても意味くらいはわかっていて損はありません
ネストといえば従来はインライン要素はブロック要素の中のテキストの一部という位置づけだったので
<div><img src="aaa.jpg" alt="画像：aaa" width="350" height="100"></div>
このように意味をもたないdivで囲んだりしていましたが、HTML5ではこのdivは『無意味なタグ』なので『書かないのが正解』のようです。
昔からHTMLを扱っている人は違和感があるかもしれません。
ブロック要素とインライン要素の実際
HTML5ではなくなりましたが、従来のHTMLでは要素を『ブロック要素』と『インライン要素』とに分ける考え方がありました。HTML5ではブロックをまるごとリンクにすることができます。『意味』を重視するためです。
<a href="aaa.html"><div>aaaの見出し・画像など</div></a>
元ブロック要素を元インライン要素でネストしています。これはHTML5では正しい表現です。こうすることで内側のdiv要素の領域すべてがリンクになり、テキストだけのリンクよりクリックしやすくなります。
HTML5でも『h1』はブロックで『a』はインラインに見えるやん
見えるだけです。HTML5では分類をしなくなっただけで、CSSのdisplayプロパティの初期値としてブロック要素やインライン要素の外観を受け継いでいます。
ここで1つ気づくことがあります。
単なる『初期値』なんです。
『h1』をインライン要素のように使うのはおかしいか。
答えは、そんなのは自由です。おかしくありません。
h1のdisplayを『none』にするのはおかしいですが、インラインでもブロックでも見出しとして読める状態なら問題ないのです。
『意味』が大事なのです。セクションごとのh1で、初期状態で非表示にしたい場合に『display: none;』にできないと困ることがあります。
それはJavaScriptでタブなどを切り替えて表示する場合だと思います。
いまどきJavaScriptを無効に設定している人は少ないと思いますが、0ではないと思います。
無効にできる設定項目がブラウザに用意されているのだからそんなわけでCSSで非表示にするのはよくないです。
ページ読み込みのときに非表示にしてしまいましょう。
まとめ
HTMLは意味付け
CSSは飾り付け
JavaScriptは振り付け
ごろがよろしいようで。
それではまた！