【第１回定例勉強会】HTMLタグ洗い出し_20220701
・よく使うタグの意味と使用ルールの再確認
・めったに使わないタグの使用パターンの考察
HTMLタグについてQA
Q1,article/asideの使い所がよくわからない（せいすけ）
HTML5になってHTMLタグに意味付けが多くなった
→迷うことが多くなったかも
article：その部分だけを抜き出しても物語が成り立つもの
aside：サイドバーに使いがち
articleかsectionで迷うことが多く、ちょうど先日マロリリさんに質問した。
article：それだけを取り出して記事にして成り立つもの（新聞の記事・ページとして）
A1,マロリリさんの個人的見解
article：RSSに近い、articleの中で完結する内容、WPのブログ記事もarticleでくくられている
aside：サイドメニューで使う、左右にないといけないわけではなく、その記事に関する関連記事・補足情報など。フッターのナビゲーションの中の関連記事もasideでもいいかも。
これじゃないとダメというルールはないので、自分がタグづけの説明ができればよい。
誰かが使っていた方法と同じ方法で使うと自分のルールがなく、後々しんどくなる。自分の中でルールを確立すること。
RSS（Rich Site Summary）とは…
ウェブサイトの要約や記事の見出しなどを配信するためのXMLベースのデータフォーマット
https://web-camp.io/magazine/archives/84398
昔はブログ系の記事を他のサイトに飛ばすときにRSS方式という方式の情報を読み込んで表示させる仕組みがあった。
Q2,imgタグの囲い方、p/figure/何もなし、かで迷う（シオリ）
pで囲っていたが、色々見返したらHTML4までは囲う必要があったが、HTML5からは囲う必要はないという記事を見つけた
画像の比率を崩さないためにdivで囲って装飾をしていた
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で括ることもある
imgを括るもの
かなり前：p
HTML4あたり：div
HTML5から：figure/picture
figureは関連情報を入れるタグなので、文章を入れてもいい、極論文章の説明であればコラムをfigureで囲ってもいい。
Q3,baseタグを使っているか（おどくみ）
baseタグとは…
html内に記述された相対パスのベースを変更するために使用します。通常相対パス「../index.html」などは、表示しているページのURLが基準となりますが、<base>を指定すると相対パスの基準を変更することが出来ます。
A3,マロリリさんの個人的見解
あんまり見たことない、使ったことない。
Q4,preタグを使っているか（おどくみ）
preタグとは…
整形済みであることを表すことができる要素です。整形済みであることを表すということは、つまりpreタグで囲まれた範囲内に不必要な空欄であったり、タブであったりが存在しないということを表します。
A4,マロリリさんの個人的見解
基本使わない。HTML3.2くらいの頃はデザインに合わせるためにpreを使うことが多かった。
sorceタグにつけていたりしたが、今はcodeで対応可能。
codeタグとは…
プログラムコードやHTMLやCSS、JavaScriptなどのコードを示すタグです。<code>タグで囲んだテキストは、プログラムのソースコードであることを意味します。
preタグとcodeタグ
preタグとcodeタグは似ている、一緒に使われることもある。
preタグとは？基本的な使い方からcodeタグとの違いまで徹底解説
【HTML】preタグってどう使うの？概要・使用例を分かりやすく解説！
Q5,hgroupタグを使っているか（おどくみ）
hgroupとは…
h1やh2など、見出しを表すタグを一つにまとめるタグで、見出しタグをhgroupタグで囲うようにして使用します。これにより、主題に加え副題を作成できます。
※使用可能だが推奨はされていません
（参考：https://developer.mozilla.org/ja/docs/Web/HTML/Element/hgroup）
A5,マロリリさんの個人的見解
見出しレベルなのでsectionやarticleの中でこれが見出しだとわからせたいときに使う。headerタグの小型版みたいな感じ。
header/footer/mainは一度しか使えないので、article内でheaderで使いたいときとか。
使うパターンが思いつかない、なくてもいいかな、となるからあまり使わない…HTML5.2で採用されたタグなのでまだあまり普及していないということもあるかも。
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について（おどくみさんより）
WebP（ウェッピー）は、Googleが開発したWebサイト向けの次世代画像フォーマットです。
圧縮しても画質が落ちづらく、SEO対策で重要なページスピードの改善に向いています。
この記事が気に入ったらサポートをしてみませんか？