htmlの基本

html

HTML(HyperText Markup Language)は、webページを構成する言語の一つである。コンピュータがその文書の構造を理解することで、検索エンジンがウェブページの構造を把握して解析したり、ブラウザがウェブページ内の各要素の意味を理解して閲覧しやすいように表示することなどが可能になる。

マークアップ

文書の各部分が、どのような役割を持っているのかを示すこと。 例えば、見出し・段落・表・リストなど、文書の中で各部分が果たしている役割が分かるように目印をつける。 こうした見出し・段落・表・リストなどの文書内の各部分を要素(element)と呼ぶ。

HTMLの書き方

■開始タグ〜終了タグで内容を囲む
開始タグ〜終了タグで内容を囲めば、 要素(element)の種類を指定することができる。 一部例外として、pタグやliタグなど、HTMLタグの一部には終了タグを省略しても良いとされているものもある。

ウェブページ内の各部分をどのような要素に割り当てるかによって、 タグの種類を使い分ける。また、タグは入れ子(ネスト)にすることができる。


■属性を指定する
HTMLでは、それぞれタグの種類ごとに指定できる属性の名称とその値が定義されています。 タグに属性を追加することで、要素のサイズや配置などをより詳細に指定できます。

属性を指定する際には、値を引用符("か`)で囲んで指定する。複数の属性を指定する場合には、以下の例のように半角スペースで区切って記述する。属性を記述する順序は問われない。


■要素内容を持たない空要素
HTMLの中には、brタグやimgタグのように、要素内容を持たない空要素(empty element)と呼ばれるものもある。 このような内容を持たない要素には終了タグはない。


htmlの基本構造
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>HTML5</title>
    </head>
    <body>
        文章の内容
    </body>
</html>



■DOCTYPE宣言
DOCTYPEの宣言とは文書がHTMLであり次にはじまるHTML文書(HTMLソース)がどのバージョンを利用して、どのDTD(文書型定義)に従って記述されているかをブラウザに伝えるためのものである。

■html要素
HTML文書のルートを表す。全ての要素はhtml要素の中に記述する必要がある。lang属性は要素内で使用されている言語(英語、日本語など)を指定する。「ja」は日本語を意味する値で、html要素内で使われている言語が日本語という意味になる。

■head要素
HTML文書自体の情報(ヘッダ)を表し、html要素の最初の要素として使用する。head要素の中にtitle要素を記述することで、HTML文章のタイトルを設定する。その他にmeta要素などをヘッダ情報として記載できる。

■metal要素
文章に関する情報(メタデータ)を表す。メタデータとは「情報についての情報」で、例えば文章のタイトルもメタデータの1つである。

■title要素
HTML文書の表題を表す。head要素の中でしか使用できず、HTML文書の中に1つ指定する。title要素の内容は、ブラウザのタイトルバーに表示される。

■body要素
文章の内容を記述する領域を表す。body要素の中は、見出し・段落・ハイパーリンクなど、文章の中身を記述する。

ドキュメントツリー

f:id:wanwan_bowbow_ilovecat:20180728174930p:plain
https://blog.codecamp.jp/html_basic


HTMLは要素の入れ子によって構成されており、これをツリー状に表したものがドキュメントツリーである。ある要素の上位にある要素を親要素、下位にある要素を子要素と呼ぶ。

「titile要素はhead要素の中でしか使用できない」のように、親子関係が必須となっている要素もある。

html文書のインデント

半角2つのスペースでインデントする。インデントにタブやタブとスペースを混合して使用しない。
Googleが推薦するHTMLとCSSのコーディング方法 | 簡単ホームページ作成支援-Detaramehp