文書構造のタグ
headerタグは、導入的なコンテンツで使います。
footerタグは、締めくくりのコンテンツで使います。
navタグは、メニューのリンクで使います。
asideタグは、サイドバーで使います。
articleタグは、ブログ一覧等の記事それぞれを区切るのに使います。
mainタグは、主要なコンテンツに使います。
ページ内で一度しか使えないので注意しましょう!
sectionタグは、上記に当てはまらない場合に使う汎用的なタグです。
今回のタグは構造を分かりやすくするためのもので、見た目は特に変わりません。
![](https://tumaboki.com/wp-content/uploads/2020/10/53c0d00b4bbd6d3e9fa14269934d6260-1024x586.png)
![](https://tumaboki.com/wp-content/uploads/2020/10/5b22b5021310b09a5fe6db76755d3590-1024x588.png)
![](https://tumaboki.com/wp-content/uploads/2020/10/dc98df808dce1e9b393e6172576b242d-1024x585.png)
![](https://tumaboki.com/wp-content/uploads/2020/10/266c585b5112adc1c5325d35bdcee3b5.png)
![](https://tumaboki.com/wp-content/uploads/2020/10/8e089715c9d70578af86d6ceb08d0b41.png)
記事一覧をつくろう
articleタグで、記事一覧を作ります。
日時については、timeタグで囲うとGoodです。
![](https://tumaboki.com/wp-content/uploads/2020/10/7c186bf2074ca0d5aef56c58f8ef681f.png)
![](https://tumaboki.com/wp-content/uploads/2020/11/b29d8d1c15ec6ec046ee1e23ed55ab79.png)
スタイリングタグについて
スタイリングタグには2種類あります。
divタグは、ブロックの端から端までのスタイリングに使います。
spanタグは、1文字単位でスタイリングする際に使います。
![](https://tumaboki.com/wp-content/uploads/2020/10/7f87ecf4232275772999ab6c2d518295.png)
![](https://tumaboki.com/wp-content/uploads/2020/10/fdb766d964b562dfe7a77a01850b60df.png)
HTMLの仕様確認
HTMLの仕様確認については、MDNというサイトを使うのがオススメです。
![](https://tumaboki.com/wp-content/uploads/2020/10/6f5915109fe8978b6ddb76e8f6458b5d-1024x640.png)
まとめ
![](https://tumaboki.com/wp-content/uploads/2020/10/vlad-bagacian-d1eaoAabeXs-unsplash-1024x683.jpg)
正確なマークアップを心がけるようにしましょう。
今はわからなくても、ある程度HTMLを理解すると文書構造タグでキッチリマークアップしているとコード全体が分かりやすくなります。
一緒に一歩踏み出しましょう♪
コメント