HTML Validatorで構文をチェック：html step2

HTML Validatorで構文をチェック：html step2

前回は、HTML5の特徴および要素と分類につきまして詳しく記載いたしました。

おおよその概念とHTML5による新しい特徴など、特にXHTMLでの作成になれてしまいました、私などに取りましては新しいHTMLタグはありがたい様な、覚えるのが大変なような…、がしかし、新しい技術が次々と生まれるウェブの世界。

頑張って勉強していきたいですね…。

それから前回記載いたしました内容で、「HTMLのマークアップが、構文的な間違えが多い！！」と記載いたしましたので、今回の内容では、以前にも多少ご紹介いたしましたツールをご紹介していこうと思います。

という事で、それでは今回はッ、

上記について記載していこうと思います…。

HTML、バリデータツールのご紹介

前回記載した内容で、「HTMLのマークアップが、構文的な間違えが多い！！」と記載いたしました。
そこで、今回は以前も多少ご紹介いたしました、HTML構文チェックとして、バリデータツールを再度ご紹介いたします。

実際にマークアップをおこないました、HTMLの構文チェックとして、ぜひ利用することをオススメいたします。

また、完成したサイトなどのURLを入力して頂くことも可能となっておりますが、JavaScript（ジャバスクリプト）やCSSなどを組み込み、完成されたサイトになるとかなりのエラーが表示されることと思います。

このサイト、MKデザインも実はWordPressによるphpで表示されているページになりますが、残念ながらエラーも多数表示されてしまいます。

しかしながら、HTML構文だけでもサイト作成時にチェックをおこないエラーを少なくすることで、クローラーに優しいマークアップとなる事で、SEOに効果があるものではないかと思います。

それではご紹介！！

HTMLのマークアップをおこなった時点では、エラーゼロになるようマークアップを記載し直し、それからCSSやJavaScriptなどの記載に進むことをオススメいたします。

また、HTMLの構文チェックを日頃から行うようにすると、常に正しマークアップを身につけることが出来ることと思います。

常に正しいマークアップをおこなうことが出来るようになると、SEOのサイト内部要素にもスムーズに対応できることと思います。

HTML5、要素のシンプルな分類方法

HTML5よりも以前のHTMLでは、要素のカテゴリーは特に定義されておらず、ブロックレベル要素かインラインレベル要素かという区別の仕方があっただけでした。

ブロックレベル要素とは、「見出し」や「段落」のように、ひとまとまりとなっているタイプの要素を表し、CSSで特に表示指定をおこなわなければ通常はその前後が改行された状態で、前後の要素とは区切られて表示されることとなります。

それに対してインライン要素とは、ブロックレベル要素の内部にある「文章の一部分」として使用される要素の事を表します。
意味的には、HTML5のカテゴリーにおける「文章内コンテンツ（Phrasing sontent）」とほぼ同じになります。

HTML5以降では、このブロックレベル要素かインラインレベル要素かという分類方法は、使用されなくなりましたが、CSSを使用する際にはこの分類方法も必要になります。

ファイル場所の指定方法

HTMLでは、属性を使用してファイルの場所を示すことが多々あります。

たとえば、ある部分をリンクさせる場合はリンク先のURLを指定する必要がありますし、画像を表示させる際には、その画像ファイルのあるURLを指定する必要があるからになります。

HTMLではこのようにURLを指定する際は、2通りの方法がございます。

絶対パス

「http://」や「https://」ではじまる形式を絶対パス「絶対URL」と言います。一般に、ご自分のサイト内から他のサイトへとリンクする場合など、他のサイトのファイルに対して使用される形式です。

相対パス

相対パス「相対URL」は、同じサイト内で使用しているファイルを参照する場合など、同じディスク上のファイルを指定する際に利用される形式です。
現在のファイルの位置を基準として、フォルダ（ディレクトリ）の階層の上下を示すことによってファイルの位置を示します。

相対URLの指定方法は、ご自分より下の階層にあるファイルの場合は、そのフォルダ名からファイル名までを順に「/」で区切って記述していきます。上の階層を示すには、ひとつ上を示すごとに「../」を付けて指定します。

同じ階層（フォルダ）のファイルを示す場合

1つ下の階層（同じ階層にあるフォルダ内）のファイルを示す場合

2つ下の階層のファイルを示す場合

1つ上の階層のファイルを示す場合

2つ上の階層のファイルを示す場合

1つ上の階層にある別フォルダのファイルを示す場合

という事で今回は、バリデータツールをメインに、要素のシンプルな分類方法とファイル場所の指定方法を記載いたしました。

個人的にはバリデータツールをHTMLのマークアップをおこなった場合は、習慣的に使用することをオススメいたします。

常にチェックを心がけることで、自然と正しいマークアップがおこなえるようになり、また、他のソースコードを記載する際も参考になり、サイトの表示速度やSEOにも大きく影響するものと思います。

ウェブページを作成するからには、正しい作成をおこない、沢山のユーザーに見て頂けるウェブサイトを目指したいですね。

とりあえず、今回はここまで…。

お仕事のご依頼は↓コチラより…、それではまた次回…。