HTMLについて

こんにちは、webコーダー兼フロントエンドエンジニアのコーダー太郎です。 前回に引き続き、web業界の知識・技術について書いていこうと思います。

第二回目の今回は、HTMLについてです。
前回も少し触れましたが、HTMLはwebページを作成するために開発された言語であり、webサイトを作る上での骨組みとなっており、欠かせない言語です。

HTMLとは

HTMLはHyperText Markup Languageの略で、インターネット上で公開されているwebページのほとんどはHTMLで作成されています。
HyperText(ハイパーテキスト)とは、ハイパーリンクを埋め込むことができる高機能なテキストのこと指し、ハイパーリンクというのは下線の付いたリンクテキストを指します。
Markup(マークアップ)とは、文章の各部分がどのような役割(例えば、見出し・段落・表など)を持っているかを分かるように示すことです。その際に使用されるのがHTMLタグです。

画像1:webページの構造(文章構造)
画像1:webページの構造(文章構造)

文章内の各部分の役割がどのような役割なのかをHTMLタグで示し、明確にすることでGoogleなどの検索エンジンがwebページの構造(文章構造)を把握して解析したり、google chromeなどのブラウザがwebページ内の要素(文章内の各部分の役割)の意味を理解して閲覧しやすいように表示することが可能になり、コンピュータがその構造を理解できるようになります。

画像2:HTMLタグでのマークアップ
画像2:HTMLタグでのマークアップ

HTMLタグについて

ブロックレベル要素とインラインレベル要素

HTMLタグにはブロックレベル要素とインラインレベル要素に分けられます。
ブロックレベル要素は、見出しや段落など文章を構成する要素で一つのかたまりと認識される。
例えば:divタグ・h1~h6タグ・pタグ・ulタグ・olタグなど、インラインレベル要素は主にブロックレベル要素内で文章の一部として使われます。
例えば:brタグ・imgタグ・inputタグなど

HTMLタグの記述の仕方

HTMLタグは、一部を除いてほとんど開始タグと閉じタグがあり、その開始タグと閉じタグの間にテキストを書いていくのが基本的な形となります。画像2で見て分かるように開始タグは、アルファベットを<>で閉じています。閉じタグは開始タグの<>に対して、アルファベットの前に/が付きます。

記述の仕方が例外なHTMLタグ

この形と例外なのがbr(改行)タグ、link(リンク)タグ、img(画像)タグなどです。
これらのタグは、閉じタグが存在しません。

brタグ

brタグについて

HTMLタグの改行タグは、文章の中で改行させたい箇所に対して、<br />を挿入します。

imgタグ

imgタグについて

HTMLタグの画像タグは、ファイルから画像を呼び出すことができます。
src=”この中に画像が格納されているファイルのパス(ファイルがどこにあるのか)を記述します。”
その際のファイルのパスは相対パスか絶対パスで記述する必要があります。

相対パス
今のいる場所(階層)を基準にしてファイルがどこにあるのかを示します。

絶対パス
URLでページを指定して、ファイルがどこにあるのかを示します。

ファイルの格納場所について上の画像の相対パスで説明しますと、img.jpgという画像ファイルがimgというフォルダに格納されており、イメージタグが記述されているフォルダ(img.html)はhtmlフォルダに格納されています。

ファイルの格納場所

今いる場所(階層)を基準にしてファイルがどこにあるのかを示します訳ですからこの場合、イメージタグが記述されている。ファイル(img.html)の場所(階層)を基準にします。

imgタグの構造説明

img.jpgは、img.htmlファイルの一つ上の階層のimgフォルダに格納されています。
今いる(階層)の一つ上にあるフォルダ内にファイルがある場合は../img/ファイル名となります。
二階層上にあるフォルダに目的のファイルがある場合:../../フォルダ名/ファイル名
一階層上に目的のファイルがある場合:../ファイル名
二階層上に目的のファイルがある場合:../../ファイル名
同じ階層に目的のファイルがある場合:ファイル名
同じ階層内でフォルダに目的のファイルが格納されている場合:/フォルダ名/ファイル名
となります。

絶対パスは、URLを基準としているので、https://〇〇.com/img/img.jpgといった形になります。

他にもmetaタグ、inputタグ、hrタグなどが閉じタグがありません。

HTMLタグの種類

ここからは、よく使われているHTMLタグの種類と説明を一部紹介します。

