1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【基礎】HTMLタグ備忘録

Last updated at Posted at 2022-10-02

初めに

9月中旬から仕事をしながらHTML/CSSの勉強を始めて2週間ほど経ったので自分が勉強している中で頻出しているタグをまとめてみました。

間違ってる所等あればどんどん教えてください。

また、マークダウンで文章を書くのが初めてなので読みづらい点もご了承ください。

HTMLの雛型として必須なタグ

htmlタグ
これがなきゃHTML文が始まらない必須タグ、文書がHTMLなんだと分からせるタグ
headタグ
ブラウザで表示されないhtml文書の決まり事とかを書くエリアを囲むタグ
bodyタグ
ブラウザで表示される文書を書くエリアを囲むタグ
metaタグ
headタグ内で色々な文書のルールを書くために使われるタグ、終了タグがいらない

bodyタグ内で使われるタグ

h1~6タグ
この文書は見出しだよというタグ、1じゃない数字から始めるのは原則ダメ、数字は順番通り
pタグ
このタグで囲むと文書が一つ下の段落で表示される、段落が違う文書だよというタグ
divタグ
主にCSSの装飾の為にクラスが振られるタグ、タグ自体に意味はないがブロック要素のため、囲んだ文書はそれぞれ段落になる、flexboxでめっちゃ使う
spanタグ
divタグと同じようにこのタグ自体に特に意味はないがこれもCSSでの装飾でよく使われるタグ、divタグとの違いはインライン要素の為、改行しないので文中の一部の文字色を変えたりするのに使う
aタグ
タグで囲んだ文書にリンクを貼るのに使うタグ、href属性でリンク先を指定できる
imgタグ
画像を貼るのに使うタグ、終了タグがない、hrefではなくsrc属性で貼りたい画像の場所をリンクする
ul,liタグ
ulタグで囲んだliタグがリストになるタグ、単純に箇条書きのリストとかによく使う、olタグという順序立てたリストを作るタグもあるが、個人的にはあまり見ない
dl,dt,ddタグ
用語と用語の説明で使うタグ、dtで囲んだ所が用語説明今からやりまーすみたいな宣言、dlタグが用語、ddタグがdlに書いた用語の説明文になる

bodyタグ内のHTMLを読みやすく使うのに使うタグ

headerタグ
ページのヘッダー部分だよと分かってもらうタグ
mainタグ
ページのメイン部分だよと分かってもらうタグ
footerタグ
ページのフッター部分だよと分かってもらうタグ
asideタグ
広告とかメニューとか直接コンテンツに関係のないものをここで書いてると分かってもらうタグ
sectionタグ
文章のセクションを表すタグ、結構使いやすくて個人的にはmainタグの中でバンバン使う

終わりに

個人的に学習の中でよく使っていて忘れないための備忘録の面が強いので、あまり参考にはならないかもしれないですが、HTMLの基礎勉強の中だと使われてるタグはほとんどの学習プラットフォームでこれくらいかなと思います。

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?