【HTML】初心者向け基礎知識！HTML・作り方・タグを説明！

HTML

【 2025/04/08 22:58 更新】

HTMLとは？

HTML（HyperText Markup Language）とは、Webページの画面構造をコンピュータへ定義するためのマークアップ言語です。

マークアップ言語とは

"タグ"と呼ばれる書き方で、どれが何なのかを定義します。

こんな感じに書きます。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>こじはなNote</title>
    </head>
    <body>
        <h1>HTMLについての説明</h1>
        <p>HTMLとはこんな感じに書くよ！</p>
        <button>ボタン</button>
    </body>
</html>

上のHTMLをブラウザで表示すると、こんなかんじになります。

ブラウザとは

インターネット上のホームページ（Webサイト）を閲覧するためのソフトウェアです。
chromeやEdge・safariが代表的です。

HTMLで「できること」と「できないこと」

HTMLで「できること」

明確に、これはこの要素です！とコンピュータへ伝えることができる。
Webページの骨組みを開発することができる。
最低限のページはHTMLだけで作れる。

HTMLで「できないこと」

素敵なデザインにできない。
素敵なアニメーションが作れない。
細かい機能が追加できない。

HTMLだけだと、素敵なデザインやアニメーションにできなくて物足りなく思っちゃうかも。

ポイント

デザイン・アニメーションも作り込む場合はCSSやJavaScriptも一緒に開発する必要があります。

CSSとは

Webページのデザインを詳細に作ることができる言語です。
HTMLと一緒に使用されます。詳しくはこちらの記事をご参照ください。
【CSS】初心者向け基礎知識！セレクタ・結合子・プロパティの基本！| こじはなNote

HTMLの開発方法

1. テキストエディタでHTMLファイルを作る

あなたのパソコンに入っているテキストエディタで、拡張子.htmlのファイルを作成します。

こじはなはファイル名をcojihana.htmlにしました！

テキストエディタとは

文字の入力・編集・保存ができるソフトウェアです。
デフォルトのものだと、「Windows」ではメモ帳・Macでは「テキストエディット」が入っているはずです！

拡張子とは

ファイルの種類や形式を示す文字列で、ファイル名の末尾に付きます。
ドット.でファイル名と拡張子の間を区切ります。

Windowsで拡張子が表示されない場合

こちらを参考に、設定してみてださい。
Windows の一般的なファイル名拡張子

2. 「1.」で作ったHTMLファイルへHTML文を追記

追記したら保存は忘れずに！

書き方が分からない方は下記を参考に追記してみてください。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>こじはなNote</title>
    </head>
    <body>
        <h1>HTMLについての説明</h1>
        <p>HTMLとはこんな感じに書くよ！</p>
        <button>ボタン</button>
    </body>
</html>

3. 「2.」で保存したHTMLファイルをブラウザで開く

以下のようにブラウザで表示できれば成功です。
※ブラウザによって表示に多少差が出ます。

ブラウザとは

インターネット上のホームページ（Webサイト）を閲覧するためのソフトウェアです。
chromeやEdge・safariが代表的です。

HTMLの基本的なタグ

HTMLで絶対に必要な構造用のタグ

＜!DOCTYPE html＞

「これからHTMLのコードが始まるよ！」と、コンピュータに宣言するコードです。

HTMLコードの一番初めに書きます。

注意

このコードがないとHTML文と認識されない場合があります。絶対に書きましょう。

<!-- これ↓ -->
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>こじはなNote</title>
    </head>
    <body>
        <h1>HTMLについての説明</h1>
    </body>
</html>

htmlタグ

HTMLコード全体を開始タグ・終了タグで囲います。

htmlタグ内でWebページの構成要素全てを定義します。

「開始タグ」・「終了タグ」とは

開始タグ：要素の始まりを表し、「<（要素名）>」と表記します。
終了タグ：要素の終わりを表し、「</（要素名）>」と表記します。
※（要素名）は、要素によって異なります。

注意

このコードがないとHTML文が正しく表示されない場合があります。絶対に書きましょう。

<!DOCTYPE html>
<!-- 開始タグこれ↓ -->
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>こじはなNote</title>
    </head>
    <body>
        <h1>HTMLについての説明</h1>
    </body>
<!-- 終了タグこれ↓ -->
</html>

「lang="ja"」について
「日本語対応のWebページです」と、伝えています。

「lang」属性に指定した値によって言語を指定することが可能です。

属性とは

HTML要素の内容や動作を調整するために追加する値のこと。
要素の開始タグ内に配置され、「名前=値」の形式で書きます。

headタグ

headタグ内には、Webページ全体に必要な設定や処理を定義します。
ざっくり以下の役割があります。

検索エンジン向け（ページのタイトルやキーワード、説明など）を定義する。
CSS・JavaScriptのコードを書いたり、別ファイル呼び出し先を定義する。
その他ページ全体の設定を定義する。

注意

このコードがないとHTML文が正しく表示されない場合があります。絶対に書きましょう。

CSSとは

<!DOCTYPE html>
<html lang="ja">
    <!-- 開始タグこれ↓ -->
    <head>
        <meta charset="UTF-8">
        <title>こじはなNote</title>
    <!-- 終了タグこれ↓ -->
    </head>
    <body>
        <h1>HTMLについての説明</h1>
    </body>
</html>

