タグのしくみ【HTML】


さぁ、はじめよう!!

これは、ある日気の向くままに「WEBサイト」を立ち上げてしまった初心者が、Web制作の基本も理解していなければ、この先もあまり覚えそうにないということで、忘れてもいいように少しずつ書き残しているものです。

 

 

 

 

基本的な書式

HTMLの基本は、文書内に「目印」を記述して範囲指定をすることで、「ここからここまでが『見出し』」「ここからここまでが『段落』」といったように、それぞれ役割をもった「要素」となり、HTML文書の内容に応じて意味付け(マークアップ)をしながら範囲を区切り、それらの要素の集合体が1つのWebページを形成している。

 

 

  例文  

要素名
開始タグ・終了タグともに、不等号(< >)の中に内容に意味を与える「要素名」を記述する。

 

 

 文書に意味を与える(要素名) 

 

    

ここから見出し
要素名
ここまで見出し
ここから段落

開始タグ・終了タグともに、不等号(< >)の中に内容に意味を与える「要素名」を記述する。
ここまで段落

 

 

 要素名を英語化する 

 

    

<heading1>
要素名
</heading1>
<paragrarh>
開始タグ・終了タグともに、不等号(< >)の中に内容に意味を与える「要素名」を記述する。
</paragrarh>

 

 

 さらに要素名を略字化する 

 

    

<h1>
要素名
</1>
<p>
開始タグ・終了タグともに、不等号(< >)の中に内容に意味を与える「要素名」を記述する。
</p>

ブラウザで確認

 

 

Tag タグ

意味付けしたい部分の始まりと終わりに記述する目印、小なり記号(<)と大なり記号(>)で囲まれた部分を指し、開始タグと終了タグを合わせて「タグ」という。

 

    

<開始タグ>タグとは</終了タグ>

HTML
<p>タグとは</p>

 

 

開始タグ

要素名を不等号(< >)で囲み、内容の意味付けを開始しする。

 

    

<開始タグ>開始タグとは</終了タグ>

HTML
<p>開始タグとは</p>

 

 

要素によっては、属性を含めて記述することができる。

 

    

<開始タグ 属性名=”属性値”>開始タグに属性を含める</終了タグ>

HTML
<p align=”left”>開始タグに属性を含める</p>

 

 

終了タグ

要素名の前にスラッシュ(/)を入力して不等号(< >)で囲み、内容の意味付けを終了する。

 

    

<開始タグ>終了タグとは</終了タグ>

HTML
<p>終了タグとは</p>

 

 

Element 要素

開始タグ <p> と終了タグ </p> に囲まれた範囲のこと。

 

要素名

開始タグ・終了タグともに、不等号(< >)の中に内容に意味を与える「要素名」を記述する。

 

    

<要素名>終了タグとは</要素名>

HTML
<p>終了タグとは</p>

 

 

ほとんどのタグは、開始タグと終了タグが対になっているので、開始タグの要素名が段落を示す「p」だった場合、終了タグの要素名も「p」と一致していなければならない。

HTMLでは大文字・小文字のどちらで記述しても問題ないが、XHTMLでは必ず小文字で記述する。

 

    

HTML 5
<img>、<Img>、<IMG>のどれで記述しても有効。

XHTML
<IMG> や <Img> で記述されていると、<img> とは別の要素として扱われしまうので、要素名と属性名はすべて小文字で記述しなければいけない。

 

 

要素の内容

開始タグと終了タグに囲まれた部分を指し、ブラウザに表示されるテキストなどを記述する。

 

 

Attribute 属性

HTMLの要素には、「属性(属性名=”属性値”)」をつけることができ、要素の意味を具体的にしたり、機能を与えたりなど、要素の役割を細かく指定することができる。

各要素に共通な属性もあれば、特定の要素にしか存在しない属性もある。

 

属性名・属性値

タグに属性を加える場合、属性の名前と属性の値を組み合わせて記述し、属性値には何らかの文字や数値などの適正な「値」を指定する必要がある。

 

    

<属性名=“属性値”>テキスト</終了タグ>

HTML
<a href=“https://d-make.spark-a.com/”>STEP UP</a>

表示
STEP UP

 

 

リンクを指定するタグの場合、開始タグや終了タグを入力しただけでは機能しない。上の例のように、「属性」を記述し「値」として「リンク先」を指定しないと、リンクを貼ることはできない。

属性を記述するときは、開始タグの要素名の後ろに「半角スペース」で区切り、その後に「属性名」を記述し、その後に 「=(イコール)」を必ず付け、は「 ‘(シングルクォーテーション)」または「 “(ダブルクォーテーション)」の間に「属性値」を記述する。

 

 

属性値に、英数字( a-z , A-Z , 0-9 )とピリオド( . )、コロン( : )、アンダースコア( _ )、ハイフン( – )以外の文字を含む場合にのみ、属性値を「 ‘(シングルクォーテーション)」または「 “(ダブルクォーテーション)」の引用符で必ず囲まなくてはならないが、一定の条件を満たしていれば、属性値の引用符を省略できる場合や属性値そのものを省略できる場合もあるようだ。

ひとつの要素の中に複数の属性を指定する場合、それぞれの属性を半角スペースで区切り記述することができる。この時、属性の順序は特に問わない。

 

 

 

 

最後まで読んでくれてありがとうございました。
それでは、see you next time.

カテゴリーHTML

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA