HTMLタグについてQA

Q1,article/asideの使い所がよくわからない（せいすけ）

HTML5になってHTMLタグに意味付けが多くなった
→迷うことが多くなったかも

A1,マロリリさんの個人的見解

article：RSSに近い、articleの中で完結する内容、WPのブログ記事もarticleでくくられている
aside：サイドメニューで使う、左右にないといけないわけではなく、その記事に関する関連記事・補足情報など。フッターのナビゲーションの中の関連記事もasideでもいいかも。

これじゃないとダメというルールはないので、自分がタグづけの説明ができればよい。
誰かが使っていた方法と同じ方法で使うと自分のルールがなく、後々しんどくなる。自分の中でルールを確立すること。

Q2,imgタグの囲い方、p/figure/何もなし、かで迷う（シオリ）

A2,マロリリさんの個人的見解

imgはブロック要素で括る
body直下にインライン要素を置くのは推奨されていない
→pやdivで括られてきたが、HTML5になってからはfigure/picture
→ブロック要素の直下に配置するのであれば無理にfigure/pictureで括らなくてもよい

<ul>
 <li>
  <img src="" alt="">
 </li>
</ul>

↑liはブロック要素なので、無理にfigure/pictureで括らなくてもよい

<ul>
 <li>
  <figure>
   <img src="" alt="">
  </figure>
  <h1>コーダー部</h1>
  <p>勉強会</p>
 </li>
</ul>

↑h1,pがブロック要素なのでそれに揃えるためにfigureで括ることもある

figureは関連情報を入れるタグなので、文章を入れてもいい、極論文章の説明であればコラムをfigureで囲ってもいい。

Q3,baseタグを使っているか（おどくみ）

A3,マロリリさんの個人的見解

あんまり見たことない、使ったことない。

Q4,preタグを使っているか（おどくみ）

A4,マロリリさんの個人的見解

基本使わない。HTML3.2くらいの頃はデザインに合わせるためにpreを使うことが多かった。
sorceタグにつけていたりしたが、今はcodeで対応可能。

Q5,hgroupタグを使っているか（おどくみ）

※使用可能だが推奨はされていません
（参考：https://developer.mozilla.org/ja/docs/Web/HTML/Element/hgroup）

A5,マロリリさんの個人的見解

見出しレベルなのでsectionやarticleの中でこれが見出しだとわからせたいときに使う。headerタグの小型版みたいな感じ。
header/footer/mainは一度しか使えないので、article内でheaderで使いたいときとか。
使うパターンが思いつかない、なくてもいいかな、となるからあまり使わない…HTML5.2で採用されたタグなのでまだあまり普及していないということもあるかも。

HTMLの歴史

HTML Living StandardとHTMLの歴史

タグはいっぱいあるが、使うタグは偏っていて使わないタグは淘汰されていく。

HTML2.0

<meta><input><form>
formが使えるようになった

HTML3.2

<sup><map><area>
画像内にリンクが貼れるようになった

HTML4.0

<tbody><iframe>
google  mapなどが入れれるようになった

HTML5.0

<article><aside><section><nav><header><footer><figure>

今まで<div class="header">で書いていたものがheaderタグができた
cssが発展してきて<font><center>などが削除された

HTML5.2

<hgroup>

常に情報収集が必要

歴史を見てわかるように、使わないタグはどんどん淘汰されていくのでこの業界では常に情報収集が必要。

素敵だなと思う制作会社さんの実績ページを見てどういうタグが使われているのか常にチェックしておく
→どのタグが主要で使われているのかがわかる

CodeGrid
有料情報サイト、最新情報がメールでくる
探さなくても情報がくる

HTMLだけで終わるのではなくフロントエンド（Javascript/jQuery）と絡むので、その部分も絡めてコーディングしていかないと長続きしない、仕事がなかなかできない。
→フロントエンドの勉強もしつつ、自分で説明できるコーディングを極めていく

次回（2022/7/8）

webPについて（おどくみさんより）