<meta charset="UTF-8">について
HTML文内の文字コードの種類を指定しています。

metaタグについては、また詳しくご説明します。
<title>こじはなNote</title>について
Webページのタイトルを指定しています。

ここで指定したタイトルは、Webページを開いた時の「タブ名」・「検索結果のタイトル」として表示されます。

文字コードとは

人間が入力した文字や記号１つ１つの、一意なIDのようなもの。
ひらがなの「あ」は、UTF-8（文字コードの種類）では「E38182」となります。

<meta charset="UTF-8">を指定しないと、日本語文字が文字化けしちゃうよ！

bodyタグ

Webページに表示する構造や要素部分を内包するタグです。

「開始タグ」・「終了タグ」とは

開始タグ：要素の始まりを表し、「<（要素名）>」と表記します。
終了タグ：要素の終わりを表し、「</（要素名）>」と表記します。
※（要素名）は、要素によって異なります。

注意

このコードがないとHTML文が正しく表示されない場合があります。絶対に書きましょう。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>こじはなNote</title>
    </head>
    <!-- 開始タグこれ↓ -->
    <body>
        <h1>HTMLについての説明</h1>
    <!-- 終了タグこれ↓ -->
    </body>
</html>

HTMLで基本中の基本の要素用タグ

h1~h6タグ

見出しに使用します。
h1が一番大きな見出しで、h2、h3...と数字が大きくなるほど小さい見出しになります。

<h1>1番大きな見出し</h1>
<h2>2番目の見出し</h2>
<h3>3番目の見出し</h3>
<h4>4番目の見出し</h4>
<h5>5番目の見出し</h5>
<h6>6番目の見出し</h6>

上のHTMLをブラウザで表示すると、こんなかんじになります。

ブラウザとは

インターネット上のホームページ（Webサイト）を閲覧するためのソフトウェアです。
chromeやEdge・safariが代表的です。

pタグ

段落など文章のまとまりに使用します。

<p>こじはなは、社会人3年目のひよっこです。</p>

上のHTMLをブラウザで表示すると、こんなかんじになります。

pタグの隣に文字を書くと...

<p>こじはなは、社会人3年目のひよっこです。</p>
こじはなは、お仕事が大好きです。

pタグの次の要素は、改行されます。

brタグ

文字を改行するときに使います。

<p>こじはなは、<br>社会人3年目のひよっこです。</p>

上のHTMLをブラウザで表示すると、こんなかんじになります。

spanタグ

文章の一部に装飾やギミックを加える時に使用します。
例えば、文章中の特定の文字を太字にする場合、spanタグがCSSと一緒に使われます。

CSSとは

<p>
    文章の一部を<span style="font-weight: bold;">太字</span>にする。
</p>

上のHTMLをブラウザで表示すると、こんなかんじになります。

style="font-weight: bold;"について
style属性で太字を指定しています。

こちらはCSSに関係してくるところです。

aタグ

aタグを使うとリンクが作れます。

注意

存在するURLを指定なければ表示されません。

URLとは

「Uniform Resource Locator」の略称で、インターネット上に存在するファイルやWebページの住所のことです。

<a href="cojihana-note.com/">こじはなNoteのホーム</a>

上のHTMLをブラウザで表示すると、こんなかんじにリンクになります。

imgタグ

HTMLで画像を表示するためのタグです。

注意

src=""は正しいパスである必要があります。

パスとは

ファイルやディレクトリ（フォルダー）がある場所のことです。
パスについて詳しくは別で説明します。

<img src="test.png" alt="テスト画像">

上のHTMLをブラウザで表示すると、こんなかんじになります。

src="test.png"について
表示させる画像のパスを指定しています。
alt="テスト画像"について
表示させる画像の代替テキストです。

マウスを合わせたときや、読み取り機能で代替テキストが使われます。

divタグ

特に意味を持たないタグで、レイアウトやデザインを構成するタグです。
柔軟性が高く、様々な用途に適用できます。
CSSやJavaScriptと一緒によく使われます。

CSSとは

<div>divタグ1</div>
<div>divタグ2</div>
ただの文字

上のHTMLをブラウザで表示すると、こんなかんじになります。

まとめ

HTMLはWebページの画面構造をコンピュータへ定義するためのマークアップ言語。
HTMLだけでは素敵なデザイン・アニメーション・細かい機能が実装できない。
＜!DOCTYPE html＞：「これからHTMLのコードが始まるよ！」と、コンピュータに宣言するコード。
htmlタグ：HTMLコード全体を開始タグ・終了タグで囲む。
headタグ：Webページ全体に必要な設定や処理を内包するタグ。
bodyタグ：Webページに表示部分を内包するタグ。
h1~h6タグ：h1が一番大きい見出しで、h2、h3...と数字が大きくなるほど小さくなる。
pタグ：段落など文章のまとまりに使用します。
brタグ：改行に使用します。
spanタグ：文章の一部に装飾やギミックを加える時に使用し、CSSと一緒によく使われる。
aタグ：リンクとして使用する。
imgタグ：画像を表示したい時に使う。
divタグ：レイアウトやデザインを構成するタグで、CSSやJavaScriptとよく一緒に使う。

CSSについて

HTML

【 2025/04/08 22:58 更新】

こじはな

Webエンジニア3年目。

フロントからバックエンドまで幅広く経験や知識を発信します！