HTMLの役割って何?どうやって使うの?HTMLの基礎を徹底的に解説します

 
 
ハム氏
なっちゃそ〜、Webデザインの勉強を始めたらいきなりエイチティーエムエルとかいう横文字が出て来て心折れそうなんだけど助けて。
 
なっちゃそ
折れそうになるよね。わかる。でもHTMLはしっかり概念を理解すればそんなに難しい言語じゃないよ。まずは概念から解説していくね。
 
ハム氏
わかりやすく頼むよ。
 

HTMLの基礎① まずは概念を理解しよう

 

HTML(エイチティーエムエル)とは 「HyperText Markup Language」の略でWebページを作成するために開発された最も基本的なマークアップ言語の1つです。

現在インターネットで公開されているWebサイトのほとんどがこのHTMLで作成されています。
HTMLの仕事は文書をマークアップすることなのですが、それってつまりどういうことかというと、
 
 
  
 
 
例えば、上の図のような文章をWebサイト上で表示させたい場合は、
 
 
「ここは見出しだから見出しっぽく表示してね」
 
「ここは文章だから文章っぽく表示してね」
 
「ここはリストだからリストっぽく表示してね」
 
 
みたいに文書の各部分に目印をつけ、それぞれがサイト内でどのような働きをしているのかブラウザに伝えてそれっぽく表示してもらうという役割をHTMLが担っているってことです。
 
 
 
 
HTMLがないとWebサイトを作ることができないので、「HTMLはWebサイトの基礎でありベース」だと理解していればOKです!
 
 
ハム氏
なるほど。HTMLはサイトを構成する要素に目印をつける仕事をしてるのか。ところでその目印ってどうやってつけるの?
 
なっちゃそ
概念はわかってもらえたみたいだね。ここからは実際のHTMLの書き方について説明していくよ。
  
 

HTMLの基礎② 書き方を知ろう

 
 
HTMLはすべての要素が<タグ名></タグ名>で囲まれていて、この<>はタグと呼ばれています。
 
このタグを使ってHTMLは文書にマークアップをし(目印をつけて)、その要素がどんな役割を担っているのかをブラウザに教えています
  
また、文書を挟むタグは基本的に「開始タグ」と「終了タグ」と呼ばれ間に挟まれた文書も含まれた開始タグ〜終了タグの塊は「要素」と呼ばれています。普段は使わない知識だけど一応覚えておいてね。
 
 
そして、タグには様々な種類があってそれぞれに名前と定義された役割を持っています
 
例えば、見出しの役割を持つタグに挟まれた箇所はブラウザによって見出しとみなされ文書のタグで挟まれた箇所は文書とみなされます。
 
 
 
ハム氏
へー、じゃあタグにはたくさん種類があるの?
 
なっちゃそ
そうだね。でもいっきに全部覚える必要は全くなくてよく使うタグを少しずつ覚えていければ十分だよ。今回はWebページを作るときによく使うタグをいくつか紹介するね。ここ出てくるタグが使いこなせれは一般的なWebページは作れるようになるよ。
 
 

HTMLの基礎③ タグの種類を知ろう

 

htmlタグ

htmlタグを書くときに必ず書く必要があるタグで、ほぼすべてのソースコードはhtmlタグの中に記述され、「ここからここまでがhtmlですよ〜」ということをブラウザに伝える役割があります。

 

headタグ

 
headタグの中にはそのファイルが呼び出しているファイルのURLやタイトル等を書きます。headタグのなかに記述された内容はウェブページには表示されません。

 

 
ハム氏
どんなファイルを呼び出してるの?
 
(名前)
例えばWebサイトに装飾をしているCSSが書かれてるスタイルシートって呼ばれるものとか使っているフォントのファイルとかだね。それについては別の記事で詳しく解説していくね。
 
 

titleタグ

headタグのなかに書くタグの1つ。1つのhtmlファイルに1つだけ記述するという決まりがあります。
Titleタグはそのページのタイトルを示し、ブラウザや検索エンジンに伝える役割を担っています。
Titleタグ内の情報がページ名としてブラウザのタグに表示されたり、検索した際のタイトルとして表示されます。

 
 

bodyタグ

Webページの画面にはbodyタグ内に記載された内容が表示されます。見出し、ヘッダー、ページのコンテンツはすべてbodyタグ内に記述します。

 

hタグ

hはheadingから来ていて、hタグで囲まれたテキストや画像は見出しと判断されて他の箇所よりも大きくて太い字で(要は見出しっぽく)表示されます。
h1〜h6まで設定することができ、数字が大きくなるほどブラウザに表示される文字のサイズが小さくなります。

 

pタグ 

pはparagraphから来ていて、pタグで囲まれた箇所は段落(文章)と判断されます。
Webページの文章は基本的にpタグに挟まれてます。

 

imgタグ

imgはimageから来ていて、文書内に画像を表示させるためのタグです。
表示させる画像ファイルはsrc属性で指定します。
 
