Web制作

HTMLの基本｜初心者が最初に覚えたいタグと書き方

PR

当サイトではアフィリエイト広告を利用しています。

HTMLの基本｜初心者が最初に覚えたいタグと書き方のアイキャッチ

Web制作を始めると、「HTML」という言葉をよく目にするようになります。

HTMLはWebページを作るための基本となる言語です。

しかし、最初は「タグって何？」「どうやって書けばいいの？」と分からないことも多いと思います。

この記事では、HTML初心者の方に向けて、HTMLの基本的な仕組みから、最初に覚えたいタグ、基本的な書き方までをわかりやすく解説します。

これからWeb制作を始める方は、まず基本的なHTMLの書き方を覚えて、簡単なWebページを作るところから始めてみましょう。

HTMLとは？

Webページの構造を作るために使われる言語です。

HTMLは「HyperText Markup Language」の略です。

例えば、Webページには、

  • 見出し
  • 文章
  • 画像
  • リンク
  • リスト

など、さまざまな要素があります。

HTMLを使うことで、それぞれの要素が何を表しているのかをブラウザへ伝えることができます。

例えば、次のように書きます。

<h1>HTMLの基本</h1>

<p>HTMLを勉強しています。</p>

この場合、

<h1> は見出し、<p> は文章を表します。

HTMLは、単に文字を並べるだけではなく、Webページの構造を作る役割を持っています。

HTML・CSS・JavaScriptの違い

Web制作では、HTMLと一緒にCSSやJavaScriptも使われます。

それぞれの役割を簡単に整理すると、次のようになります。

言語主な役割
HTMLWebページの構造
CSS色・サイズ・レイアウトなどの見た目
JavaScript動きやインタラクション

例えば、

HTMLで見出しや文章を配置し、
CSSで色やレイアウトを整え、
JavaScriptでクリックしたときの動きなどを追加します。

HTML・CSS・JavaScriptそれぞれの違いについては、こちらの記事で詳しく解説しています。

Related Article

HTML・CSS・JavaScriptの違いを初心者向けに解説

HTMLはどうやって書く？

「タグ」と呼ばれる記号を使って書きます。

例えば、文章を表示したい場合は、

<p>これは文章です。</p>

と書きます。

ここで、

<p>

が開始タグ、

</p>

が終了タグです。

その間に文章を入れることで、ブラウザに「これは段落です」と伝えています。

HTMLタグとは？

HTMLでは、要素ごとに異なるタグを使います。

例えば、

<h1>見出し</h1>

<p>文章</p>

<a href="https://example.com/">リンク</a>

のように書きます。

タグによって役割が異なるため、何を表現したいのかに合わせてタグを選ぶことが大切です。

HTMLファイルの基本構造

HTMLファイルには、基本となる構造があります。

まずは次のコードを見てみましょう。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>HTMLの基本</title>
</head>

<body>

    <h1>HTMLの基本</h1>

    <p>HTMLを勉強しています。</p>

</body>

</html>

初心者のうちは、まずこの形を覚えておくと分かりやすいです。

<!DOCTYPE html>とは？

<!DOCTYPE html>

は、HTML5の文書であることをブラウザへ伝えるための宣言です。

HTMLファイルの先頭に記述します。

<html>とは？

<html lang="ja">

は、HTML文書全体を囲むタグです。

lang="ja" は、ページの言語が日本語であることを示しています。

<head>とは？

<head>

には、ページの情報を記述します。

例えば、

  • 文字コード
  • ビューポート
  • ページタイトル
  • CSS
  • その他の設定

などを入れます。

ブラウザ上に表示する本文そのものは、基本的に<body>の中へ書きます。

<body>とは？

<body>

には、実際にブラウザへ表示する内容を書きます。

例えば、

<body>

    <h1>HTMLの基本</h1>

    <p>HTMLを使ってWebページを作ります。</p>

</body>

のように記述します。

初心者が最初に覚えたいHTMLタグ

ここからは、HTMLを始めるときに覚えておきたい基本タグを紹介します。

最初からすべてのタグを覚える必要はありません。

まずは、よく使う基本的なタグから少しずつ覚えていきましょう。

<h1>～<h6>：見出し

見出しを作るときに使用します。

<h1>ページタイトル</h1>

