webmanab.html

html5の基礎の基本的な書式をちゃんと固めておくためのメモ -『HTML5』

table of contents
ー

    HTMLをさわるようになって、技術書などで１番はじめにさらっと読み飛ばしていそうな「基礎の基礎な」ところを振り返ってみたら、きっちりと細かいところまで理解や解釈がおよんでいない箇所が多々ありました。
    HTML5の基本的な書式について、自分なりにまとめておきたいなとおもいます。

    基本の書式と名称

    HTMLはテキストのコンテンツをタグで囲って、その部分が文書の構成要素として「なに」を表すかを示す言語です。文書の構成要素を要素(element)と呼び、要素の前に開始タグ「<ex>」、要素の後には終了タグ「</ex>」を置きます。

    html

    
<html>lorem</html>

    タグの省略

    HTML5の要素には終了タグのみ、または開始タグ終了タグの両方を省略できるものがあります。
    ただし省略可能の要素には条件がある場合もあります。

    空要素

    要素にはタグで囲うコンテンツがなく、その存在を開始タグだけで示す「空要素」があります。
    空要素には終了タグを指定できません。
    またHTML5では、空要素タグ内部の末尾に「/」を入れることができます。

    
<img>
<br />

    属性

    要素の開始タグの要素名の後、空白文字で区切って属性(attribute)を記述できます。
    順不同で複数指定することができ、属性名(name)と属性値(value)を指定します。
    仕様書で定義されている場合を除き、値の文字に制限はなく、空にすることもできます。

    html

    
<ex name=\"value\">
<img src=\"zoro.jpg\" alt=\"サンジといつもどうりもめているゾロ\">

    #### memo

    「＝」の前後には空白文字を挿入できます。
    属性値を囲う「\’ \’」「\” \”」はその属性値に「=」「\”」「\’」「<」「>」を含んでいない場合、または属性値が空でない場合は省略できます。

    html

    
<ex name="value">
<ex name=value>
<ex name="value">

    DOCTYPE宣言

    HTML文書の先頭には、DOCTYPE宣言(文書型宣言)を配置します。
    実際は不要ですが、ブラウザの表示モードを「標準モード」にするために記述します。

    html

    
<!DOCTYPE html>

    標準モード

    ブラウザは昔々のテーブルレイアウトのページを表示させるための「後方互換モード」と、標準仕様に準拠したページを表示させる「標準モード」という表示モードをもっています。
    「後方互換モード」では昔のブラウザの独自の仕様に合わせた表示を行うので、HTML5で書かれた文書を正しく表示できません。

    その２つのモードを切り替えるために「DOCTYPE宣言」を記述しています。
    「DOCTYPE宣言」がないと、無条件に「後方互換モード」と認識してしまいます。
    それを防ぐために、最低限の短い「DOCTYPE宣言」を行っています。

    memo

    「DOCTYPE宣言」は大文字小文字を問いません。また、「html」の前後に空白を入れることができます。
    ただし、「<!DOCTYPE」までは、続けて記述する必要があります。

    html

    
<!DOCTYPE HTML>
<!DOCTYPE html >
<!doctype   HTML>

    コメント

    ソースコードの中に書き込んでおくことのできるメモとして「コメント」を記述します。
    「」で囲んだ範囲がHTMLのコメントになります。

    html

    
<!-- ここにコメント -->

    memo

    コメントの内部には連続した「–」ハイフンを入れることができません。
    コメントのテキストは「>」「->」で開始することはできず、「-」で終わることができません。

    おわります。

    html5の基礎の基本的な書式をちゃんと固めておくためのメモ -『HTML5』のアイキャッチ画像

    share
    ー

    tag
    ー

    related
    ー