HTML5の一番の特徴って？
HTML5以前のバージョンからコーディングをされてきた方は、あまり上記がピンとこないかもしれません。
なぜならHTMLとは、ウェブ業界の方は一番最初に学習し終えてから、さらなる専門分野(フロントエンドやバックエンド)に邁進していくからです。
専門分野に進んだ後にHTMLに戻ることは稀なのではないかと思っています。
他にも学習すること多いですもんね 🤔
とはいえ、せっかくなので、ここで一度振り返ってみてみましょう📝
長くなりましたが、HTML5の特徴とはズバリ…… **セマンティクス(Semantics)**です 🌟
セマンティックとは
引用 : セマンティックとは何？Weblio辞書
セマンティックとは、一般的には「意味」や「意味論」に関することを指す語である。
HTMLにおけるセマンティクス
HTMLは、**タグ(Tag)**を用いてコーディングをします。
タグは洋服についているタグみたいなもので、
- この商品はこんな名前で〜
- 値段はこんなで〜
- 成分はこんなんで〜
みたいな感じの情報を要素に与えることができます。
私達がレポートや論文や作文を書く時、タイトルをつけたりする感覚と同じで
HTMLではタグを使用して、「この文言はタイトルですよ〜！」
みたいな情報を指定したことはないでしょうか？考え方は一緒です！
HTML5以前では、このタグの種類は少なく、ヘッダーを示すタグもフッターを示すタグもありませんでした。
よって、多くのエンジニアは 得体のしれない要素はとりあえずdivで囲っておけばOK みたいな風潮があったように思います。笑
ですが、HTMLは進化し、たくさんのタグが追加されました。
文書構造をより明確に示すための目印をたくさん用意してくれたんです💡
なので、HTMLにおけるセマンティクスとは、
要素を的確なタグで囲ってきちんと意味づけしよう、
ということです。
要素には必ず役割があります。
その役割を的確に指定してあげることで、
ウェブ文書の理解がぐっと深まることでしょう🥰
HTMLのタグ
さて、ここからが本題です。これから、
- 皆が普段使っている、見かけるタグの説明(基礎編)
- あまり知られてないかも?のタグたち(応用編)
を分けて説明したいと思います！
(長くなりすぎたので応用編は別記事に書きます 笑)
セマンティックなHTMLをコーディングするにはまず、引き出しが必要です 💡
すべてを覚える必要はありません！(多いし！)
でも頭の隅にこういうタグがあったな〜ってしまっておくだけで、
次回はよりセマンティックなHTMLが書けるようになるはずですよ👌🏻
普段よく見かける(使っている)タグ達
h1 ~ h6
- Headline(見出し)の略です。
- 数字が大きくなればなるほど重要度が下がります
- かつてh1は1ページに1つというルールがあったのですが(重要度がよくわからなくなるから)、最近は別section内なら同じページ内でも複数持ってもいいよ、ということになっているらしいです
p
- みんな大好きpタグ
- 文言を見る度条件反射でpタグで囲ってませんか？
- pとは英語でParagraphの略です
- つまり、「文言」っていう意味ではなくて「段落」という意味なんです
- もしかしたらその文言は、pタグよりもふさわしいタグがあるかもしれません 🤔
br
- BReak line という改行用のタグです
- あくまでも使用用途は文中の改行なので
- 文書間の余白空けたいからといってみだりに使用してはいけませんよ
- あと、一回に使える回数は2個までです
- それ以上空けねばならないときは、おとなしくCSSで余白調整してください ＞＜
div
- div大好きな人多いですよね 😋
- では、divがなんなのか知ってますか？
- 元々の単語はDivision、つまり直訳すると「分割」になります
- ドットインストールでは汎用的ブロック要素と訳していました
- ブロック分けするときとかに使える万能タグってやつです
- でもね……もっと他にふさわしいタグあるやろ……って思うこともあります……笑
- div多用されるとソース見づらいねん(本音)
span
- とりあえず文中で色変えたい時に囲っておけばええんやろ、と思っているあなた
- その認識でほぼほぼ正解です ⭕
- 訳はなかった気がしますが、ドットインストールでは汎用的インライン要素と訳していました(ドットインストールLOVE 💕)
a
- わかりやすい役割を持つタグの一つだと思います
- aはアンカーリンク(Anchor link)の略です
- ページ内の遷移、もしくはページ間の遷移をする際に使用します
- ページ遷移はこいつって思っておけばとりあえず大丈夫です
ul > li, ol > li
- リストといえばこれ！的なタグですね
- ulはUnordered List(順不同リスト)、olはOrdered List(順番のあるリスト)の略です。番号付きリストはulじゃなくてol使いましょ〜！
- ちなみにul、olの直下において良いタグはliのみですよ⚠
table > tr > th, td
- 表を示すタグ。英語も明瞭でわかりやすいですよね。
- tr = **Table Row(**行)
- th = Table Header(セルのタイトル)
- td = Table Data(セルのデータ)
- かつてはtrの前にthead, tbodyを挟む必要があったのですが、現在は任意になっています
- 表結合系(rowspan, colspan)の属性は覚えておくと良いですよ〜！(コーポレートサイト、製品サイトのコーディングでは結構必須になっています)
img
- IMaGe(画像)を表すタグです
- スマホ版ではこいつをCSSでインライン以外の要素にして、width:100%入れておけばとりあえず画像でかい事件の類の爆死は逃れられます
- ユーザビリティやSEOを考慮するとalt属性はできる限り埋めておいたほうが良いです
- さらにコアな話しすると、こいつね、疑似要素(CSSの:before, :after)持てないのでお気をつけて
form, input
- お問い合わせフォームとかで使用するタグです
- バックエンド開発経験のあるエンジニアさんは、彼らと仲良しやと思います
- お問い合わせがついているサイトでは必須なので(大体ツイてる)慣れておくと良いですよ
- input typeの種類多すぎ問題
- 大体の人テキストベースのフォームを**type=“text”**とかするんですけど
- こんだけあるんですよ、本当は
- なんで、適切なやつ使いましょ💪🏻💪🏻
- あとね、一つだけ言いたいことがあってね……
- type=“text”ってinputのデフォ値だからわざわざ明示的に書く必要ないんです……
- デフォのデザインがわりとダサい(select然り fileのアップロードボタン然り)からJS必須かも
button
- 押下で何かさせたい時に使うタグ
- JSのフレームワークでは多用するのではないかと思っています
- ただ、type属性のデフォルトがbuttonじゃなくてsubmitなんで
- 使用する際はtype=“button”と書いておいたほうが安全です
- というのも、formタグの中で送信処理以外でbuttonを使用したい時にtype=“button”書いておかないと
- うっかりフォームが送信されちゃうんです ☠☠☠
header, footer
- 名前の通り、ヘッダーとフッターを表すタグです
- サイトのロゴとかグローバルナビゲーションをしまい込んでいる時もあります。
- どのサイト、アプリでもウェブ系であれば彼らはいるはずなので、見たことのあるタグかなと思います。
以上が主要なタグかなと思います。
他にもこれは必須やろがい！っていうのがあれば追記するので突っ込んでください〜！
次回は応用編になります 🥰
ではまた〜👏🏻