<h2>大見出し</h2>

<h3>小見出し</h3>

h1からh6まであります。

基本的には、

  • h1 → ページの主要な見出し
  • h2 → 大きな区切り
  • h3 → h2の中の小見出し

というように使います。

例えば、

<h1>HTMLの基本</h1>

<h2>HTMLとは？</h2>

<h2>初心者が覚えたいタグ</h2>

<h3>見出しタグ</h3>

のような階層で使います。

見た目の文字サイズだけを目的に見出しタグを使うのではなく、内容の階層に合わせて使うことが大切です。

<p>：段落

文章を書くときに使う基本的なタグです。

<p>これはHTMLの文章です。</p>

複数の文章を書く場合は、

<p>HTMLはWebページの構造を作ります。</p>

<p>初心者でも少しずつ覚えることができます。</p>

のように段落を分けます。

<a>：リンク

別のページやWebサイトへ移動するリンクを作ります。

<a href="https://example.com/">公式サイトを見る</a>

hrefにリンク先のURLを指定します。

例えば、Noah Labの記事へリンクする場合は、

<a href="https://noarhea-lab.com/web-production-tools/">
    Web制作ツール
</a>

のように書けます。

<img>：画像

画像を表示するときに使います。

<img src="image.jpg" alt="Webサイトの画像">

ここで、

src → 画像ファイルの場所

alt → 画像の内容を説明する文章

です。

例えば、

<img
    src="web-production.jpg"
    alt="Web制作で使うデスク周りのアイテム"
>

のように書きます。

altは、画像が表示されない場合の代替テキストとしても使われます。

<ul>と<li>：箇条書き

箇条書きのリストを作るときに使います。

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

表示すると、

  • HTML
  • CSS
  • JavaScript

のような箇条書きになります。

<ol>と<li>：番号付きリスト

順番のあるリストを作るときには<ol>を使います。

<ol>
    <li>HTMLを学ぶ</li>
    <li>CSSを学ぶ</li>
    <li>JavaScriptを学ぶ</li>
</ol>

順番が重要な手順やランキングなどに向いています。

<div>：要素をまとめる

<div>は、複数の要素をまとめるときなどに使います。

<div>
    <h2>HTMLの基本</h2>

    <p>HTMLについて学びます。</p>
</div>

HTMLの構造を整理したり、CSSを適用する単位として使ったりします。

ただし、何でも<div>にするのではなく、意味を持つタグがある場合はそちらを使うことも大切です。

<header>：ヘッダー

Webページのヘッダー部分を表すタグです。

<header>
    <h1>Web制作ブログ</h1>
</header>

ロゴやサイト名、ナビゲーションなどを配置する場所としてよく使われます。

<main>：メインコンテンツ

ページの中心となるコンテンツを表します。

<main>
    <h1>HTMLの基本</h1>

    <p>HTMLについて解説します。</p>
</main>

ページの主要な内容を<main>の中にまとめます。

<footer>：フッター

Webページの下部にあるフッター部分を表します。

<footer>
    <p>© Noah Lab</p>
</footer>

コピーライトやサイト内リンクなどを配置することが多いです。

<button>：ボタン

操作用のボタンを作ります。

<button type="button">
    クリック
</button>

フォームの送信やJavaScriptによる操作などに使います。

リンク先へ移動するだけなら<a>、何らかの操作を実行するなら<button>というように、役割を分けることが大切です。

HTMLの属性とは？

HTMLタグには、追加の情報を設定できる「属性」があります。

例えば、

<a href="https://example.com/">公式サイト</a>

では、

href="https://example.com/"

が属性です。

属性を使うことで、タグに追加の情報を指定できます。

よく使うHTML属性

href

リンク先を指定します。

<a href="https://example.com/">
    公式サイト
</a>

src

画像などのファイルの場所を指定します。

<img src="image.jpg" alt="画像">

alt

画像の内容を説明します。

<img src="image.jpg" alt="Webサイトのデザイン">

class

CSSを適用するときなどに使います。

<p class="text">
    文章です。
</p>

id

ページ内で特定の要素を識別するときなどに使います。

<section id="about">
    <h2>About</h2>
</section>

HTMLを書くときの基本ルール

