はじめに
今回、サイト模写を行ってみて、HTMLで疑問に思った点をまとめていきます。
フロントエンドを目指して1年ほど前から少しづつ学習をしてきましたが、ようやく学習が習慣化してきたので、学習の記録をQiitaで残していきます。
「これは違うよ」、「これを参考にしてみたら」というアドバイス等ありましたら、教えていただけますと幸いです。
今回疑問に感じた点は、2つ。
- sectionタグとdivタグの使い分け
- フォーム要素について
上記の2点についてMDNを引用しながら書きます。
sectionタグとdivタグの使い分け
これまで学習する中で、divタグばかりを使っていましたが、今回sectionタグの使い方を学びました。
<section>は HTML の要素で、文書の自立した一般的なセクション（区間）を表します。そのセクションを表現するより意味的に具体的な要素がない場合に使用します。少数の例外を除いて、セクションには見出しを置いてください。
今までsectionタグで本来区切るべきところをdivタグを使っていたことがわかりました。
一方で、divタグはどのような場合に使うかというと、
時にはいくつかのアイテムをまとめたり、コンテンツをラップしたりするための理想的な意味的要素が見つからない場合があります。いくつかの CSS や JavaScript を持つ単一のエンティティとしてそれらすべてに影響を与えるために単に要素のセットを一緒にグループ化したいことがあります。このような場合に、 HTML は
<div>と<span>要素を提供します。これらを適切な class 属性と一緒に使用して、簡単にターゲティングできるようにそれらに何らかの種類のラベルを提供することをお勧めします。
また、
<div>はブロックレベルの非意味的要素であり、使用するセマンティックブロック要素を考えない場合、または特定の意味を追加したくない場合にのみ使用してください。
これまでdivタグは頻繁に使っていたが、意味的な価値を持たないタグであるとわかったので、今後は意味的にもっと良い選択肢がない場合に使い所を限るようにしていきたい。
フォーム要素について
今回はフォーム要素(<form>)の中にラベル要素（<label>）とフォーム入力要素（<input>）、テキストエリア要素（<textarea>）、ボタン要素（<button>）を用いてフォームを作成しました。
その中でも今回ははじめて使った<form>と調べて知らないことが多かった<label>、<input>について記述します。
<form>について
<form>は HTML の要素で、ウェブサーバーに情報を送信するための対話型コントロールを含む文書の区間を表します。
CSS の:validおよび:invalid擬似クラスを使用すると、<form>要素をフォーム内の要素が有効であるかどうかに応じてスタイル付けすることができます。
今回、こちらのフォーム要素については存在を知ったのみなので、今後の学習の中で、フォーム送信の属性などへの理解を深めていきたい。
<label>について
<label>は HTML の要素で、ユーザーインターフェイスの項目のキャプションを表します。
今回、<label>要素と<input>要素を明示的に関連づけるには、<label>要素には、for属性を、<input>要素にはid属性を同じ値で追加すれば良いことがわかった。
また、<label>はCSSのスタイル付けにおいて特殊な考慮事項はないことも知った。
<input>について
<input>は HTML の要素で、ユーザーからデータを受け取るための、ウェブベースのフォーム用の操作可能なコントロールを作成するために使用します。端末とユーザーエージェントによりますが、広範に渡る種類のデータ入力やコントロールウィジェットが利用できます。<input>要素は入力型と属性の組み合わせの数が非常に多いため、HTML の中で最も強力かつ最も複雑な要素の一つです。<input>は HTML の要素で、ユーザーからデータを受け取るための、ウェブベースのフォーム用の操作可能なコントロールを作成するために使用します。端末とユーザーエージェントによりますが、広範に渡る種類のデータ入力やコントロールウィジェットが利用できます。<input>要素は入力型と属性の組み合わせの数が非常に多いため、HTML の中で最も強力かつ最も複雑な要素の一つです。
ここでtype属性にどれだけの型があるか調べてみると、予想以上に多くの型があった。
- button
- checkbox
- color
- date
- datetime-local
- file
- hidden
- image
- month
- number
- password
- radio
- range
- reset
- search
- submit
- tel
- text(既定値)
- time
- url
- week
またtype属性以外には次のようなものがある。
- accept
- alt
- autocomplete
- capture
- checked
- dirname
- disabled
- form
- formaction
- formenctype
- formmethod
- height
- list
- max
- maxlength
- min
- minlength
- multiple
- name
- pattern
- placeholder
- popovertarget
- popovertargetaction
- readonly
- required
- size
- src
- step
- type
- value
- width
書き出すだけでも大変だが、理解して使いこなすのはさらに大変だと感じる。
これについては、使う場面が来たときに改めて参照してみたいと思う。
おわりに
復習のつもりで取り組んだ内容でも、わからないことはたくさんあったので、改めて基礎から調べることは大切だと感じた。また、自分の中での当たり前も、いざ調べ直してみるともっとこうした方がいいとわかる情報が多くあったので、日々知識をアップデートしていきたい。
今回参照したMDNのページ