HTMLとは何か、HTMLの記述のルールやタグや要素や属性など分からない事を学んでいきましょう。
記事の内容
HTMLとは何なのか？
ハイパーテキストマークアップランゲージ
htmlはWebサイトのページを作るための言語でHyper Text Markup Language(ハイパー・テキスト・マークアップ・ランゲージ)の略でインターネットにおける技術の標準化団体「Ｗ３Ｃ」によって策定されました。
Webページはテキストファイルで構成されており、そこで使用する言語がHTMLです。
HTMLのHT(ハイパーテキスト)は「～を超える」という意味で「通常のテキストには無い機能がある」という意味です。
また、最大の特徴が「リンク」でHT(ハイパーテキスト)同士のつながりが「ハイパーリンク」といい、文書の中に特定の目印(タグ)をつける事で、文書同士がハイパーリンクで繋がり、それをクリックすることで目的のページへ移動して閲覧されるということです。
この目印をつける事を「マークアップ」といい、コンピューターがどこが見出しでどこが段落なのかを読み取れるようにしたのがHTMLです。
マークアップとは
文書内のテキストに対しタグ(目印)をつけていくことをマークアップといいます。
マークアップの意味と効果
コンピューターは文字を入力しただけでは、文字の羅列として認識します。
文章を正しく解釈するための記述、マークアップはテキストデータを単にhtmlとして認識させるためのものではありません。
平坦なテキストに正しい意味付けを行いそれを見ている人や機械に適切な情報を伝えられるようにすることです。
マークアップはそのテキストがどのような役割でどのように読まれるかなどを、正しく解釈できるようにするための記述です。
インターネットには様々な人が閲覧していて目が不自由な人も正しくマークアップされていれば音声読み上げの機能でページの中身が理解できるようになります。
検索結果にも作用する
Googleやyahooなどの検索エンジンでは、マークアップされた文章を読み、その中身やテーマを判断しています、そのため検索結果にも影響が出てきます。
正しくマークアップされた文章は内容の理解が容易になりSEOの効果も期待できます。
タグとは？要素とは?属性とは？
タグとは
タグはHTMLの中のテキストに付けられる目印の事です。
タグを記述する時はルールがあります、タグは<>不等号の記号と中に記述する英数字の「p」の部分はすべて半角文字で記述するのが決まりです、全角で記述しても正しく表示されません。
タグは大文字で記述してもブラウザは認識しますが、小文字で記述するのが通例となっています。
開始タグと終了タグ
タグには開始タグと終了タグがあります。
開始タグは不等号<>で囲まれた英字で段落であれば<p>で表します。
終了タグは開始タグの英字の前に「/(スラッシュ)」が入り</p>のようになります。
開始と終了をセットで扱い、タグの間に記事の内容が入ると思えばいいでしょう。
<p>ここに記事が入ります</p> このように開始タグと終了タグに挟まれるようになります。
終了タグが無い要素もある
一部のタグでは終了タグを持たないものがあります、metaやimgなど
空要素と呼ばれています、通常の要素は「ここからここまで」というように範囲を指定しますが、空要素は範囲で扱うものではなく、ピンポイントで指定するものです。
img要素は「画像の挿入」などに使用します、ここからここまでの範囲の指定ではなくあの場所のようにピンポイントに指定します。
要素とは
Webページは要素で構成されています、開始タグと終了タグに囲まれた文章、これらを合わせたのを「要素」といいます。
タグが目印に対し、要素はタグと内容を含んだひとまとまりのことをいます。
<p></p>が「タグ」で、<p>ここに記事が入ります</p>開始タグから終了タグまでのすべてが「要素」です。
属性とは
htmlタグに性質を与えるもので、タグに対して特定の「属性」をつける事ができます。
そして属性を使用する場合は、それに対する「値」もセットで使用します。
属性はそれぞれのタグに専用のものやすべてのタグに使用できるものがあったりと様々です。
<a href="https://www.zokusei.com" target="_blank">リンク先はこちら</a>
ａタグは指定した範囲に対してリンクを設定するもので「リンク先はこちら」にリンクが貼られます。
「href」が属性で「https://www.zokusei.com」が属性値になります。
属性は複数設定することができるため、半角スペースを開けて「target="_blank"」と記述します。
「target」が属性で「_blank」が属性値になります、この属性はリンク先を新しい窓で開くように指定するものです。
文書構造を表す主要なタグ
head要素とbody要素
head要素
Webページの中身には大きく分けて「head」要素と「body」要素があります。
この二つの違いは、情報が見えるか見えないかです。
Webページの基本情報が記述されているものがhead要素です、Webページを表示するために必要な文字コードを指定したりCSSを参照する記述であったり、そのページの要約を検索エンジンに伝える記述もあります。
head要素に記述した情報は、ほとんどが目には見えませんが「title(タイトル)」とタイトル横の小さな画像(ファビコン)が見えるだけです。
title要素はWebブラウザのタイトルバーやタブの部分に表示されるページタイトルの事です。
body要素
Webページのコンテンツが記述される場所です、この要素の中に入る情報のほとんどがブラウザ内に表示され見えるようになります。
body要素の中に記述する代表的なものに、見出しを表す「h1~h6要素」段落を表す「p要素」などがあります。
body内の文書構造を表すのに利用されるタグ
header要素
body内のページ上部に配置してWebサイトのすべてのページに渡って共通化するエリア
多くの場合サイト名やグローバルナビゲーションなどを含んだ部分を言います。
グローバルナビゲーションとはheader部分に配置するWebサイト内の主要なページへリンクするために配置するリンク集の事です。
nav要素
nav要素はWebサイト全体を行き来するグローバルナビゲーションに対して利用します。
header内やfooter内で使用します。
main要素
main要素はそのページのコンテンツ部分に対して一つだけ利用します。
section要素
section要素は意味や機能のひとまとまりであることを表す時に利用します、セッションはコンテンツのひとまとまりなのでその部分を表す見出しh１~h６要素を付けます。
見出しをつける事ができない場合は、無理してsectionタグを使わずdiv要素を使うのもいいです。
aside要素
aside要素は記事の内容から切り離して考えられるようなものに対して使用します、本編の情報と関連性が薄いものに対して使います。
footer要素
footer要素はページの下部に配置して、Webサイトのすべてのページに共通化するエリアです。
header部分と対の要素ですナビゲーションやコピーライトを含む場合が多い
HTMLのタグと要素と属性とは？
各タグで構成されている要素はWebさいとの構造を指定する重要なものです、しっかりと覚えてエラーを出さないようにしましょう。
