ブロック要素とインライン要素
現場では「インライン要素」の中に「ブロック要素」が入ってるからおかしいで！ とかそういうやり取りがあったものです。
例えば下記のコード
<strong><p>テキストテキストテキストテキスト</p></strong>
strong タグは強調する p タグは段落です。
どういう事かというと、太文字中に段落が入ってたら文法的に変ですよね。 正解は下記のようになります。
<p>テキストテキストテキスト<strong>テキスト</strong></p>
段落の中で一部を太文字にしています。 要は HTML には記述のルールがあります。
なんとなく私もやってまいりました。。。
どんまいどんまーい。よう頑張ってはりましたやーん
最近手が出そうになることがありますよ。。。
HTML5 ではブロック要素とインライン要素がなくなった！
この講座を書くにあたり、やはり適当なことは書けません。最新のトレンドを調べてみました。
なんと私自身、知りませんでした！HTML5 からはカテゴリーとコンテンツモデルに変わったようです！
しかし難しく考える必要はありません。
HTML5 では要素が下記のカテゴリに分けられています。
参考サイト https://www.w3.org/TR/2011/WD-html5-20110525/content-models.html
時の流れって容赦ないわー。。。最近肩上がりにくいねん。。。
逃避してますね。。。
メタデータ・コンテンツ
HTML には head 要素というページの基本的な情報を記載しているところがあります。
下記のタグはそこで使います。また解説します。
base command link meta noscript script style title
フロー・コンテンツ
本文（body 要素内）で使用するほとんどの要素がこのカテゴリーに属しています。
a
abbr
address
area (map要素の子孫である場合)
article
aside
audio
b
bdi
bdo
blockquote
br
button
canvas
cite
code
command
datalist
del
details
dfn
div
dl
emembed
fieldset
figure
footer
form
h1
h2
h3
h4
h5
h6
header
hgroup
hr
i
iframe
img
input
ins
kbd
keygen
label
map
mark
math
menu
meter
nav
noscript
object
ol
output
p
pre
progress
q
ruby
s
samp
script
section
select
small
span
strong
style (scoped属性が存在する場合)
sub
sup
svg
table
textarea
time
u
ul
var
video
wbr
text
セクショニング・コンテンツ
セクションの範囲を定義するのがこれです。
よくわからないですよね？また解説します。
article aside nav section
ヘッディング・コンテンツ
名前の通り見出しです。
h1 h2 h3 h4 h5 h6 hgroup
フレージング・コンテンツ
段落の中で使用できるタグです。従来のインライン要素にあたるそうです。
a
abbr
area (map要素の子孫である場合)
audio
b
bdi
bdo
br
button
canvas
cite
code
command
datalist
del (フレージングコンテンツのみが含まれている場合)
dfn
em
embed
i
iframe
img
input
ins (フレージングコンテンツのみが含まれている場合)
kbd
keygen
label
map (フレージングコンテンツのみが含まれている場合)
mark
math
meter
noscript
object
output
progress
q
ruby
s
samp
script
select
small
span
strong
sub
sup
svg
textarea
time
u
var
video
wbr
Text
エンベッド・コンテンツ
埋め込みできるものです。
audio
canvas
embed
iframe
img
math
object
svg
video
インタラクティブ・コンテンツ
ユーザーが操作可能な要素です。
a
audio (href属性がある場合)
button
details
embed
iframe
img (usemap属性がある場合)
input (hiddenは除く（隠すタイプのやつ）)
keygen
label
menu (type属性がツールバー状態の場合)
object (usemap属性がある場合
select
text
area
video (controls属性がある場合)
なんだかいっぱいあって、インタラクティブやらフローやら意味が分からない！
となると思いますが、なんてことありません。普段使うタグもこんなにないですし。
結局「このタグにはあのタグを入れてはダメ」とかのルールを、カテゴリー分けして解り易くしてるわけです。
例えば p タグですと下記のサイトをご覧ください。
https://www.w3.org/TR/2011/WD-html5-20110525/grouping-content.html#the-p-element
| カテゴリー | コンテンツモデル |
|---|---|
| フロー・コンテンツ | フレージング・コンテンツ |
となっています。
※formatBlock はまた別もの。
pタグにはフレージング・コンテンツに属しているタグを入れることということです。
。。。ちょちょちょちょい！急になんの表やねん！笑。。。
pはフローコンテンツに所属しており、pの中にはフレージングコンテンツを入れることができるという意味の表ですー。
ということで、HTMLを作る際には文書として意識して作るとよいです。
あー肩痛い、痛いわー。。。キーボード打てまへんわー
もう嫌ですか？嫌ですよね！？
参考サイトが英語でやだ！
参考サイトは w3c というサイトでなんと HTML を作っているところです。
すなわちここのサイトの情報は間違いないのです。
英語が苦手な方は「Google Chrome」などで右クリックして日本語に翻訳してください！
私ね、すごいんですけどね、右クリック得意なんですー！
すごいですよ！その調子で頑張りましょう！
