HTML - mgn901 / めがね901

HTML

HTMLとは何か

HTMLはHyperText Markup Languageの略で、Web上でやり取りされる文書、Webページを記述するためのマークアップ言語です。

マークアップ言語ということは、文章に印をつけたり、文章を構造化したりするための言語であるということです。

一般的にプログラミング言語とされているものとは目的が異なります。

コンピュータは文章の見た目から文章の構造を理解することが難しいので、文章の構造をコンピュータに伝えるためにはマークアップ言語等を用いる必要があります。HTMLも、文章の構造をコンピュータに伝え、ハイパーテキストを実現することを目的の一つとしています。

HTML文書をブラウザで表示するときの見た目を変えるには、CSSを使います。

タグと要素

HTMLでは、文章の一部をタグという特殊な文字列で囲んで要素をつくり、要素を組み合わせることで文章構造を表現します。

例えば、上のHTMLについての説明を2つの段落として表現する場合、HTMLでは次のように表現します。

code:html

HTMLはHyperText Markup Languageの略で、Web上でやり取りされる文書、Webページを記述するためのマークアップ言語です。

マークアップ言語ということは、文章に印をつけたり、文章を構造化したりするための言語であるということです。一般的にプログラミング言語とされているものとは目的が異なります。

からまでが一つのp要素（段落を表現するための要素）であり、その始まりであるを開始タグ、終わりであるを終了タグといいます。

開始タグと終了タグで文字列を囲むことで、一つの要素を実現します。

要素の中に要素を含めることもできます。ここでは、p要素の中にハイパーリンクを表現するためのa要素を含めています。

code:html

HTMLはHyperText Markup Languageの略で、Web上でやり取りされる文書、Webページを記述するための<a href="https://scrapbox.io/mgn901/マークアップ言語">マークアップ言語</a>です。

要素には属性を設定できます。

直前の例のa要素の開始タグに注目してください。

属性は開始タグの要素名の後ろの部分に記述します。

属性は属性名="属性値"という形式で記述します。

=の前後の空白は不要です。

属性は属性名a="属性値1" 属性名b="属性値2"のように、空白で区切って複数記述することができます。

要素の種類ごとに設定できる属性は異なります。

HTMLの構成

HTML文書全体は次のような構成をとります。要するに、文書全体が一つのhtml要素であり、その中にhead要素とbody要素が順番に一つずつ含まれています。

code:html

<html>

<head>

</head>

<body>

</body>

</html>

head要素

文書そのものに関する情報を表現するための要素を記述する場所です。

body要素

本文を記述する場所です。

重要なHTML要素

30分間HTML入門 -- ごく簡単なHTMLの説明を読んでください。文章を構造化するための要素や、ハイパーテキストを実現するための要素のうち、重要なものが16種類示されています。

a要素: ハイパーリンク

HTMLは、Webページ同士を行き来するための手段として、ハイパーリンクを用意しています。

href属性にURLを設定することで、要素をクリックした際にそのURLにアクセスすることができるようになります。

クリックした際、ブラウザはhref属性に設定したURLに対するGETリクエストを送信します。

HTMLのフォーム要素

参考にした資料

神崎正英「基本的なフォーム -- ごく簡単なHTMLの説明」

mozilla.org contributors「初めてのフォーム - ウェブ開発を学ぶ | MDN」

WebページからHTTPを通してWebサーバにデータを送信することができますが、これはフォームを用いて実現することができます。

フォームは、form要素の中に、ユーザによるデータの入力を受け付けるための要素や、Webサーバにデータを送信する処理の呼び出しを受け付けるための要素を含めることで実現します。

Webサーバにデータを送信する際には、どのように、どこに、何を送るのかを示す必要があります。これらの情報はフォームを実現する要素の属性値として設定します。

どのように（HTTPリクエストのメソッド）: form要素のmethod属性

どこに（HTTPリクエストの送信先のURL）: form要素のaction属性

何を（HTTPリクエストのボディ）: input要素

form要素

その要素全体がフォームであることを示します。

Webサーバにデータを送信する際はHTTPを用いますが、HTTPリクエストを送る際はメソッドの種類と送信先のURLを指定する必要があります。メソッドの種類はmethod属性で、送信先のURLはaction属性で指定します。

input要素: データの入力を受け付ける要素

データの入力や送信処理の呼び出しを受け付けるための要素です。

type属性の設定値を変えることで、見た目や入力可能なもの、挙動などを変えることができます。

text: 文字列を入力できる入力欄になります。

submit: 送信ボタンになります。

データは名前と値のペアとして送信しますので、どの要素がどの名前のデータの入力欄になるのかをHTML側で指定する必要があります。これはname属性を用いて指定します。

type="submit"が設定されているinput要素にはname属性は不要です。

参考にした資料

神崎正英「ごく簡単なHTMLの説明」

神崎正英「30分間HTML入門 -- ごく簡単なHTMLの説明」

mozilla.org contributors「<html>: HTML 文書 / ルート要素 - HTML: ハイパーテキストマークアップ言語 | MDN」