HTML文書の基本構成

HTML

HTML文書に記述できる要素は色々ありますが、いきなり全部は覚えられません。 ますは最低限記述しなければならない事を覚えて基本構成を確認しましょう。

HTML文書には必ず記述しなければならない、約束事のような要素があります。 HTML文書として成立するために必要な要素とも言えます。 まずは基本構成から学びましょう。

HTML文章の基本構成

DOCTYPE宣言

「この文章はHTML5で記述してます」って宣言を最初に書きます。 まずはファイルの先頭で宣言しましょう。

HTML要素

DCOTYPE宣言の次にくる、HTML文書で最上位(ルート)の要素であるHTML要素を記述します。 このHTMLタグで囲われている範囲がHTML文書になります。 HTML要素にはlang属性を指定し、何語で書かれているか明示することが推奨されています。 日本語サイトなら「ja」英語サイトなら「en」です。



head要素

HTML要素内にhead要素を記入します。head要素にはHTML文書の文字コード、呼び出す外部ファイルのパス、検索ワードなどのメタ情報(検索エンジンやブラウザなどのコンピュータへ向けた情報)を記述する場所です。 head要素内にはウェブページのタイトルを表すtitle要素の記述が必須なので、title要素も記入ておきましょう。



<title>ウェブページのタイトル</title>


body要素

head要素の後にbody要素を記入します。 body要素にはページに表示させるテキストや画像などをマークアップしたものを書いていきます。

body要素内の記述は必須という訳ではありませんが、流石に何も書かないと何も表示されないので今回は一言だけ書いておきます。


<title>ウェブページのタイトル</title>


<p>テキスト文章</p>


Html文書に最低限必要な要素はたったのこれだけです。 このソースもHTML文書として成立しており、ウェブにアップロードすれば立派なウェブページです。

ちなみにこのソースを表示すると以下のようになります。何とも殺風景ですね。

sample

全てのウェブサイトはこのようなソースを記述して製作されています。 ソースは見ることができるので、色々なページのソースを覗いてみるのも面白いかもしれません。

見る方法はブラウザによって違いますが、例えばGoogleChromeであれば右クリック→ページのソースを表示でソースが表示されます。

eyecatch

要素と属性

eyecatch

HTMLとは

HTMLの記事

eyecatch

セクションとアウトライン

eyecatch

リスト要素のマークアップ

eyecatch

要素と属性

eyecatch

属性セレクタで条件下の属性のスタイルを変える

eyecatch

要素の階層構造

eyecatch

見出し要素(h1~h6)の使い方

HTMLの記事一覧HOME