HTMLの基本2（要素・属性・属性値）

6661 ワード
HTML 属性値 基礎 属性 要素 HTML テキストリンク

HTMLの記述の仕方

HTMLは要素をタグで書きます。
タグとは、

<html>

の様に、<>で囲まれた文字の事です。
タグには開始タグと終了タグというものがあります。

<div>   開始タグ
</div>  終了タグ

上記の様に表現します。
終了タグには < の後に / を入力するところが、開始タグと違うところです。
終了タグが無いものもあります。

次にHTMLを成立させるために必須なタグを紹介します。

<!DOCTYPE html>　（ドックタイプ　エイチティーエムエル）

<!DOCTYPE html>

上記の様に記述します。
DOCTYPE　は　Document Type　（ドキュメントタイプ）の略で、
このコードはHTMLで書かれていることを示しています。
必須タグです。

＜html＞　（ＨＴＭＬタグ）

html タグは、開始タグと終了タグがあります。

<!DOCTYPE html>
<html>
</html>

html言語でどこからどこまで記述を行っているのかを示しています。
必須タグです。

　＜head＞タグ　（ヘッドタグ）

headタグは、実際にブラウザに表示される情報を記述する部分ではなく、
関係するファイル、CSSやJabaScriptといったデータとhtml文章を連携させるための情報を記述したり、
記述する文字コードの種類を指定するなどの情報を開始タグと終了タグの間に記述します。
必須タグです。

<!DOCTYPE html>
<html>
  <head>
  </head>
</html>

の様に記述し、htmlの開始タグと終了タグに挟まれるような形で記述します。
この場合、htmlタグはheadタグの親要素という関係になります。
反対に、headタグはhtmlタグの子要素という関係になります。

インデント

子要素は親要素よりも右にずらして記述します。
そうしなくても実際にブラウザでの表示のされ方は変わりませんが、
コードの記述が長くなってきたり、親要素、子要素、孫要素など
要素同士の階層が複雑になってくる場合は、このように右にずらして記述しないと、
コードを書いている自分自身も読み取りにくくなってしまうため、
可読性を上げるために右にずらしています。
この右にずらすことを"インデント"と言います。

【例】

<!DOCTYPE html>
<html>
  <head>
    <title>例えば、このタイトル要素はhtml要素の子要素の子要素（孫要素）となる</title>
  </head>
</html>

＜body＞　（ボディータグ）

body タグはhtmlタグの子要素、headタグと同じ階層に記述します。
bodyタグは、実際にブラウザ上に表示される情報を記述する場所です。
開始タグと終了タグの間に、文字情報、画像、リンク、フォームなどの情報を記述していきます。
必須タグです。

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

＜title＞ (タイトルタグ）

headタグ内に記述する要素です。
タイトルタグは開始タグと終了タグの間にブラウザのタブに表示される文字を設定することができます。
タイトルタグの文字列は、検索などでもヒットするので重要な要素です。

<!DOCTYPE html>
<html>
  <head>
    <title>ここにタイトルを記入すると...</title>
    <meta charset="utf-8">
  </head>
  <body>
  </body>
</html>

上記の様にタイトル要素を設定すると、

このようにブラウザのタブにタイトルが表示されるようになります。

＜meta charset="utf-8"＞　（メタタグ）（キャラセット属性）（属性値はutf-8）

メタ要素は、文字コードの種類などを宣言できる要素です。
charset の部分は属性と言います。
それに続く、="utf-8" の　utf-8　の部分は属性値と言います。
「meta要素のcharset属性はutf-8にします。」という意味です。
utf-8は文字コードの種類の事です。
2021年現在はutf-8を使用することを強く推奨されています。
他の文字コードCESU-8, UTF-7, BOCU-1, SCSU等を使用すると、
クロスサイトスクリプティング攻撃を受けやすくなります。
簡単なハッキングのようなもので、サイトを利用した人の情報が漏洩するなどの被害につながる心配があるため、
注意が必要です。

詳しくはこちらを見てください。

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
  </head>
  <body>
  </body>
</html>

以上が、HTMLの必須タグの紹介となります。

要素・属性・属性値

要素とは、今まで説明してきたようなものです。
例えば、bodyに画像を読み込みたい場合は以下の様に記述することができます。

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
  </head>
  <body>
　　<img src="sample.png">
  </body>
</html>

img　が要素　イメージタグです。
src　が属性　ソース属性（画像データの場所は・・・と言っています。）
="sample.png" のダブルクォーテーション " に挟まれた文字列が属性値となり、実際のファイルの場所をパスで示しています。

詳しくは次回以降にお伝えします。

　次回予告

次回からは、実際に文字や画像をbody内に記述し、ブラウザに表示させていきます。