Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What is going on with this article?
@TOMARU4400

HTML基本構造

HTMLの基本構造を解説します。

基本的には以下のような構造になっているはずです。

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

<!DOCTYPE html>

<!DOCTYPE html>は、文書がHTML5で作成されたものであることを宣言しています。これは要素ではありません。

html要素

HTML文書のルートを表します。全ての要素はhtml要素の中に記述します。

lang属性は要素内で使用されている言語(英語、日本語など)を指定します。
「ja」は日本語を意味する値で、html要素内で使われている言語が日本語という意味になります。
ちなみに英語なら「en」ドイツ語なら「de」というように何語かによって決められています。

head要素

HTML文書自体の情報(ヘッダ)を表し、html要素の最初の要素として使用します。

例えば、head要素の中にtitle要素を記述することで、HTML文章のタイトルを設定できます。その他にmeta要素などをヘッダ情報として記述でき、詳細は後述いたします。

meta要素

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

meta要素を理解するには様々な知識が必要であり、おそらく現時点では理解が難しいと思いますので、はHTML文章に必要なおまじないぐらいに、現時点では覚えておいてください。

title要素

HTML文書の表題を表します。head要素の中でしか使用できず、HTML文書の中に1つしか入れてはいけません。

title要素の内容は、ブラウザのタイトルバーに表示されます。

body要素

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

HTMLの基本構造まとめ

DOCTYPE宣言
HTMLのバージョン情報を宣言する。

html要素
HTML文書のルートを表す。全ての要素はhtml要素の中に記述する。

head要素
HTML文書自体の情報(ヘッダ)を表す。html要素の最初の要素として記述する。

meta要素
文章に関する情報(メタデータ)を表す。

title要素
HTML文書の表題を表す。ブラウザのタイトルバーに要素の内容が表示される。

body要素
文章の内容を記述する領域を表す。

0
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
TOMARU4400
知識を定着させる為、学び直した事などを記事に残しておこうと思います。誰かのお役に立てれば幸いです。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
0
Help us understand the problem. What is going on with this article?