HTMLタグとは?

HTMLタグは、
「この部分は何なのか?」をブラウザに伝える目印です。

文章なのか、見出しなのか、リンクなのか。
それを判断するためにタグが使われます。


目次

HTMLタグの基本形

HTMLタグは、基本的に次の形で書きます。

<p>ここに文章が入ります。</p>
  • <p>:開始タグ
  • </p>:終了タグ
  • タグで囲まれた中身が「内容」

👉 開始タグと終了タグはセットです。


開始タグと終了タグの違い

<h1>見出し</h1>
  • <h1>:ここから見出しが始まる
  • </h1>:ここで見出しが終わる

終了タグには、
スラッシュ(/)が付くのがルールです。


終了タグが不要なタグもある

一部のタグには、終了タグがありません。

<img src="image.jpg" alt="画像">
  • 画像を表示するだけ
  • 中身を持たないタグ

👉 こうしたタグを
「空要素(からようそ)」と呼びます。


属性(attribute)とは?

属性は、
タグに追加の情報を与えるものです。

<a href="https://example.com">リンク</a>
  • href:リンク先のURL
  • src:画像やファイルの場所
  • alt:画像の説明文

👉 属性は
開始タグの中に書くのがルールです。


よくある初心者のミス

初心者が特につまずきやすいポイントです。

  • 開始タグと終了タグが一致していない
  • タグの閉じ忘れ
  • 属性の "(ダブルクォーテーション)忘れ
  • タグを重ねる順番が逆になる

HTMLは構造が命です。


なぜタグの理解が重要なのか?

タグを理解していないと、

  • CSSが効かない
  • JavaScriptで要素を取得できない
  • 表示が崩れる原因が分からない

といった問題が起こります。

👉 HTMLタグは、すべての土台です。


まとめ

  • HTMLはタグで構造を表す
  • 基本は「開始タグ+終了タグ」
  • 属性で追加情報を指定する
  • タグの理解がCSS・JSにつながる

次回は、よく使う基本HTMLタグを具体例つきで解説します。

GapSmileGeek
初心者向けWeb制作解説ブロガー
HTML・CSS・JavaScript・WordPressを、完全初心者向けに解説しています。

Web制作を学び始めた頃、
「コードを書いているのに、なぜ動くのか分からない」
「写経はできるが、応用ができない」
そんな状態で何度もつまずきました。

このブログでは、専門用語を噛み砕きながら
「なぜそう書くのか」を言葉で説明することを大切にしています。
写経で終わらない、理解できるWeb制作を一緒に積み上げていきましょう。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

GapSmileGeekのアバター GapSmileGeek 初心者向けWeb制作解説ブロガー|HTML・CSS・JavaScript・WordPress

はじめまして。Gap Smile Geek(ギャップスマイルギーク)を運営している管理人です。

このブログでは、HTML・CSS・JavaScript・WordPressを中心に、
「完全初心者でも理解できること」を最優先に解説しています。

私自身、Web制作の学習を始めた頃は
「コードを書いているけれど、正直よく分からない」
「写経はできるが、応用ができない」
そんな状態で何度もつまずいてきました。

その経験から、このブログでは
・専門用語をできるだけ噛み砕いて説明する
・「なぜそう書くのか」を必ず言葉にする
・初心者が混乱しやすいポイントを先回りして解説する

という方針を大切にしています。

これからWeb制作を学び始める方や、
一度挫折してしまった方にとって、
「戻ってこられる場所」になるブログを目指しています。

焦らず、一歩ずつ。
一緒に理解を積み重ねていきましょう。

コメント

コメントする

目次