HTML&CSS辞典 
html要素について知りたい人
html要素について知りたいな!
この記事は上記のような疑問を解消するものとなっています。
- html要素とは?
- html要素の使い方
- 属性の記述
- html要素のサンプルプログラム
HTMLファイルの中にhtml要素、head要素、body要素は必ず記述しなければいけないものです。
中でもhtml要素は文書の基礎となるタグです。
html要素はhtml文書であるということを指定する要素です。
つまり、これからhtmlコードが記述されるよという宣言です。
具体的にはDOCTYPE宣言の次にhtml要素を記述して、html要素の間にhead要素とbody要素を記述します。
そこでこの記事ではhtml要素について詳しく解説していきます。
気になる方は是非最後まで読んで頂ければと思います。
目次
1.html要素とは?
HTML の html要素は HTML 文書において基礎となる要素となっており、ルート要素とも呼ばれています。
つまり、これからhtmlコードが記述されるよという宣言です。
すべての土台となる重要な要素です。
他のすべての要素は、この要素の子孫として配置しないといけません。
2.html要素の使い方
html要素は属性というものを指定できます。
属性は設定を付け加えるというものです。
属性の書き方は以下の通りになります。
<要素名 属性="属性値">- 要素名の後ろに半角スペースを開ける
- 属性の後ろにイコールを付ける
- 属性値はダブルクォーテーションまたはシングルクォーテーションで囲む
html要素ではlang属性で言語を指定することができます。
日本語の場合、「lang=”ja”」と指定します。
<html lang="ja">
・・・・・
</html>上記のように指定することでhtml要素内の言語は日本語ですと指定できます。
他にも以下のような言語を設定することができます。
- 英語：en
- アメリカ英語：en-US
- イギリス英語：en-GB
- スペイン語：es
- フランス語：fr
- ドイツ語：de
- オランダ語：nl
- ポルトガル語：pt
- ポーランド語：pl
- ギリシャ語：el
- ロシア語：ru
- ラテン語：la
- アラビア語：ar
- 中国語：zh
- 韓国語：ko
3.属性の記述
開始タグには要素毎に用意された属性を記述し、様々な設定を指定できます。
属性は以下のように半角スペースで区切り、「属性名=”値”」という形で記述します。
上記では値を「”値”(ダブルクォーテーション)」で囲っていますが、「’値'(シングルクォーテーション)」で囲む、クォーテーションで囲まずに記述することも可能です。
“値”(ダブルクォーテーション)で囲んで記述する場合
<html lang="ja">
・・・・・
</html>‘値'(シングルクォーテーション)で囲んで記述する場合
<html lang='ja'>
・・・・・
</html>クォーテーションで囲まずに記述する場合
<html lang=ja>
・・・・・
</html>4.html要素のサンプルプログラム
それではhtml要素のサンプルプログラムをみていきましょう!
今回はhtml要素にlang属性をつけてみます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>html要素のサンプルプログラム</title>
</head>
<body>
<h1>html要素のサンプルプログラム</h1>
<p>html要素はhtml文書であるということを指定する要素です。</p>
</body>
</html>
DOCTYPE宣言の次にhtml要素を記述して、html要素の間にhead要素とbody要素を記述しています。
これは一例ですが、html要素はすべての土台となる重要な要素です。
「HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方」はHTML5/CSS3を使ってモダンなサイトを制作するためのコーディングテクニックをハンズオン形式で学ぶ本です。
実践的な内容になっているので次のステップに進みたいという方は是非利用してみてはいかがでしょうか!?
HTMLやCSSを利用してWebサイト制作の副業に挑戦してみたいという方はいませんか!?
そんな方に「はじめての副業コース」をオススメします。
なんとHTMLやCSSを学べるだけでなく、案件紹介も行ってくれます!
Webサイト制作で稼ぎたいという方は是非「はじめての副業コース」を受講してみてはいかがでしょうか!?
↓↓↓↓ブログ村に参加しています! 是非、応援クリックお願いします!
