LoginSignup
1
1

More than 1 year has passed since last update.

HTMLの基本

Last updated at Posted at 2021-08-10

1.基本構文

p要素
<p>初めてのHTML</p>

①開始タグ
②コンテンツ(情報の中身)
③終了タグ
④要素

2.基本構造

Qiita

引用元:https://mdstage.com/html-css/website-practice/html-structure

DOCTYPE宣言

文章の宣言をするメタ情報。HTML5であれば、
<!DOCTYPE html>
と記述する。

html要素

html要素は、この文書がHTMLの文書であることを表す。
ちなみに、「lang=”ja”」の”ja”は日本語で書かれた文書であることを表す。

head要素

head要素にはその文書のメタデータを記述する。
例えば、

でその文書のタイトルを、
index.html
<description></description>

でその文書の要約を定義することができる。

body要素

body要素は、その文書の本文を表す。
このbody要素で囲まれた領域がWebページとして表示される。

3.Webページの基本構造

Qiita

引用元:https://mdstage.com/html-css/website-practice/html-structure

ヘッダー(header)

ヘッダーには主にナビゲーションメニュー(各ページへのリンク)やロゴなどの企業情報など、
Webページのイントロダクションを表示し、

index.html
<header></header>

で囲う。
ちなみに、

index.html
<head>

とは違うので注意。

コンテンツ(contents)

コンテンツとは、Webページのコンテンツ(本文)にあたる。
そのページの独自の内容を記載する。特定のタグで囲う必要は無い。

サイドバー(sidebar)

サイドバーとは、コンテンツの左側もしくは右側に表示される各ページ共通の内容。
トップページではサイドバーを表示しないなど、サイドバーを使用しないWebサイトもある。

フッター(footer)

フッターとは、コンテンツに関する情報のことで、著者名や連絡先などを表示する。

まとめ

HTMLファイルはルールに則って記述する必要がある。

  • 「文書に関する情報」はの中に、「Webサイトで表示したいコンテンツ」はの中に。
  • Webページの基本構造は、header、contents、sidebar、footerで構成されている。

4.要素の入れ子

Qiita

引用元:https://webliker.info/26463/

5.HTMLのドキュメントツリー

Qiita

引用元:http://memopad.bitter.jp/w3c/htmldom/dom_nodetree.html

6.あとがき

次項:HTMLの主なタグと用途(1) 「改行」「区切り」「リスト」「説明リスト」「Emmet省略記号」へ続く。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1