Web

HTML とは?

投稿日:

1. HTML とは?

HTML は、正式には HyperText Markup Language といい、「ハイパーテキストを記述するためのマークアップ言語の1つ」です。分かりづらいですね。

分かりやすく言うと、「Webページとして表示する文書を作成するためのフォーマット」と考えてもらうとよいと思います。「見出し」部分は、<h1> と </h1> で囲んでね、とか「段落」部分は <p> と </p> で囲んでね、とかそういった決まりです(<h1> や <p> のことを「タグ」と呼びます)。

この決まりがあれば、文字の装飾や文章の構造などの意味を持った文書が「メモ帳 (Windowsについているアプリケーションです)」でも書けてしまうのです。HTMLで記述したファイルは、ただのテキストファイルだからです。

HTMLのタグによって「意味」を持った文書を、その「意味」毎にどのような見た目で表示するかは、CSS という言語で記述することができます。こちらもただのテキストファイルになります。

そして、HTMLのタグと CSSの記述の両方を読み込んで、HTML文書に CSSの内容を反映してくれるのが「Webブラウザ」と呼ばれるアプリケーションです。具体的には、Chrome, Firefox, Edge, IE などがあります。これらのアプリケーションは、インターネット上から目的のWebページを閲覧する時に使用しますが、Webページを表示する度にこのような処理を行っているのです。

Webブラウザの動作
(実際には画像ファイルやJavaScriptファイルなどもあります。)

2. HTML の例

例えば、箇条書きしたいところをHTMLで書く場合は、以下のように書きます。

<ul>
  <li>晴れ</li>
  <li>曇り</li>
  <li>雨</li>
</ul>

これをこの画面にそのまま記述すると、以下のように表示されます。

—– ここから —–

  • 晴れ
  • 曇り

—– ここまで —–

どうでしょうか?

ちゃんと箇条書きになっているはずですが、これは Webブラウザが HTMLとCSS を解釈して表示してくれているのです。

3. HTML の仕様

このHTMLの仕様は、WHATWG という組織が常に更新しており、HTML Standard で誰でも見ることができます。

日々、内容が更新されていきます。Webブラウザも、この仕様を追従して新たな機能を実装しています。

4. 参考

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

web development

HTTPレスポンスヘッダ COEP, COOP, CORP, CORS についてのメモ

HTTP Response Header である COEP, COOP, CORP, CORS についてのメモです。

DokuWiki

DokuWiki のアクセス設定チェックが面白い

目次1. It seems your data directory is not properly secured.2. 対応方法3. 珍しいアクセスチェックの仕組み4. おわりに 1. It see …

WordPress

「Build a Custom WordPress User Flow」を試してみました

目次1. はじめにソースコード2. 全体3. Part 1: Replace the Login Page使用している関数アクションフィルタ4. Part 2: New User Registrati …

Chrome

Chrome のローカルオーバーライド機能を使ってWebサイトのファイルをローカルのファイルに置き換える

目次1. Chrome のローカルオーバーライド機能とは?2. 使い方1. この機能で使用するローカル側のフォルダーを指定します2. 置き換えるファイルを指定します3. ファイルを編集します3. Ov …

PWA

Webブラウザと PWA は切り離して欲しい

マイクロソフトはWeb技術を用いてネイティブアプリケーションのように動作するProgressive Web Apps(PWA)を、WebブラウザのEdgeにとどまらず、Windows10のデスクトップ …