htmlタグHTML文章の構造を定義するタグ。
<!DOCTYPE>を除くその他のすべての要素は、htmlタグの中に配置。htmlタグの子要素として直接配置できるのは、headタグとbodyタグのみ。
headタグtitleタグ(そのwebページのタイトル)やmetaタグ(その文章に関する情報)やlinkタグ、scriptタグなどの別ファイルを呼び出し、読み込ますといったヘッダー情報を入れる。
titleタグそのwebページのタイトルを示す。
headタグ内に入れる。
metaタグそのwebページに関する情報を指定してブラウザや検索ロボットに知らせるためのタグ。
linkタグ別のファイルを呼び出し、文章に読み込ますためのタグ。
scriptタグ文書中にjavascriptやVBScriptなどのスクリプトを埋め込むためのタグ。
styleタグスタイルシートを記述するためのタグ。styleタグ内にcssが記述をすることで、その文章にスタイルがあてることができる。
bodyタグbodyタグ内には、実際にブラウザに表示される文章の本文を入れる。
navタグリンクナビゲーションであることを示す。
リンクナビゲーションは、webページの上部にあるリンク群を指す。
sectionタグwebページ内のその部分が一つのセクションことを示す。
セクションとは、文章の一部分となり、意味や機能のひとまとまりのこと、本で言えば、章のこと指す。
articleタグ内容が単体で完結するセクションであることを示す。
タグの間には、ブログなどの記事の内容を記述することになります。
asideタグその部分がwebページ内の補足情報のセクションであることを示し、主にサイドバーなどに使われる。
divタグdivタグ自体では、特に意味を持っておらず、divタグで囲まれた範囲を一つのまとまりとして表せる。
h1~h6タグ文章の見出しのこと指します。h1が最上位の見出しでh6が最下位の見出しとなる。通常、h4までしか使わないと思われる。
pタグpタグで囲まれた部分は一つの段落であることを示す。
pタグで囲まれている文章を改行させたい場合は、brタグを使用。
またpタグ内は、原則インラインレベル要素のタグのみ使用可能。
ulタグ順序のないリストであることを示す。
ulタグ内には原則liタグ入れることが必要。
olタグ順序のあるリストであることを示す。
olタグ内には原則liタグ入れることが必要。
liタグリスト一つ一つの項目であるを示す。
ul・olタグ内に入れることでリスト内のリスト項目としての役割を担う。
tableタグテーブル(表)であることを示す。
テーブルの基本構造は、tableタグ内にtrタグで横一行を定義して、その中にthタグやtdタグでセルを定義します。
tbodyタグテーブル(表)のボディ(本文)部分であることを示す。
テーブル本体となる行のグループを表す。
trタグテーブル(表)の横一行を示す。
trタグ内にはthタグやtdタグが入る。
thタグテーブル(表)の見出しセルを示す。
tdタグテーブル(表)のデータセルを示す。
dlタグ定義・説明リストであること示す。
dlタグの基本構造は、dlタグ内に定義・説明される言葉をdtタグに、それに対する説明をddタグに入れる。
定義用語や名前・何かの説明に使用する。
dtタグ定義・説明される文字を示す。
ddタグdtタグに入っている文字の説明であること示す
aタグリンクであること示す。aタグで囲んだ範囲がリンクとなる。
figureタグ文章の本文から参照されるようなイラスト・図・写真などであること示す。
imgタグ画像を表示させるタグ。
brタグ文章内を改行させるタグ
spanタグインラインレベル要素で、spanタグで囲まれた範囲を一つのまとまりとして表せる。
formタグ入力・送信フォームであることを示す。
formタグ内の構造は、inputタグ・selectタグ・textareaタグなどのフォームに必要な部品を配置する。
inputタグフォームの構成する部品を作成するためのタグ。
labelタグフォームの構成部品とその項目名を明確に関連付けるためのタグ。
textareaタグフォームの構成部品で、複数行の入力フィールドを作成するためのタグ。
selectタグフォームの構成部品で、セレクトボックスを作成するためのタグ。
selectタグ内にoptionタグを入れることで選択肢作ることができる。
optionタグセレクトボックスに選択肢を指定するタグ。
optionタグを増やすことで、セレクトボックス内の選択肢が増える。
buttonタグフォームの構成部品でボタンを作成するためのタグ。
footerタグフッターであること示す。

これらの普段でもよく使うタグです。
この回では詳しい説明や記述の仕方を省き、一覧として紹介しました。
次のコラムでは、これらのタグを使用をしてタグの使い方などを説明していきます。

その他の記事