HTMLとは何か？初心者向けに基本から説明します！

HTMLとは何か？

1. HTML とは?

HTML（HyperText Markup Language）は、Webページを作るための基本的な言語です。WebブラウザはHTMLを読み取って、私たちが見るWebページとして表示します。HTMLの役割は、ページの中身を整理して、どんな内容があるのかを伝えることです。HTMLは、プログラミング言語ではなく、「マークアップ言語」と呼ばれます。つまり、HTMLはWebページをどう見せるかではなく、ページの内容に意味を持たせるためのものです。例えば、見出しや段落などを示すために使われます。

HTMLは「タグ」と呼ばれる特別な記号のセットでできています。タグは、角括弧（< >）で囲まれていて、例えば、<h1>タグは大きな見出しを、<p>タグは段落を示します。タグは開始タグと終了タグのペアで使います。例えば、<tag>と</tag>のように書きます。また、<img>タグのように終了タグが必要ないものもあります。

HTMLは進化していて、今では「HTML5」というバージョンが最もよく使われています。HTML5では、これまでのHTMLに新しい機能が追加され、動画や音声をWebページに埋め込むことが簡単にできるようになっています。

2. HTML を書いてみよう

HTMLを実際に書くためには、テキストエディタというソフトを使ってコードを記入し、そのコードをWebブラウザで見ることができます。最もシンプルなHTMLページは、基本的な構造だけで十分です。以下に、最も簡単なHTMLコードを紹介します。


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>My First Web Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is my first HTML page.</p>
</body>
</html>

ブラウザ表示

このコードでは、<!DOCTYPE html>でHTML5を使うことを宣言し、<html>タグでHTML文書の始まりを示しています。<head>タグ内にはページに関する情報（タイトルなど）が含まれ、<body>タグ内には実際のWebページの内容が入っています。<h1>タグで大きな見出しを作り、<p>タグで段落を作ります。

HTMLを作るときは、必ず“<html>”タグで全体を囲み、<head>タグと<body>タグを使ってページの情報を整理します。そして、<title>タグでブラウザのタブに表示されるタイトルを決めます。

これが基本的なHTMLコードの一例ですが、実際にはもっと多くのタグがあって、それを使うことでWebページの内容をより豊かにすることができます。

3. HTML の基本構造

HTML文書は、決まった構造を持っています。この構造を理解することが、Webページを作るためにはとても重要です。以下は、HTML文書の基本的な構造の例です。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>基本的なHTML構造</title>
</head>
<body>
    <!-- Webページのコンテンツがここに来る -->
</body>
</html>

この例では、まず最初に<!DOCTYPE html>があります。これは、HTML5という最新のHTMLを使っていることをブラウザに伝えるためのものです。

次に、<html>タグがあり、HTML文書全体を囲んでいます。lang="ja"という部分は、このページが日本語で書かれていることを示しています。これにより、「日本語のページだよ」とブラウザに伝える役割を持っています。

<head>タグの中にはページの設定情報が含まれています。例えば、<meta charset="UTF-8">は文字コードを設定します。文字が正しく表示されるように設定します。たとえば、日本語の「漢字」や「ひらがな」などをきちんと表示できるようにするための設定です。

<body>タグの中には、実際にWebページに表示される内容が入ります。ここに見出しや段落、画像、リンクなどを追加します。

この基本的な構造を理解し、適切なタグを使うことで、検索エンジンに強いWebページを作成することができます。HTMLはシンプルでありながら、Webページ作成の基礎となる重要な技術です。