HTMLはタグを覚えるだけではなく、読みやすく正しく書くことも大切です。

タグを正しく閉じる

例えば段落なら、

<p>文章</p>

のように開始タグと終了タグを使います。

間違えて、

<p>文章

のような状態にしないよう注意しましょう。

タグの入れ子を意識する

HTMLでは、タグの中に別のタグを入れることがあります。

<div>
    <h2>HTMLの基本</h2>

    <p>HTMLについて学びます。</p>
</div>

このように、開いたタグを適切な順番で閉じます。

インデントを整える

コードを書くときは、階層が分かるようにインデントを付けます。

<section>
    <h2>HTMLの基本</h2>

    <p>
        HTMLについて学びます。
    </p>
</section>

インデントを整えておくと、後からコードを見直すときにも分かりやすくなります。

意味に合ったタグを使う

HTMLでは、目的に合ったタグを使うことが重要です。

例えば見出しなら、

<h2>HTMLの基本</h2>

とします。

見た目だけ大きくしたいからといって、

<div>HTMLの基本</div>

にするのではなく、内容に合ったHTMLタグを使うようにしましょう。

HTMLとCSS・JavaScriptを組み合わせる

HTMLだけでもWebページの構造を作れますが、実際のWeb制作ではCSSやJavaScriptと組み合わせて使います。

例えば、

<h1>HTMLの基本</h1>

<p>HTMLを学んでいます。</p>

<button type="button">
    詳しく見る
</button>

というHTMLに、

CSS

で色やサイズ、余白などを設定し、

JavaScript

でボタンをクリックしたときの動きを追加できます。

Web制作では、

HTML
↓
構造を作る

CSS
↓
見た目を整える

JavaScript
↓
動きを追加する

というイメージで覚えると分かりやすいです。

HTMLを学ぶなら、まず何を作る？

HTMLを勉強するときは、タグをひたすら暗記するよりも、実際にページを作りながら覚えるのがおすすめです。

例えば、次のようなものから始めてみましょう。

① 自己紹介ページ

名前やプロフィール、趣味などを表示するページです。

② シンプルなブログページ

見出しや文章、画像、リンクなどを使って記事のようなページを作ります。

③ プロフィールサイト

画像、自己紹介、スキル、リンクなどを配置します。

④ Webサイトのトップページ

ヘッダー、メインコンテンツ、フッターなどを使って、簡単なWebサイトを作ります。

このように少しずつページを作っていくと、タグの役割も覚えやすくなります。

HTMLを書くために必要なもの

HTMLを書くために必要なものは、それほど多くありません。

基本的には、

  • HTMLを書くためのコードエディター
  • HTMLを表示するWebブラウザ

があれば始められます。

コードエディターにはさまざまな種類がありますが、Web制作ではVisual Studio Codeがよく使われています。

Visual Studio Codeの基本的な使い方については、こちらの記事で紹介しています。

Related Article

VS Code初心者向けに解説

HTML初心者が最初に覚えたいタグまとめ

最後に、今回紹介したタグをまとめます。

タグ役割
<h1>～<h6>見出し
<p>段落
<a>リンク
<img>画像
<ul>箇条書きリスト
<ol>番号付きリスト
<li>リスト項目
<div>要素をまとめる
<header>ヘッダー
<main>メインコンテンツ
<footer>フッター
<button>ボタン

最初からすべてを覚える必要はありません。

まずは、

<h1>
<h2>
<p>
<a>
<img>
<ul>
<li>

あたりから使ってみるとよいでしょう。

慣れてきたら、

<header>
<main>
<footer>

など、ページ全体の構造を作るタグも覚えていきましょう。

まとめ

HTMLは、Webページの構造を作るための基本的な言語です。

見出しには<h1>や<h2>、文章には<p>、リンクには<a>、画像には<img>というように、目的に合わせてタグを使い分けます。

また、HTMLを書くときは、タグの入れ子やインデント、意味に合ったタグを意識することも大切です。

最初からすべてのタグを暗記する必要はありません。

まずは基本的なタグを使って、簡単なWebページを実際に作ってみましょう。

HTMLに慣れてきたら、CSSでデザインを整えたり、JavaScriptで動きを追加したりすることで、より本格的なWebサイトを作れるようになります。

Related

関連記事