HTML/CSS初心者が最低限覚えるべき必須タグ一覧&プロパティ一覧

2021/12/02

( 更新日：2022/04/19 )

HTMLタグやCSSプロパティを理解するということは、web制作をはじめて学習する方にとって大きな関門の1つです。

タグやプロパティをすべて覚える必要はなく、手を動かしながら出てきたものを少しずつ覚えていくのは、web制作のみならずプログラミングの世界でも同様です。

しかし、何も知らないところからでは基本的なWEBページを表現することもできませんから、どんなページを作るときでも必ず出てくる、そんな必須タグ＆必須プロパティについて分類ごとにまとめました。

初心者が最低限覚えるべきHTMLタグ一覧

web制作をする際に毎回登場するタグを集めました。

また、HTMLで覚えるタグの詳細は下記の記事で解説しています。

HTML学習でまず最初に覚えるべきタグ7選【目的別タグ一覧】

基本的な構造を表すタグのため、どんなページをつくるときも必ず登場するタグです。

ブラウザで表示される文字や画像の配置に直接関わっているわけではないので、何度も使っていくうちに慣れましょう。

<body> </body>の中身は、ブラウザの表示に直接かかわるものになります。

webページはヘッダーやフッター、メインの要素に分かれています。メインの中でもコンテンツが分かれており、それらを効率よく装飾したいときに要素のグループ化などをします。

※<main> </main>内のコンテンツのヘッダーやフッターを表すときにも<header> </header>、<footer> </footer>は使用されます。

※<div>と<span>は単体では意味を持ちません。文章中でも離れたところを一括で装飾したいとき（div・span）や、枠組みを作って配置を決めたいとき（div）に活躍します。

web制作の初心者が学び初めに必ず目にするタグです。これらは直接webブラウザ上に表示されるものなので、既に理解ができている方も多いと思います。

一覧を見ながらタグを打つ人もいるかもしれませんが、慣れてくるとひらがなを書くように打てるようになります。

HTMLのタグと同じように抵抗を感じる人が多いのがCSSプロパティです。CSSが分かるとできることの幅がグンと広がりますので、HTMLと同時に学習をしていくことをお勧めします。

※marginとpaddingはややこしいですが、実際に表示させ記述してみるの繰り返しで身に付けていきましょう。本や参考書の図解も分かりやすくてお勧めです。

初心者がHTMLを習得するためのおすすめの本と選び方、活用法まで解説

動きをつけるのは初心者にとっては少しハードルが高いかもしれません。

訪問済のサイトのリンクが紫に表示されていたり、リンクをクリックしようとカーソルをリンク上に乗せるとすこし表示が変わったり。

こんなこともCSSを活用するとできるのです。リンクをつける際に少し試してみるのもいいかもしれません。

今回はHTMLとCSSそれぞれで初心者が必ず覚えたいタグやプロパティについてご紹介しました。

ただし、今回紹介したものだけでweb制作ができるようになるわけではありません。

何度も手を動かし、コードに触れることで昨日まで分からなかったことや理解が浅かったものを少しずつ習得していくことができます。

諦めずに、少しずつでいいのでできることを増やしていきましょう。