HTMLではたくさんの「タグ」が存在します。
もちろん最初から全部を覚えるのは不可能に近いので、
今回はHTMLでよく使う「タグ」を紹介します。

link

linkは、CSSというものを読み込むために使うタグです。
毎回使用することになると思います。ちなみにこのタグはheadに書きます。

 <link rel="stylesheet" href="css/style.css"> 

ブロック要素を示す「div」

divタグは、一つのブロック要素だと示すタグです。
ブロック要素で囲むと自動的に改行されます。

See the Pen xzOgVj by kiharaneko (@kiharaneko) on CodePen.

インライン要素を示す「span」

spanタグは、一つのインライン要素だと示すタグです。
インライン要素は改行はされません。

See the Pen PazWGY by kiharaneko (@kiharaneko) on CodePen.

ブロック要素やインライン要素について詳しくはこちら
ブロックレベル要素とインライン要素 | HTMLクイックリファレンス

段落を示す「p」

pタグは、一つの段落だと示すタグです。
基本的に文章を囲うのに使います。これはブロック要素です。

See the Pen qKNRay by kiharaneko (@kiharaneko) on CodePen.

リンクを付与する「a」

aタグは、ハイパーリンクだと示すタグです。
href属性に別ページや外部リンクのURLを指定することができます。
クリックすると別のページに飛ぶあれです。

See the Pen XYKpNV by kiharaneko (@kiharaneko) on CodePen.

見出しを示す「h1～h6」

h1〜h6タグは、見出しだと示すタグです。
h1タグは1つのページに1つまでしか書けません。
数字が小さい方が重要度が高くなります。重要度の高い方から順番に記述します。
正直後半のh5とかh6なんて使うときはほぼないです。

See the Pen aKZpWK by kiharaneko (@kiharaneko) on CodePen.

画像を表示する「img」

img要素は画像を表示するときに使用します。
srcの属性値(“”内)に画像の絶対パスか相対パスを入れます。
imgタグには終了タグは存在しません。

 <img src="画像ファイルへのパス"> 

絶対パスはURLのことです。まあネット上の住所みたいなものです。
相対パスは今いる場所を基準にして、目的地がどこにあるのかを伝えます。
詳しくはこちら
これだけは覚えたい！絶対パスと相対パスの違いとは | TechAcademyマガジン

他にもタグはいっぱいありますが、いきなり全部覚えようとしなくていいです。
中にはほぼ使わないタグとかもあるので、やりながら覚えていきましょう。
タグの一覧はここで紹介されています。
HTMLタグリファレンス（目的別）

リストを示す「ul・ol・dl」

「ul・ol・dl」はリストを定義するタグです。
横に表示される丸や数字は、CSSを使えば消したり別の物に変更したりできます。

See the Pen mKELYM by kiharaneko (@kiharaneko) on CodePen.

ul

順序が置き換わっても意味が伝わる様内容に使います。
「ul」の中に「li」を入れてリストにしたいものを囲みます。

「ul」の中には「li」以外を入れるのはだめですが、
「li」の中は基本何でもokです。
この3つの中では最も使用頻度が多くなると思います。

ol

順序が必要な内容に使います。
それ以外は「ul」と同様です。

dl

タイトルと説明文が必要なときに使います。
「dl」で全体を囲み、「dt」にタイトル、「dd」に説明文を書きます。

「ul」同様「dl」の中には「dt」と「dd」しか入れてはいけませんが、
「dt」「dd」の中は何を入れてもいいです。
(多分テキストしか入れないでしょうが)
商品の説明リストや会社概要などでよく使用されます。

表を作成する「table」

WEBサイト上でExcelのような表を作成したいときに使用します。
書き方は先ほど説明した「dl」に近いです。

See the Pen RJRJqY by kiharaneko (@kiharaneko) on CodePen.

「table」で全体を囲み、
「tr」で行のまとまりを指定します。
「th」はtableの見出しになる部分なので、1番上で使用することが多いです。
「td」で書きたい内容を書いていきます。

ただ正直なところ、こいつは慣れてきても結構ややこしいので、
Wordpressを使っている場合はプラグインを使って作成してますね。

昔は、tableタグを多用するtableレイアウトをほとんどのサイトが
使用していましたが、最近はだいぶ少なくなりました。

改行する「br」

brは、文章の途中で改行したい時に使うとそこで改行させることができます。
「img」のように何かを囲まずにbr単体で効果を発揮します。

See the Pen NzRReY by kiharaneko (@kiharaneko) on CodePen.