HTML composition

This article is about several tags wrapped up, after reading the book, for instance, usage and position on a web site.
[1冊ですべて身につくHTML & CSSとWebデザイン入門講座［第2版］ （DL特典：Webデザイナーのポートフォリオの作り方入門講座） (１冊ですべて身につく)](https://amzn.asia/d/h3maQZl)

# Layout
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3558621/d3d9c1ce-4b4d-7422-5138-aa3856639d3f.png)
image reference: https://chot.design/html-css-beginner/5cac8c19c5ec/

# `<header>` Tag
This tag creates header, including a logo image, a page title and a navigation menu in most situations.

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="poMNWXE" data-pen-title="&amp;lt;header&amp;gt; Tag" data-user="naopon-hamumu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/naopon-hamumu/pen/poMNWXE">
  &lt;header&gt; Tag</a> by Nao (<a href="https://codepen.io/naopon-hamumu">@naopon-hamumu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### `<nav>` Tag
This is used for a navigation menu, often located at 
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="OJKbOBR" data-pen-title="&amp;lt;nav&amp;gt; Tag" data-user="naopon-hamumu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/naopon-hamumu/pen/OJKbOBR">
  &lt;nav&gt; Tag</a> by Nao (<a href="https://codepen.io/naopon-hamumu">@naopon-hamumu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# `<main>` Tag
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="XWvpXBL" data-pen-title="Untitled" data-user="naopon-hamumu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/naopon-hamumu/pen/XWvpXBL">
  Untitled</a> by Nao (<a href="https://codepen.io/naopon-hamumu">@naopon-hamumu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### `<article>` Tag
We can make higlighted articles of what we would like to by this tag.
example: [CBC NEWS](https://www.cbsnews.com/)
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="GRVNOLZ" data-pen-title="&amp;lt;article&amp;gt; Tag" data-user="naopon-hamumu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/naopon-hamumu/pen/GRVNOLZ">
  &lt;article&gt; Tag</a> by Nao (<a href="https://codepen.io/naopon-hamumu">@naopon-hamumu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### `<section>` Tag
we can see the section tag, having one theme consisted of multiple things, for example, "DISCOGRAPHY" on [timelesz](https://ovtp.jp/).
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="OJKbzYE" data-pen-title="Untitled" data-user="naopon-hamumu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/naopon-hamumu/pen/OJKbzYE">
  Untitled</a> by Nao (<a href="https://codepen.io/naopon-hamumu">@naopon-hamumu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## `<aside>` Tag
This tag is suitable putting contents aside, not related to what mainly convey.
We can see [the web "はてなブログ"](https://hatena.blog/) site, using this tag.
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="ExqZPMa" data-pen-title="&amp;lt;aside&amp;gt; Tag" data-user="naopon-hamumu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/naopon-hamumu/pen/ExqZPMa">
  &lt;aside&gt; Tag</a> by Nao (<a href="https://codepen.io/naopon-hamumu">@naopon-hamumu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# `<footer>` Tag
Any page we can see this tag at the bottom, written about copyright and so on.
example: [中島健人|STARTO ENTERTAINMENT](https://starto.jp/s/p/artist/156)
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="vYogGYJ" data-pen-title="&amp;lt;footer&amp;gt; Tag" data-user="naopon-hamumu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/naopon-hamumu/pen/vYogGYJ">
  &lt;footer&gt; Tag</a> by Nao (<a href="https://codepen.io/naopon-hamumu">@naopon-hamumu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# `<div>` Tag
This tag has not decided roles like other tags I showed you. In [the site "ILLIT JAPAN OFFICIAL SITE"](https://illit-official.jp/), the tag is used to give id on `<div>` to make hamburger menu.
```html
<div>
</div>
```

# References
- [1冊ですべて身につくHTML & CSSとWebデザイン入門講座［第2版］ （DL特典：Webデザイナーのポートフォリオの作り方入門講座） (１冊ですべて身につく)](https://amzn.asia/d/h3maQZl)
- [CBC NEWS](https://www.cbsnews.com/)
- [timelesz](https://ovtp.jp/)
- [はてなブログ](https://hatena.blog/)
- [中島健人|STARTO ENTERTAINMENT](https://starto.jp/s/p/artist/156)
- [ILLIT JAPAN OFFICIAL SITE](https://illit-official.jp/)
- image: https://chot.design/html-css-beginner/5cac8c19c5ec/