📍

【HTML】今更だけど、よく使いそうなタグについてまとめた①

に公開
HTML
初心者
tech

はじめに

この記事は学習ノートです。
HTMLのタグについて今更だけどまとめました。
基礎中の基礎なので、初学者以外は読まなくていいです！😂
(あっでも読んで間違いとか追記した方がいいことがあれば教えてください🙇‍♂️)

そもそも

HTML基礎の説明

基本のタグまとめ

サンプル
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>My Website</title>
    <link rel="stylesheet" href="src/styles.css">
  </head>
  <body>
    <h1>Akari Miyauchi</h1>
    <img src="images/my-icon.png" alt="あかりのアイコンです">
    <p>ようこそ！</p>
  </body>
</html>

！DOCTYPE html

  • 「この文章はHTMLですよ〜」という宣言
  • HTML文書の場合、必ず必要

htmlタグ

  • HTML文書の起点となるタグ
  • HTMLタグで囲まれた文章は、ルート要素と呼ばれる

headタグ

  • Webページの閲覧者に向けて表示するコンテンツではない、メタデータを記述する
  • メタデータとは…検索エンジン向けの情報や、文字コードの宣言など

bodyタグ

  • Webページに表示したいすべてのコンテンツを含むタグ
  • headタグ内に書いた情報はブラウザに表示されないが、bodyタグに書いた情報の多くはブラウザに表示される

titleタグ

  • Webページのタイトルを指定する
  • このタイトルはページを開いたときにブラウザのタブに表示され、ブックマークしたときの説明にも使用される

linkタグ

  • そのページと外部のファイルやページを関連づける
  • 終了タグは書かない
使用例
<link rel="stylesheet" href="src/styles.css">

👇 参考になる記事
https://saruwakakun.com/html-css/basic/link-rel

h1〜h6タグ

  • 見出し
  • h1~h6まである。h7はない
  • 使用するのは大体、h1~h3やh4まで

pタグ

  • 段落
  • paragraph(パラグラフ/段落)のp
  • 通常の文章を書くときによく使用する

imgタグ

  • 画像を表示するために使用する
  • 終了タグは書かない
構文
<img src="画像のURL" alt="画像の説明">
使用例
<img src="images/my-icon.png" alt="あかりのアイコン画像です">

※src…source
※alt…alternative(代替)

aタグ

  • リンクを作成する
  • アンカータグ、リンクタグとも呼ばれるらしい
使用例
<a href = "index.html">戻る</a>

※hrefは「エイチレフ」と読む

divタグ

  • 意味を持たないタグ
  • division(ディヴィジョン/分割)なのでdiv
  • CSSでデザインやレイアウトを調整するために、要素をまとめるときに使用する
  • ブロック要素(前後に改行が入る)
  • navタグなど、他のタグが使用できる場合は、divタグを使用しない方が良い

spanタグ

  • divタグと同じように、意味を持たないタグ
  • divタグと違って、インライン要素(前後に改行が入らない)
  • 文章の中で使用するイメージ

👇 divとspanの違いは、こちらの記事が参考になりました！
https://code-kitchen.dev/html/div/#span-div

おわりに

基礎中の基礎すぎてすみません！
自分用のまとめなのでー😭
次回はulタグやbuttonタグなどについてまとめます！💪

参考

https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/HTML_basics

Discussion