アルアカ - Arcadia Academia

Arcadia Academiaは「エンジニアリングを楽しむ」を合言葉に日本のデジタル競争力を高めることをミッションとするテックコミュニティです。

HTMLとは?初心者向けに基本を解説

Featured image of the post

Webページを作成する上で欠かせない技術の一つに「HTML(HyperText Markup Language)」があります。HTMLは、Webサイトの骨組みを作るための言語であり、インターネット上のあらゆるWebページがこのHTMLを基盤として作成されています。

この記事では、HTMLの基本概念や特徴、実際の使用例などを詳しく解説していきます。初心者の方にもわかりやすく説明するので、ぜひ最後までご覧ください!


[目次を開く]

1. HTMLとは?

HTML(エイチ・ティー・エム・エル)は「HyperText Markup Language(ハイパーテキスト・マークアップ・ランゲージ)」の略称であり、Webページを構成するためのマークアップ言語です。

マークアップ言語とは、文章の構造を定義するための言語のことで、HTMLでは「タグ」と呼ばれる記述を用いて、見出しや段落、リンク、画像の配置などを指定できます。

例えば、次のようなコードを書けば、Webページに「見出し」と「段落」を表示できます。

<!DOCTYPE html>
<html>
<head>
    <title>サンプルページ</title>
</head>
<body>
    <h1>HTMLとは?</h1>
    <p>HTMLはWebページの構造を作るための言語です。</p>
</body>
</html>

下の画像のようにブラウザでは表示されます。

Image in a image block

2. HTMLの基本構造

HTML文書は、以下のような基本的な構造で成り立っています。

(1) DOCTYPE宣言

<!DOCTYPE html> は、その文書がHTMLで書かれていることをブラウザに伝えるための宣言です。

(2) <html>タグ

Webページ全体を囲むタグであり、HTML文書の開始と終了を示します。

(3) <head>タグ

Webページの情報(メタデータ)を記述する部分です。ここには、ページのタイトルやCSSのリンクなどが含まれます。

(4) <body>タグ

実際にブラウザに表示される内容を記述する部分です。見出し、テキスト、画像、リンクなどが含まれます。


3. HTMLの主要なタグ

HTMLには、さまざまな要素を記述するための「タグ」が存在します。ここでは代表的なタグを紹介します。

(1) 見出しタグ (<h1><h6>)

Webページのタイトルやセクションの見出しを指定するタグです。

<h1>これは大見出し</h1>
<h2>これは中見出し</h2>
<h3>これは小見出し</h3>
Image in a image block
(2) 段落タグ (<p>)

文章を段落として表示するためのタグです。

<p>これは段落の文章です。</p>
Image in a image block
(3) リンクタグ (<a>)

他のページや外部サイトへ移動するためのリンクを作成できます。

<a href="https://ar-aca.tech/">このリンクをクリック</a>
Image in a image block
(4) 画像タグ (<img>)

Webページに画像を表示するためのタグです。

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

image.jpgというファイル名の画像を表示するコードです。

(5) リストタグ (<ul> / <ol> / <li>)

箇条書きリストや番号付きリストを作成できます。

<ul>
    <li>項目1</li>
    <li>項目2</li>
</ul>

<ol>
    <li>番号付き項目1</li>
    <li>番号付き項目2</li>
</ol>
Image in a image block

4. HTMLとCSS・JavaScriptの関係

HTMLだけではWebページのデザインや動きを表現することは難しいため、一般的に以下の技術と組み合わせて使用されます。

  • CSS(Cascading Style Sheets): デザインやレイアウトを調整する言語
  • JavaScript: Webページに動きをつけるためのプログラミング言語

例えば、CSSを使って見出しの色を青くする場合、以下のように記述します。

<style>
    h1 {
        color: blue;
    }
</style>

また、JavaScriptを使ってボタンをクリックしたときにアラートを表示することもできます。

<script>
    function showAlert() {
        alert("ボタンがクリックされました!");
    }
</script>

<button onclick="showAlert()">クリック</button>

5. HTMLを学ぶメリット

HTMLを学ぶことで、以下のようなメリットがあります。

(1) Web制作の基礎が身につく

HTMLはWeb開発の基本であり、学ぶことでサイトの構造を理解しやすくなります。

(2) 自分でWebサイトを作れる

基本的なHTMLの知識があれば、簡単なWebページを作成できるようになります。

(3) プログラミングの第一歩として最適

HTMLは初心者向けの言語として学びやすく、プログラミングの入門として最適です。


まとめ

HTMLは、Webページの基本的な構造を作るためのマークアップ言語です。タグを使って、見出しや文章、画像、リンクなどを配置し、CSSやJavaScriptと組み合わせることで、より魅力的なWebページを作成できます。

これからWeb制作を始めたい方は、まずHTMLの基本をしっかり学び、実際に手を動かしてコードを書いてみることをおすすめします!

あなたを爆速で成長させるメンタリングプログラムはこちらから↓↓

RUNTEQ(ランテック) - 実践型Webエンジニア養成プログラミングスクールの入会