HTMLって何？よく聞くけどよく分からない人へ解説！

2023年11月8日

最近何かと話題のプログラミングについて調べていると、「HTML」という言葉をよく目にしませんか？

HTMLの意味は理解しているけど実際の役割って何？
そもそもHTMLって何者？

となっている方もいるかと思います。

そんなHTML（HyperText Markup Language）について、今回は解説していきます！

HTMLが何か知りたいだけの方は、「HTMLの基本要素」まで読んでその先は飛ばしてもらって構いません(笑)

HTMLってそもそも何？

HTMLは、Webページの構造を定義するための言語です。

今、あなたに見ていただいているこのサイトもHTMLによって定義されています。

テキスト、画像、リンクなどのコンテンツを配置し、それらがどのように表示されるかを定めるのが、

HTMLの役割です。基本的に、HTMLは要素（Elements）と呼ばれるタグ（Tags）で構成されます。

HTMLの基本要素

HTMLの基本要素は、Webページの構造やコンテンツを定義するための重要な要素となります。

それぞれの要素が特定の目的を持っているため、それらを使いこなすことによってWebページの見栄えや機能性を向上させることができます！

1. タグ（Tags）

HTMLの基本的な構成要素はタグです。　タグは要素を定義してそのコンテンツに対して意味を与える役割があります。

例えば、以下はよく使われるいくつかのタグになります。

<h1> – <h6>：見出しを定義するタグ。<h1> が最も重要な見出しであり、<h6> が最も小さい見出しを表します。
<p>：段落を定義するタグ。
<a>：リンクを定義するタグ。
<img>：画像を挿入するタグ。

これらのタグにはオープニングタグ（開始タグ）とクロージングタグ（終了タグ）があり、その間にコンテンツを挿入する形で記述します。

<p> <!--この中にコンテンツを記載--> </p>

タグにはさまざまな属性を持たせることができ、これらの属性は追加の情報や機能を提供します。

2. 属性（Attributes）

HTMLタグには、さまざまな属性を追加することができます。属性はタグに追加情報を提供し、そのタグがどのように振る舞うかを制御します。

例えば、<a> タグには href 属性があり、リンク先のURLを指定します。また、<img> タグには src 属性があり、画像のソースを定義します。

<a href="https://kirakuniit.com">きらくにITのリンク</a>

<img src="画像の名前.png">

3. 構造

HTML文書はツリー構造で表現されます。

ツリー構造(木構造)とは？

階層が深くなるほど枝分かれしていく構造のことで、要素同士が親子関係を持つことです。

以下は基本的なHTMLの構造です。

<!DOCTYPE html>
<html>
  <head>
    <title>タイトル</title>
  </head>
  <body>
    <h1>見出し</h1>
    <p>段落のテキスト</p>
    <img src="image.jpg" alt="画像の代替テキスト">
    <a href="https://example.com">リンクテキスト</a>
  </body>
</html>

<!DOCTYPE html>: 文書のHTMLバージョンを定義します。
<html>: HTML文書全体を囲むルート要素です。
<head>: タイトルやなどを含む要素。
<body>: 表示されるコンテンツを含む要素。