私たちが普段インターネットブラウザで見ているものは.htmlという拡張子のついたファイルになります。.htmlファイルは私たちが普段目にする文章とは異なる、特殊な構文で文章を構成しており、それらについて紹介していきます。
HTMLファイルを作成
まずは任意の場所へ、拡張子.htmlのファイルを作成し、テキストエディタで開きましょう。
エディタはVSCodeがオススメです！VSCodeを使っている場合、!を入力後、Tabするだけで以下のようなテンプレートが出現します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- ここに記述していきます -->
</body>
</html>何やら呪文めいた物が沢山出てきましたが、今はスルーしましょう(笑)
とりあえず一旦、2行目のlang="en"をlang="ja"に変えておきましょう。
<!DOCTYPE html>
<html lang="ja"><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- ここに記述していきます -->
</body>
</html>これは、言語指定を英語から日本語へ変えるものです。
この後に紹介するものは<body>～</body>の中にある
<!-- ここに記述していきます -->の箇所へ書いて見てください。
この部分にHTMLの構文ルールで文章を記述していき、このファイルをブラウザで開くと、ブラウザが私たちが見やすい形にHTMLを変換してくれます。
HTML要素
HTMLは、要素というモノの集まりで構成されます。例えば今目にしている文章はHTMLでは次のようになります。
<p>HTMLは、要素というものの集まりで構成されます。</p>文章を開始タグ<p>、終了タグ</p>で囲っています。このタグを付ける事をマークアップと呼び、これが要素となります。
要素は複数種類があり、<p>の場合は段落を表す要素となります。
他に、見出しを表す要素は
<h1>見出し１</h1>テキストの強調要素は
<em>強調</em>などとなっていて、それぞれの要素に段落、見出し等の意味付けがされており、ブラウザで表示したときに見た目も異なります。(先の<body>内にコピペしてブラウザで表示してみてください)
要素の中に、子要素を含めることもできます。
<ul>
<li>リスト１</li>
<li>リスト２</li>
<li>リスト３</li>
</ul>多くのHTML要素は終了タグがありますが、終了タグの無い要素もあります。
<img src="./image.png">属性
要素には、要素そのものの動作を指定したり、スタイルを指定する為に、属性を与えることができます。
要素によって異なる属性と、全ての要素に共通の属性(グローバル属性)が存在します。
要素別に異なる属性の例としては、リンクを貼る為の<a>要素に、href属性を追加し、リンク先を入れたり、
<a href="httｓ://www.google.com/">google</a>画像のソースを指定するには<img>要素のsrc属性を指定したりします。
<img src="./image.png">全要素に共通の属性として、代表的なものの一つがクラスです。
<p class="myClass">クラスを指定します</p>また、代表的なものとしてもう一つ、IDがあります。
<p id="myId">IDを指定します</p>クラスとIDはどちらも、その属性を指定された要素に対してのスタイルや動作を決めるものです。(この後のCSS等の記事で紹介します。)
ちなみに同名のクラスは同じページに複数存在しても良いですが、IDはページに一つのみというルールがあります。
特殊な文字を表現する(エスケープ)
HTMLにおいて、不等号< >や&等の記号を表示したいとき、これらは開始タグや終了タグ等の意味合いを持つので、そのままタグでマークアップするだけではブラウザは混乱してまともに表示できません。
そのため、タグ内で次のように記述する必要があります。
- "<" →
< - ">" →
> - "&" →
& - "©" →
© - "®" →
® - "¥" →
¥
<p>例 ©katsu</p>©katsu
コメントを入れる
HTMLファイル上に<!-- -->と記述するとブラウザ上では表示されないコメントを残すことができます。<!--から-->までの間がコメントとして扱われます。
<!-- コメント： この部分は後で実装予定 -->
<div class="myClass">
</div>ブロック要素とインライン要素
HTMLの各要素はデフォルトのスタイルからブロック要素とインライン要素に大別できます。
※HTML5ではこのような分け方とはなっていないが、今後のスタイル設定上、重要な概念です
二つの主な違いは次の通りです。
ブロック要素は
- 使用可能な幅いっぱいに広がる
- 前後に改行が入る
インライン要素は
- 幅はタグの中に入るコンテンツによって決まる
- 前後に改行は入らない…インライン要素を続けると横並びになる
- 幅と高さを指定できない
- marginは左右のみ指定可能
- paddingは上下左右指定できるが他の要素とかぶってしまう
CSSの話に入ってしまうので詳細はCSS編で…
次の記事
要素の種類について紹介します！
