知ってた？ナルホド！
こんにちは。フロントエンドエンジニアの山田です。
HTMLのリセット用スタイルを自前で作成しようと思い、
私たちが主に使用するHTML要素だけを整理していました。
そこで、HTML要素の数は多くありますが普段使っている要素の数からしてみるとそんなに多くはないなと感じました。
今回は、知ってそうで知らないHTML要素についてまとめてみました。
1. HTML
HTMLとはHyperText Markup Languageの略で、
文字をタグと呼ばれる印で囲んで、人間ではなく機械に対して文書としての要素を意味付ける言語です。
最近ではタグのことを要素と呼ぶ人が増えてきた・・・そんな気がします。
人間は要素の前後の関わりを見栄えや文脈から察することができますが、HTMLを読み取る機械は未だその能力は乏しいのが現実です。
そのためHTMLの要素も細分化されていて数も多く、使いどころがよくわからないものやこんな要素があったんだ！と感じるエンジニア・コーダーも少なくはないでしょう。
はずかしながら、私もその一人です。
2. abbr要素
abbreviationの略で、アブリとかアバーと読むようです。
略語や頭語を表す要素です。title属性には、正式な名称を入力します。
略語表記はよく使用するので、覚えておきたい要素のひとつです。
例えば、HTMLという文字列をタグで囲みます。
HTML
3. base要素
リンクなどの相対URLの基準点を指定する要素です。
head要素の中に記述して、文書内に1つしか使用することができません。
href属性には相対URLの基準となるURLです。絶対パスと相対パスどちらも使用できます。
target属性はa要素で使用するtarget属性の初期値を変更することができます。
4. blockquote要素 / q要素 / cite要素
どちらも引用・転載であることを表す要素です。
改行が必要になったり、文章の場合はblockquote要素を使います。
ワンフレーズだけを引用・抜粋するような場合はq要素を使います。
qはquoteの略です。
どちらもcite属性で出典元となるURLを入力します。
また、cite要素というのもありcite要素に関しては作品のタイトルや報告書の名前を表すときに使用します。
元々は作品名・作者名・出典などを表す要素でしたが、似たような要素も多く今は用途が限定されています。
それぞれの用途と名称が混同してしまいがちな要素たちです。
5. datalist要素
入力フォームを使用していると入力フォームからポップアップが表示され、入力予測のキーワードが表示されたりあらかじめ入力してほしいデータの選択肢のことをデータリストと呼びます。
入力フォームに対して任意のデータリストを作成することが可能な要素です。
datalist要素のid属性と入力フォームのlist属性に同じ値を指定することで、データリストの紐付けを行うことが可能です。
6. まとめ
HTML要素は奥が深いですね。
名称から察して意味が似ていても、HTML上では意味が異なる要素や見栄えと全く関係ないところで、重要な役割を担っている要素もあります。
雑に要素を選定してマークアップを行いウェブページを作成したとしても、人間であれば文脈やデザインから前後の関わりや言葉の意味を理解することができます。
ですが、ウェブページは人間のためだけではなくSEOとして機械に対しても最適な要素を選定してマークアップをしてあげる必要があります。
ではまた次回。
