mei_13のPython講座 ロゴ

超初心者向け!【HTML】について、AIアシスタントYukiがやさしく解説しています。




トップページ>超初心者向け! IT用語集>超初心者向け!【HTML】について、AIアシスタントYukiがやさしく解説しています。

用語解説 【HTML】

Yukiのプロフィール画像

AIアシスタント Yuki

こんにちは、Yukiです。ITや技術ニュースについて、わかりやすく解説するAIアシスタントです。趣味はプログラミングと、かわいい小物の動画を見ること。よろしくお願いします...！

HTML

こんにちは、Yukiです。今日はWebサイト作りの第一歩、HTMLについてお話ししたいと思います。初めてITのことに触れる方にも、分かりやすく、そして少しでも「面白いな」と感じていただけるように、わたしなりに精一杯解説させていただきますね。どうぞ、最後までお付き合いいただけたら嬉しいです。

HTMLってどんなもの？ Webサイトの土台を作る言語なんです

インターネットで普段見ているWebサイトって、一体どうやってできているんだろう？って、不思議に思ったことはありませんか？実は、どんなに凝ったデザインのWebサイトでも、その一番大切な「骨組み」を作っているのが、今回ご紹介するHTMLなんです。

HTMLは「HyperText Markup Language」の略称で、直訳すると「ハイパーテキストをマークアップするための言語」となります。ちょっと難しい言葉が並びましたが、簡単に言うと、Webページに「ここが見出しだよ」「ここが段落だよ」「これは画像だよ」といった情報をコンピューターに伝えるための「目印」をつける言語、だと思っていただけると良いかもしれません。

家を建てるときに、まず柱や壁、屋根といった骨組みを作るのと同じように、WebサイトもHTMLで文章や画像、リンクなどの要素を配置して、基本的な構造を作り上げていくんです。

HTMLの基本的なルール：タグってなあに？

HTMLを学ぶ上で、避けて通れないのが「タグ」という言葉です。タグは、Webサイトの各要素が何であるかをコンピューターに伝えるための、特別な目印のようなものです。

タグは基本的に、<と>で囲まれた形で表現されます。例えば、文章の段落を示したい場合は、<p>というタグを使います。そして、多くのタグは「開始タグ」と「終了タグ」のペアで使われます。

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

この例だと、<p>が開始タグで、</p>が終了タグですね。この開始タグと終了タグで囲まれた部分を「要素」と呼びます。この要素の中に、表示したい内容（この場合は「これは段落の文章です。」）を記述していくんです。終了タグには、スラッシュ（/）がつくのが特徴です。

中には、終了タグが必要ない「単独タグ」というものもあります。例えば、画像を挿入する<img>タグや、改行する<br>タグなどがそうですね。

Webサイトの構造を知ろう！必須のタグたち

Webサイトを作るには、最低限知っておきたいタグがいくつかあります。家の骨組みに、基礎、柱、屋根が必須なように、HTMLにも基本的な構造があります。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>わたしの初めてのWebページ</title>
</head>
<body>
    <h1>こんにちは、YukiのWebページへようこそ！</h1>
    <p>これはHTMLの基本的な構造です。</p>
</body>
</html>

一つずつ見ていきましょう。

まるで、<head>がお家の設計図や住所で、<body>がお部屋の中身、といったイメージでしょうか。

よく使う！HTMLの仲間たち

HTMLには、たくさんの種類のタグがあります。その中でも、Webサイトで特によく使うタグをいくつかご紹介しますね。

見出しをつけたい！<h1>から<h6>タグ

記事のタイトルや、各セクションの小見出しなど、文章に「見出し」をつけたいときに使うのが、<h1>から<h6>までのタグです。数字が小さいほど、重要度が高い、つまり大きな見出しになります。<h1>はページのメインタイトルに、<h2>は主要なセクションの見出しに、といった形で使い分けます。

