HTMLの基本

html5-386614_1920

ブログ等のサービスでは、
本文の文章さえ入力すれば記事を完成させることができます。

しかしホームページで記事を作成するときは、
HTMLドキュメントのメモ帳で、
自分でHTML言語を直接記述していく必要があります。

HTMLのひとつひとつを把握し、すべてを手書きで書いていくことは、
SEO(検索エンジン最適化)による自サイトへのアクセスアップ、
アフィリエイト収益にも重要なことです。

最初はalphaEDIT(無料)などの、
ホームページ作成補助ソフトを使うのもいいですが、
それだとどうしても無駄な表記が多くなってしまいます。

最終的にはHTMLとCSSを自分で覚えた上で、
手書きでメモ帳を書けるようになりましょう。



 

【HTMLの基本】

HTML言語は、
そのページのありとあらゆる構造や性質を決定していきます。

わかりやすい例として、bタグaタグで説明しましょう。

たとえば「<b>お金</b>」とメモ帳で表記すれば、
ページでは「お金」と太い文字で表現されます。

この記述内容を太くする<b>をbタグb要素といい、
<b>を開始タグ、</b>を終了タグと言います。

 

また特定要素内でしか配置できないタグというのも存在しています。

たとえばtitle要素のタグは、head要素内でしか使うことができません。

このときtitle要素はheadの子要素
head要素はtitleの親要素、という言い方をします。

HTML言語では、この要素と属性をあわせたタグを用いて、
様々なページを作っていく
ことができます。

 

【Head内でよく使われるタグ】

head要素は、そのページの設定に関わってきます。

主にtitle、meta、link、scriptなどの子要素を入れます。

body要素内では本文などの具体的な内容を表記するのに対し、
こちらではページ設定などの抽象的な内容を表記していきます。

 

(1)title要素

中身はページごとに異なるようにします。

SEOでもトップレベルで重要なタグですので、
検索キーワードを含ませた上で内容はよく考えます。

文字通りタイトルですので、
そのページのタイトルに相応しい文を記入しましょう。

 

(2)meta要素

name属性(中身はdescription)とcontent属性を、
組み合わせて文章を表記することで、
そのページが検索エンジンに映る際の説明文を、
自分で決めることができます。

多少のユーザビリティの向上に役立ちます。

最近ではname属性の中身にkeywordsを設定し、
検索キーワードを羅列する方法は、
スパム(不正SEO)となる関係であまりとられません。

 

(3)link要素

rel属性の中身をstylesheetにすることで、
外部のCSSを使えるようにします。

 

(4)script要素

JavaScript等を使いたい時に使用します。

 

【body要素内でよく使われるタグ】

body要素では、実際の本文を記入していきます。

p要素、br要素をはじめとする、たくさんの子要素が存在します。

 

(1)p要素

コンテンツ本文の段落に使用します。

コンテンツ作成の際にはもっとも使うタグとなりますので、
確実に使いこなします。

検索エンジンにしっかり文を読みこませるためにも、
重要なタグです。

改行が生じますので、気に入らなければCSSで調整します。

 

(2)br要素

改行のタグです。

p要素で補えない分の改行は、br要素でカバーします。

なお、XHTMLでは終了タグのないタグについては、
半角の空欄と斜線を入れるようにします。

たとえばbrの場合ですと、
必ず「<br />」という形にしなければなりません。

 

(3)h1要素・h2要素

h1はコンテンツ文中の大見出し(タイトル)に、
h2は小見出しに使います。

head要素内のtitle要素に次いで、SEO上重要なタグとされています。

h1要素はひとつのページにつき、ひとつのみ用います。

titleタグ内とまったく同じの文にしてしまうと、
スパムになる傾向ですので、ある程度工夫します。

h2要素は同ページ内にいくら用いても問題ありません。

 

(4)strong要素

b要素と同じ効果で、文字を太くします

かつてはb要素よりもstrong要素のほうに重要な単語を入れるとよい
というSEOの定説がありました。

しかし現在では、b要素、strong要素にそこまでの差はありません。

両者共、太字にすることで閲覧者が見やすくなる、
というユーザビリティの用途で使っていきます。

 

(5)img要素

画像を挿入する際に使います。

スパムにならない範囲でalt属性にキーワードを入れると、
SEO的に良いとされます。

br要素と同じく終了タグがありませんので、
半角の空欄と斜線を入れるようにします。

 

(6)ul要素・ol要素・li要素

箇条書きを作る際に使います。

CSSと組み合わせれば、表を作ることもできます。

 

(7)table要素・tr要素・th要素・td要素

表を作る際に使います。

tableタグ群で表を作る場合、HTMLが複雑になってページが重くなる
といったデメリットがよく指摘されます。

ulタグ群で作れない表については、
こちらのtableタグ群で表を作る、という感覚でいいでしょう。



 

【もっとHTMLを知っていこう】

HTML言語を詳細に解説していくと膨大な情報量になるため、
このページでは、基本的な部分しか触れません。

 

HTMLの詳しい解説については、
以下のHTML初心者向けウェブサイトで学習してください。

■ HTML入門

■ HTML手打ちで作るホームページ講座

常用するHTMLは限られてきますので、
すべてのHTMLを覚える必要はありません

ただホームページ運営者になろうとしている人は、
ひと通りどんなHTML言語があるのかは、
見ておいたほうがいいでしょう。



関連記事

コメントは利用できません。

ページ上部へ戻る