HTMLの基本をおさらい

# はじめに
普段から仕事でHTMLを触ることが多いが、
サーバサイドが専門のため
HTMLに関しては基本的に既存ファイルにデータを組み込むような作業が多い。

1からHTMLを書くときに
「`<head>`の中って何書くんだっけ？」
とか
「`<footer>`とか`<article>`とかなんか`<div>`じゃないタグを使ったほうがいいって聞いた気がする」
とか
ふんわりした知識しかないうえに
かなり忘れていたのでざっくり復習する。


# 概要
HTMLは文書の構造を定義するためのもの。

深い知識がなくてもブラウザにただ表示するための
見た目を作ることはできるが、
正しい文書構造を表現するには知識が必要。

正しい文書構造を表現することができると、
SEO的に有利になる、
HTMLの構造、意図が明確になる（保守性向上）
などのメリットがある。


# 各部分の名前
タグとか要素とか属性とか
どれがどの部分のことを言っているのかよく忘れるので確認。


![Untitled Diagram-Page-1 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297693/10a03f02-a8ed-354e-4385-22eb2fbc5cde.png)


# HTMLの大枠の構造
HTML全体の大枠構造はこのようになる。

![Untitled Diagram-Page-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297693/970aa652-6bba-8d94-f7a0-aaaf00c9e917.png)

まず頭にdoctype宣言。
「html5でこの文書を書きます」という宣言。

そしてその下全体ををhtmlで囲む。

html要素の中は、
headとbodyが入る。

headには画面に表示されないmeta情報などを記述し、
bodyには実際に画面に表示されるHTMLを記述する。


# headに書くこと
headの中にはいろいろ書くことがあるが、
書かなくてもHTMLはちゃんとブラウザに表示される。

が、正しく書くことで
SEO的に有利になったり、
ブラウザ依存、デバイス依存でのトラブルを
回避することができたりする。

全部挙げるのは難しいので重要なものをピックアップする。

* 文字エンコード

```html
<meta charset="utf-8" />
```

これを書いておかないと文字化けしたりする。
日本語サイトでは必須。


* IE用の設定

```html
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
```

IEには「互換モード」という機能があるらしく、
それを有効にしているユーザがサイトを表示すると
表示が崩れたりしてしまうらしい。

このタグを設置しておくと常にIE「標準モード」で表示してくれる。

* viewport設定

```html
<meta name="viewport" content="width=device-width,initial-scale=1" />
```

スマホでサイトを表示した際に正しく表示するためのタグ。
このviewportをちゃんと指定しておかないと
スマホで表示したら
すごく縮小されちゃったり逆に拡大されちゃったりする可能性があるらしい。

↓この記事が詳しい
https://app.codegrid.net/entry/whats-viewport

* タイトル
 
```html
<title>ページのタイトル</title>
```

これで指定したタイトルは、
ブラウザのタブに表示されたり
検索エンジンの検索結果として表示されたりする。

* metaディスクリプション

```html
<meta name="description" content="ページの説明" />
```

ページの説明を記述する。

* OGPタグ

```html
<meta property="og:url" content="ページのURL" />
<meta property="og:title" content="ページのタイトル" />
<meta property="og:type" content="ページのタイプ">
<meta property="og:description" content="ページの説明" />
<meta property="og:image" content="画像のURL" />
<meta property="fb:app_id" content="FacebookappID" />
<meta name="twitter:card" content="カードの種類" />
<meta name="twitter:site" content="@Twitterのユーザ名" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:locale" content="ja_JP" />
```

これらは、このページがSNSでシェアされた際に
キレイに表示されたり必要な情報が表示されるように
するためのタグです。

↓この記事が詳しい
https://digitalidentity.co.jp/blog/seo/ogp-share-setting.html#_IDfbapp_id

　
　
　

主要なものとしてはこんな感じです。
SEOが重要なサイトの場合は
ほかのタグも徹底的に設定したりします。


# HTML5の文書構造表現タグ
HTMLを書くとき、
デザインの見た目を再現したある程度きれいなものは普通に書けるが、
HTML5のfooterタグやarticleタグなど
文書構造をより明確に表現するためのタグを
しっかり利用していきたい。

普通のdivやh、pなどのタグの説明は省き、
HTML5の文書構造表現のタグのみ主要なものを確認します。

* header

```html
<header></header>
```
ヘッダーはこの要素内に書く。
　
　

* footer

```html
<footer></footer>
```
フッターはこの要素内に書く。
　
　

* nav

```html
<nav></nav>
```

ヘッダーメニューなど
ナビゲーションとなるものは
この要素内に書く。
　
　

* article

```html
<article></article>
```

記事として独立し、完結している範囲をこのタグで囲む。
・・・難しい。

↓この記事が詳しい
https://mdstage.com/html-css/html-intermediate/section-article
　
　

* section

```html
<section></section>
```

記事の章・節・項などをこのタグを使って構造にする。
　
　
 
 
上で挙げたタグたちは、
全て`<div>`で書くのと動作は同じです。

今までHTMLの文書構造は
とりあえず全部`<div>`で区分けして作っていたのが、
HTML5からはこれらのタグを使って
**区分けを明確に意味づけ** できるようになったわけですね。

　

他にもたくさんタグの種類はあるが、
あまり多くても使いこなせないので
最低限このぐらいをちゃんと使う習慣としたい。


# ブロックレベル要素とインライン要素
HTMLを記述するうえで
「ブロックレベル要素」と「インライン要素」
という概念は重要だと思う。


div、h、p、ul、liなどはブロックレベル要素で、
a、span、img、bなどはインライン要素です。

この2つの違いは、ここがポイント。
### ブロックレベル要素
* 要素の中身の量にかかわらず、要素は横幅いっぱいになる（中身が１文字だけでも、pタグやhタグは横幅いっぱいに表示される）
* ブロックレベル要素を並べて記述すると、横並びに表示されず縦並びになる

### インライン要素
* 要素の中身の分だけの横幅になる（中身が１文字だけのaタグやspanタグは、１文字分の横幅として表示される）
* インライン要素を並べて記述すると、要素は横並びに表示される

　
　

この特徴を把握していないと
うまく要素を並べてキレイにコーディングできなかったりします。


# 参考
https://webst8.com/blog/html-major-basic-tag/
https://saruwakakun.com/html-css/basic/head
https://www.tagindex.com/html5/elements/