HTMLって何？いまさら聞けないその内容を、5分で知る！ 2025年08月04日

「HTMLってなに？おいしいの？」

という人向けの記事です。当ブログ初の記事なので、まずは基本のキから攻めていこうという狙いです。なんなら、基本のキの「\」から攻めていこうという狙いです。よろしくお願いします！

HTMLって何？プログラミング言語？

HyperText Markup Language

略して「HTML」。プログラミング言語ではありません。大事なことなので二回言います。プログラミング言語ではありません。

HTMLはマークアップ言語の一つです。

「ハイパーテキスト（HyperText）？マークアップ？何それ食べられるの？」ええ、わかりますよ、その気持ち。私もそうでした。どんな味がするのかと思ってかじったことさえあります。

順を追って説明していきましょう。

ハイパーテキストって？

インターネットでテキストを読んでいると、たまに下線が引かれているテキストを見かけますね。そして、皆さんはそれが「リンクテキスト」であることを知っています。さらに言えば、それをクリックすれば別の情報ページへ移動することも知っています（これは長い期間をかけて培われた慣習によるものですね）。

このように、テキストからテキストへ情報をたどっていくことができるものをハイパーテキストといいます。そして、その仕組みを実現するのがHTMLです。

もちろん、ただテキストをポチポチ打ってもハイパーテキストにはなりません。テキストがハイパーするためには、目印をつける（マークアップする）必要があります。

テキストをマークアップしてハイパーさせる！

実際に、マークアップされたテキストをみてみましょう。

<a href="https://keke-web.com/tech-blog/">このブログのトップページへ！</a>

これは、HTMLテキストのごく一部分の記述です。いきなり暗号みたいなのが現れましたね。落ち着いてください。何も怖くありません。

これをウェブブラウザ（Google Chrome、Microsoft Edge など）で表示させると、以下のようになります。

このブログのトップページへ！

注目してほしいのは、

　このブログのトップページへ！

というテキストが、

　<a href=”https://keke-web.com/tech-blog/”>

と、

　</a>

という文字列で囲まれている点です。これがマークアップしているということです。ただのテキストに意味や役割を持たせるために、タグ（<>）で囲んで目印をつけているんですね。

<a>にはハイパーリンクの意味があります。そして href=”https://keke-web.com/tech-blog/ という情報をもたせることで「https://keke-web.com/tech-blog/にリンクするハイパーテキスト」になるわけです。

ほかにも<h1>（heading = 見出し）や、 <P> （paragraph = 段落）など、さまざまなタグが用意されています。

千里の道も一歩から！Webの世界もまずHTMLから

HTMLだのマークアップだなんていうと、Webに詳しくない人にとっては難しく聞こえるかもしれません。しかし、これらは決して理解不能で複雑なものではありません。テキストを<h1>や<a>で囲めばいいだけです。

もちろん、さきに紹介した以外にも様々なタグ（<>）が用意されてありますし、言語全体の仕様も細かく定められています。しかし、はじめのうちは難しいことは考えず、とりあえずプリインストールされてあるメモ帳アプリでテキストを書いてみて、適当にリンクを設定してみて、ぽちっと押してページが移動して、「なんかうまくいったー！」ってキャッキャ騒げばいいんです。その単純すぎる第一歩が、初めてHTMLだったりマークアップ言語だったり、はたまたプログラミング言語に触れる人にとっては、とてつもなく感動的だったりします。

では、「その第一歩を踏み出すために具体的にどうすればいいか？」は、また別の記事で書きたいと思います。