やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

📌 ？
トップ > HTML > ゼロからはじめるHTML

ゼロからはじめるHTML

HTML

　WEB開発における一番基礎となるものがHTMLである。

情報源

HTMLとは？

テキストファイルである

　HTMLは拡張子.htmlのテキストファイルである。内容は以下のようなもの。

index.html

<h1>見出し</h1>
<p>本文。パラグラフ。</p>

マークアップ言語である

　HTMLはマークアップ言語である。テキストに意味をつけるための言語だ。たとえば先述のファイルでいうと、文書の構造をマークアップしている。見出しというテキストを<h1>タグで囲むことで、文書の見出しであると定義している。また、<p>タグで囲むことで、囲まれたテキスト本文。パラグラフが文書における段落であることを示す。

<h1>見出し</h1>
<p>本文。パラグラフ。</p>

マークアップ言語（SGML, XML, HTML）

　文書に意味をもたせたくてSGMLが開発された。しかしあまりに多機能すぎて実装が困難だった。そこで簡略＆改良したXMLを開発した。また、SGMLをもとにして文書の構造や表示を定義するためのHTMLも開発された。

　ようするにマークアップ言語は、テキストによりテキストの内容を意味づけするためのメタ言語である。

文書構造

　SGML, XML, HTMLマークアップ言語の文書はつぎのような部位の組合せで成り立っている。

和名 英名
要素 Element
属性 Attribute

　要素のなかに別の要素をいれることができる。要素の入れ子によって文書の構造を示すことができる。たとえば以下のように。

<section>
    <h1>見出し</h1>
    <p>本文。</p>
</section>

文字種

　要素名と属性名は、大文字と小文字のどちらを使ってもよい。

　ちなみに、すでに廃れたXHTMLでは小文字に統一されていた。その名残りで、今のHTMLも小文字で書かれている。大文字で書かれているのは、ほとんど見たことがない。

要素

　要素は基本的に以下のような書式である。

<要素名></要素名>

　HTMLの場合、要素の中にはいくつか閉じタグを省略できるものがある。

<要素名>

　古きゆかしいXHTMLでは閉じタグを省略するとき、つぎのような記法のものがある。

<要素名 />

　どのタグがどの記法なのか。覚えるのが面倒くさい。こういうときHTMLテンプレートエンジンのpugを使いたくなる。

属性

　要素には属性を付与することができる。

<要素名 属性="属性値"></要素名>

　HTML構文 属性によると、属性値は引用符、二重引用符、囲まない、の３タイプで宣言できるらしい。一般的には二重引用符で囲むコードをよくみる。

　引用符を省略できるならしたいと思うが、逆に面倒くさいことになる。たとえばclass="a b c"のように複数の値をスペース区切りにする書き方をするとき。引用符を省略するとスペースのせいでbが属性キーと解釈されてしまう。なので引用符は省略できない。引用符が省略できるときと、できないときがある。その両方を都度判断して使い分けるのは面倒くさい。なので、属性値は必ず引用符で囲うほうが楽。

　引用符は二重のほうを使うほうがよい。世間一般に出回っているコードがそうだから。おそらく英語圏ではシングルクォートがアポストロフィとして使用されることがあるため、メタ文字としての文字と、テキストとしての文字の両方で使われてしまう。エスケープが面倒だから、ダブルクォート（二重引用符）のほうを使うのが一般的なのだろう。

　属性の値が真偽値のときのみ、値を省略してキー名だけを書くことで、値がtrueであることを示すことができる。

<要素名 属性></要素名>

　disabled, checkedなどの過去分詞形になっている属性がそれだ。

HTMLを書いてみる

ファイル

拡張子

　.htmlが一般的だが、.htmでもいい。個人的には.htmlに統一したほうがよいと思っている。

　はるか昔、拡張子は3文字だけという慣例があった。そのなごりで.htmという拡張子もHTMLだと解釈する慣例があるだけ。しかしその後、拡張子は増える一方なので、3文字縛りだと一瞬で飽和してしまった。今では大体3〜4字だが、.mdや.xなどさまざまな字数の拡張子がある。

index.html

<h1>見出し</h1>
<p>本文。パラグラフ。</p>

ファイル名

　index.htmlが一般的。フレームワークを使うと大抵その名前がエントリポイントになる。HTTPSサーバにアップロードするときも、その名前がエントリポイントになり、トップページとして表示される。URLでドメイン名まで入力すると自動的にindex.htmlを表示する。なのでもう思考停止して決め打ちしたほうがいい。そのくらいindex.htmlはエントリポイントとして利用されている。

DTD

　DTDとは、Document Type Definitionのことで、文書の型を定義する言語である。以下のように書く。

<!ELEMENT 要素名 構成要素>

DOCTYPE

　文書を解析するためのDTDを宣言する要素。HTMLのファイル先頭は必ず以下のように書く。

<!DOCTYPE html>

html, head, body

　HTMLファイルの大枠となる要素。

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
    </body>
</html>

　でも、じつはこのhtml,head,bodyに関してはそのタグ自体を省略できる。なので以下のように書いたのと同じ意味になる。

<!DOCTYPE html>

HTMLを表示する

　ファイラでindex.htmlファイルをダブルクリックする。ブラウザが起動し、表示される。

所感

　超基礎がわかった。ていうか、知ってた。DTDは知らなくてもいいと思う。

対象環境

$ uname -a
Linux raspberrypi 5.10.63-v7l+ #1496 SMP Wed Dec 1 15:58:56 GMT 2021 armv7l GNU/Linux