HTML超入門！押さえておきたいマークアップの基本

複数のコンピュータがアクセスして動作するソフトウェアです。例えば、AmazonのようなショッピングサイトやX（旧Twitter）やFacebookのようなSNSが該当します。このモデルではHTML/CSS/JavaScriptが主に使用されます。クライアントからの要求に対してサーバーが応答を返す形式のソフトウェアです。サーバーがあり、複数のパソコンやスマートフォンからの要求に対して、サーバーが「OKです」とか「ページがありません」といった応答を返します。

Webページを閲覧する仕組み

もう少し詳しくWebページを閲覧する仕組みを見ていきましょう。Webページを閲覧するためには、クライアント側でブラウザというソフトウェアを使用します。一般的なブラウザには以下のものがあります。

Google Chrome

Apple Safari

Microsoft Edge

などがそれに当たります。

ブラウザからページを閲覧するために、Webサーバーにリクエストを送信します。リクエストは要求のことです。サーバーはリクエストに対してレスポンスを返します。レスポンスはHTML/CSS/JavaScriptなどのテキストデータの形式で返されます。Webページの閲覧では、サーバー上のプログラムが要求に応じてCSS/JavaScriptを含んだHTMLを作成する処理を行います。

HTML とは?

HTMLとは「Hyper Text Markup Language」の略で、Webページを記述するためのマークアップ言語です。マークアップ言語は、Webページに記載される文書の構造をコンピュータが理解できるように意味づけするためのものです。

文書構造とは、意味づけされた「章・節・項」の見出しや段落のことを指します。HTMLは文書構造を表現するための言語であり、文書の構造をコンピュータが理解できるように意味づけする役割を果たします。例えば、日本語の文章であれば「起承転結」といったような区切りがありますが、このような箇所をコンピュータに理解させることができます。

ヒトは文章を読むことで、「起承転結」がある程度理解できると思いますが、コンピュータはこれを完全に理解することはできません。実際にはHTMLは「起承転結」というものではなく、「章・節・項」の見出しや段落などの意味づけをします。このように意味づけされた「章・節・項」や「見出しや段落」のことを文書構造と呼びます。

HTMLの書式

HTMLタグとは？

文書を意味付けするために使用する印のことをHTMLタグと呼びます。HTML文書は、タグで意味付けされた要素の集まりで構成されています。サンプルのソースコードを見て、どのように記述されているか確認しましょう。

山かっこで囲われた部分はHTMLタグです。このサンプルでは文章が少ないため、ほとんどがHTMLタグになっています。HTMLドキュメントは、どんなに短い内容であっても、最低限このような書式が必要です。これをHTMLの雛形と呼びます。雛形を書かずに文章のみを書いてブラウザに表示することはできますが、これはHTMLが表示されているというよりも、ただのテキストファイルが表示されているだけです。したがって、HTML文書には雛形が必要であり、その中身は、HTMLタグで意味づけされた要素の集まりなのです。

要素の構造

要素は3つのパーツで構成されています。

開始タグ

要素の意味づけをするアルファベット（今回はh1）を「<」と「>」で囲んだものです。これによって要素の開始を示します。

中身

タグで意味付けする対象のことです。

終了タグ

開始タグのアルファベット（今回はh1）の前に「/」（スラッシュ）が入ったもの。要素の終了を示す。

山かっこで囲われたアルファベットh1の部分に意味があります。終了タグのアルファベットはスラッシュで始まります。この間に挟まれた部分が中身になります。タグで意味づけをする対象の文章のことです。開始タグ、中身、終了タグ全体のことを要素またはElementと呼びます。

実は、中身を必要としないタグもあります。例えば、imgタグです。画像を表示するためのタグであり、開始タグと終了タグの間に文章を書く必要はありません。中身がないため、終了タグを書かなくても良いことになっています。

HTMLタグの属性

imgタグを例に、開始タグの中の書式についてもう少し詳しく解説していきたいと思います。

犬の写真を表示したい場合、このように犬の写真のファイル名を記述します。は属性と呼ばれ、ソース属性と読みます。イコールの後ろに指定する部分を値と呼びます。

属性とは、

要素を補足するもの

htmlタグだけでは意味が成り立たないような時に使います。開始タグの中のタグ名の後ろに書きます。この場合だとi・m・gの後ろに書きます。スペースをいれてと書いていきます。

どんな属性が使えるかはタグによって異なる

複数指定できる

複数の属性を指定する場合は、属性=値、スペース、属性=値のように書きましょう。

値がない属性も存在する

属性のみを指定することに意味があるので、="値"の部分を省略しても構いません（例えば属性を指定した場合は要素が非表示になります）。

HTMLの構造

HTML文書は以下の4つの構造に分かれます。

DOCTYPE宣言

この文書はHTML文書であることを示しています（使用するHTMLのバージョンによって表記が変わります）。ファイルの先頭に書く必要があります。HTML5の場合は、と指定します。

html要素

文書の中身を書いていきます。基点（ルート）となる要素です。html開始タグと終了タグの間に、head要素、body要素を書いていきます。

head要素

文書に関する付加的な情報を書きます。例えば、titleや使用する文字コードや文書の概要、著者などです。人が読むためのものではなく機械が読むためのものを記述します。

body要素

本文にあたる部分です。ブラウザに表示される箇所になります。

どのように書くかを確認してみましょう。

サンプルコード

DOCTYPE宣言は先頭に置かれ、html要素は文書の始まりと終わりを表します。開始タグと終了タグの中に文書の内容を書きます。前半にはhead要素、後半にはbody要素を記述します。この例では、head要素内はmetaタグで、文字コードとしてUTF-8を使用していることを示し、titleタグで文書のタイトルを記述しています。body要素内は、簡単なサンプルとして1行の文章がpタグで囲まれています。pタグは段落を意味し、1行でもpタグで囲まれていると段落であることが伝わります。

それでは、サンプルをテキストエディタで記述していきましょう。後ほど各HTMLタグの意味について解説しますので、ここではHTMLの構造に慣れることに集中しましょう。

要素の記述ルール