Web上ではgif形式(.gif)jpeg形式(.jpg)png形式(.png)を指定することができ、pdfデータや動画データを指定することはできません。ただし、gifアニメーションはimgタグで指定できちゃいます。

 

 

aタグ

aタグに挟まれたコンテンツはリンクとして判断されます。aタグのなかには文字も画像も入れることができてよくサイトで見るボタンなんかはこのaタグで実装されています。
 
書き方は
 
<a href=“”>テキスト又は画像</a>
 
こんな感じでhrefの間にはリンク先のurlを記載します。

 

 

ulタグ・liタグ・olタグ・dlタグ

liタグとは

List Itemの略でリストの項目を表現するのに使います。

リストを作成する際はこのliタグをul、ol、dlタグのいずれかで囲むことになります。

ulタグとは

Unordered Listの略で箇条書きのような順不同のリストを表現するのに使います。
なかに入る項目はliタグ(List Itemタグ)で表現します。

 

olタグとは

Ordered Listの略で  1.〜 2.〜のように順序付きのリストを表現するのに使います。
なかに入る項目はliタグ(List Itemタグ)で表現します。

 

dlタグとは

dlタグはDefinition Listの略で用語とその説明がペアになった定義リストを表現するのに使います。
なかに表示する用語はdtタグ(Definition Term)、説明はddタグ(Definition Description)表現します。ちなみにdtとddは1対1である必要はありません。

 

divタグ・spanタグ

 
divタグ、spanタグはそれ自体に意味はなく、<div></div>や<span></span>で囲むことでコードにまとまりを作るためのタグです。
 

divタグ

 
cssによるスタイリングのために子タグをまとめたり、id属性を割り当ててタグのグループを作ったり、特定のタググループの言語を指定したりするのに使います。
 
cssによってスタイリングする目的で使用するのが最も一般的な用途ですね。

 ちなみに、
 
<div lang=“en”>
.
.
.
</div>
 
と言語を指定するとアクセシビリティの観点から好ましいとされています。
 
 
 
ハム氏
アクセシビリティがよいって何?
 
 
なっちゃそ
これはわたしもあまり詳しくないんだけど例えば、日本語で指定されているページを読み上げソフトで読み上げるとページ内に英文が含まれていてもすべて日本語として読み上げられてしまうけど、英文の部分に言語指定がされていればその部分は英語として読まれるこのが期待できるようなるよ〜ってことみたい。
 
 

 spanタグ

spanタグもdivタグと基本的な役割は同じです。

 
ではどのようにしてこの二つを使い分けるのかというと、タグでくくったまとまりの前後に改行ができるのがdivタグ、できないのがspanタグの特徴です。
 
だから基本的にspanタグは文章に挿入して一部のテキストの色やデザインを変更するのに使われています。
 
 
 
 
 

HTMLの基礎④ 属性についてちょこっと解説

 

さっきimタグの説明の時にちらっと出てきた「属性」について簡単に解説しますね。

属性とは

HTMLの属性はそのHTML要素に何かしらの設定をつけるものです。

ちょっとふわっとしすぎていますが、そこまで最初からちゃんと覚えないといけないというものでもないのでこのくらいふわっと理解していれば大丈夫です。

書き方は

<タグ名 属性=”属性値”>

こんな感じ。

ポイントはタグ名の後ろに半角スペースを設けて記述することと、属性値をダブルクオーテーションマーク(””)で囲むこと。

属性の種類

属性には、使うことができる要素が決まっている要素固有の属性と、どの要素にも使うことができるグローバル属性の2種類があります。

属性は一つ一つ紹介するととんでもない数になるので一部だけ紹介していきますね。

固有の属性

src属性

<audio>,<embed>,<iframe>,<img>,<input>,<script>,<source>,<track>,<video>で使用できる属性。

属性値には埋め込みコンテンツの URLを設置する。

alt属性

<applet>,<area>,<img>,<input>で使用できる属性。

属性値には画像が表示できない場合の代替テキストを設置する。

 

グローバル属性

style属性

HTMLに直接スタイルを書き込むことができる属性。

外部スタイルシートや style 要素内に記述されたものより優先度が高くなる。

id属性

タグにCSSで使用する名前をつけるための属性。

class属性

id同様タグにCSSで使用する名前をつけるための属性。

まだまだまだまだありますが、今回はこの辺で!

 

HTMLの基礎 まとめ

 

いかがでしたか?

「さあWebデザインの勉強を始めよう!」と思ったら急にアルファベットが出てきて警戒しちゃう人も多いと思いますが、HTMLは覚えてしまえはとってもシンプルな言語です。

まずは今回紹介したタグの書き方と役割を覚えて少しずつ使えるようになればOK!

あとはサイトを作っていく上で必要なタグはその都度調べて使っていくようにしてください。頻出するタグは自然と覚えていけると思います。

HTMLはCSSとセットで初めて本領を発揮する言語です。

これからWebデザインをやっていきたい人は必ずCSSについても勉強するようにしてくださいね!

ではでは。

CSSは怖くない!CSSの役割と使い方

2018.04.08

コメントを残す

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