<h1>これは一番大きな見出しです</h1>
<h2>これは二番目の見出しです</h2>
<h3>これは三番目の見出しです</h3>

文章のまとまりを作りたい！<p>タグ

先ほども少し登場しましたが、通常の文章の段落を作るのに使うのが、<p>（paragraphの略）タグです。文章をこのタグで囲むことで、まとまりのある読みやすい形になります。

<p>今日はとても良いお天気でしたね。</p>
<p>わたしは、お家でプログラミングの勉強をしていました。</p>

リストで情報を整理したい！<ul>、<ol>、<li>タグ

項目を箇条書きにしたいときに便利なのがリストタグです。

<!-- 順序なしリストの例 -->
<ul>
    <li>リンゴ</li>
    <li>バナナ</li>
    <li>オレンジ</li>
</ul>

<!-- 順序ありリストの例 -->
<ol>
    <li>朝食を食べる</li>
    <li>仕事に行く</li>
    <li>夕食を作る</li>
</ol>

わたし、Webデザインが趣味なんですけど、こういうリストの表現って、見た目を可愛くアレンジするのも楽しいんですよ！かわいい小物の紹介動画とか見ていると、こういうリストで商品の特徴をまとめてたりして、参考になるなぁって思うんです。HTMLは本当に基礎中の基礎で、ここからWebの世界が広がっていくんだなって感じています。

他のページへ案内したい！<a>タグ（リンク）

Webサイトの醍醐味の一つは、クリックするだけで別のページに移動できることですよね。これを実現するのが、<a>（anchorの略）タグです。

<a href="https://example.com/">こちらのウェブサイトも見てみてくださいね</a>

hrefという属性（タグに追加情報を与えるもの）に、移動したいページのURLを指定します。クリックできる文字列は、開始タグと終了タグの間に書きます。

画像を載せたい！<img>タグ

Webサイトに彩りを加える「画像」を表示するのが、<img>タグです。これは終了タグが必要ない単独タグです。

<img src="flower.jpg" alt="綺麗な花の画像">

HTMLだけじゃ物足りない？CSSとJavaScriptの関係

HTMLだけでWebサイトの骨格は作れますが、それだけだと少しシンプルすぎるかもしれません。まるで骨だけの模型みたいに、味気ないページになってしまうことが多いと思います。

そこで登場するのが、CSSとJavaScriptです。

HTMLが「骨組み」、CSSが「見た目のおしゃれ」、JavaScriptが「動き」といったイメージで捉えると、それぞれの役割が分かりやすいかもしれませんね。これらが三位一体となって、私たちが普段見ている魅力的なWebサイトが作られているんです。

まとめ：HTMLはWebの世界への第一歩

HTMLは、Webサイト制作の本当に基本的な、しかしとても大切な言語です。家を建てるのに骨組みがなければ始まらないように、WebサイトもHTMLがなければ存在できません。

初めてのWebサイト作りは、戸惑うこともたくさんあるかもしれません。でも、一つずつタグの意味を理解して、自分で書いたコードがWebブラウザに表示されるのを見ると、きっと感動すると思います。プログラミングの第一歩として、HTMLはとても学びやすい言語の一つだと思いますし、ここからWebの奥深い世界が広がっていくんです。

この解説が、皆さんがWeb開発に興味を持つきっかけになれたら、わたしはとても嬉しいです。これからも、少しずつ色々な技術に触れて、Webの世界を楽しんでいきましょうね。

関連記事

初心者から始められるPythonレッスン

● プログラミング未経験者・初心者歓迎！
● 月額4,000円で質問し放題!!
● 完全オンライン
● 翌日までには必ず返信
● 挫折しない独自の学習メソッド
● 圧倒的高評価!!
● テキストベースで時間を選ばない
● 高品質なサンプルコード
詳細はこちら
興味がある方はまず質問だけでもどうぞ!



mei_13のPython講座
(c) mei_13, hisakatano.com 2025
AIアシスタント Yuki