ネットで稼ぐためのHTML言語の基本
＜ネットでお金を稼ぐ方法・上級マニュアル５＞
ブログ等のサービスでは、
本文の文章さえ入力すれば記事を完成させることができます。
しかしホームページで記事を作成するときは、
HTMLドキュメントのメモ帳で、
自分でHTML言語を直接記述していく必要があります。
HTMLのひとつひとつを把握し、すべてを手書きで書いていくことは、
SEO（検索エンジン最適化）による自サイトへのアクセスアップ、
ひいてはアフィリエイト収益にも重要なことです。
最初はalphaEDIT（無料）などの、
ホームページ作成補助ソフトを使うのもいいですが、
それだとどうしても無駄な表記が多くなってしまいます。
最終的にはHTMLとCSSを自分で覚えた上で、
手書きでメモ帳を書けるようになりましょう。
HTMLの基本
HTML言語は、
そのページのありとあらゆる構造や性質を決定していきます。
わかりやすい例として、bタグとaタグで説明しましょう。
たとえば「<b>お金</b>」とメモ帳で表記すれば、
ページでは「お金」と太い文字で表現されます。
この記述内容を太くする<b>をbタグ、b要素といい、
<b>を開始タグ、</b>を終了タグと言います。
一方で、
「<a href="https://okanewiki.com/">お金稼ぎウィキ</a>」、
とメモ帳で表記すれば、
「お金稼ぎウィキ」とページでは表記され、
当サイトのトップページへのリンクが作成されます。
このときa要素の中にあるhrefは属性といい、
a要素の補助的な役割を果たします。
また特定要素内でしか配置できないタグというのも存在しています。
たとえばtitle要素のタグは、head要素内でしか使うことができません。
このときtitle要素はheadの子要素、
head要素はtitleの親要素、という言い方をします。
HTML言語では、この要素と属性をあわせたタグを用いて、
様々なページを作っていくことができます。
全ページ共通のHTMLの構造
|
<!DOCTYPE> <html> <head> （ページの設定などを表記する） </head> <body> （ページの内容などを表記する） </body> </html> |
厳密にはもっと細かい描写になりますが、
どのページでも使用する構造は、
おおまかにはこんな感じと思ってください。
!DOCTYPEはDOCTYPE宣言と呼ばれており、必ず一番上に記述します。
基本的に中身はStrict（厳密型）とTransitional（移行型）から選びます。
厳密型はHTMLの仕様が変わるたびに、
タグを最新にしなければなりません。
移行型はHTMLの仕様が変わっても、
互換性を考慮して柔軟に対応できる型です。
XHTMLのことを考慮して長い目で見れば、
これからは厳密型を選ぶのがオススメです。
html要素ではxmlns属性で、XHTMLに対応するかどうかを表記できます。
ウェブサイト作成時に使用するマークアップ言語は、
現在はHTMLが主流ですが、今後はXHTMLに移行していきます。
なるべくXHTMLに対応させて表記していくべきでしょう。
head要素内でよく使われるタグ
head要素は、そのページの設定に関わってきます。
主にtitle、meta、link、scriptなどの子要素を入れます。
body要素内では本文などの具体的な内容を表記するのに対し、
こちらではページ設定などの抽象的な内容を表記していきます。
（１）title要素
中身はページごとに異なるようにします。
SEOでもトップレベルで重要なタグですので、
検索キーワードを含ませた上で内容はよく考えます。
文字通りタイトルですので、
そのページのタイトルに相応しい文を記入しましょう。
（２）meta要素
name属性（中身はdescription）とcontent属性を、
組み合わせて文章を表記することで、
そのページが検索エンジンに映る際の説明文を、
自分で決めることができます。
多少のユーザビリティの向上に役立ちます。
最近ではname属性の中身にkeywordsを設定し、
検索キーワードを羅列する方法は、
スパム（不正SEO）となる関係であまりとられません。
（３）link要素
rel属性の中身をstylesheetにすることで、
外部のCSSを使えるようにします。
（４）script要素
JavaScript等を使いたい時に使用します。
body要素内でよく使われるタグ
body要素では、実際の本文を記入していきます。
p要素、br要素をはじめとする、たくさんの子要素が存在します。
（１）p要素
コンテンツ本文の段落に使用します。
コンテンツ作成の際にはもっとも使うタグとなりますので、
確実に使いこなします。
検索エンジンにしっかり文を読みこませるためにも、
重要なタグです。
改行が生じますので、気に入らなければCSSで調整します。
（２）br要素
改行のタグです。
p要素で補えない分の改行は、br要素でカバーします。
なお、XHTMLでは終了タグのないタグについては、
半角の空欄と斜線を入れるようにします。
たとえばbrの場合ですと、
必ず「<br />」という形にしなければなりません。
（３）h1要素・h2要素
h1はコンテンツ文中の大見出し（タイトル）に、
h2は小見出しに使います。
head要素内のtitle要素に次いで、SEO上重要なタグとされています。
h1要素はひとつのページにつき、ひとつのみ用います。
titleタグ内とまったく同じの文にしてしまうと、
スパムになる傾向ですので、ある程度工夫します。
h2要素は同ページ内にいくら用いても問題ありません。
（４）strong要素
b要素と同じ効果で、文字を太くします。
かつてはb要素よりもstrong要素のほうに重要な単語を入れるとよい、
というSEOの定説がありました。
しかし現在では、b要素、strong要素にそこまでの差はありません。
両者共、太字にすることで閲覧者が見やすくなる、
というユーザビリティの用途で使っていきます。
（５）img要素
画像を挿入する際に使います。
スパムにならない範囲でalt属性にキーワードを入れると、
SEO的に良いとされます。
br要素と同じく終了タグがありませんので、
半角の空欄と斜線を入れるようにします。
（６）ul要素・ol要素・li要素
箇条書きを作る際に使います。
CSSと組み合わせれば、表を作ることもできます。
（７）table要素・tr要素・th要素・td要素
表を作る際に使います。
tableタグ群で表を作る場合、HTMLが複雑になってページが重くなる、
といったデメリットがよく指摘されます。
ulタグ群で作れない表については、
こちらのtableタグ群で表を作る、という感覚でいいでしょう。
もっと深くHTMLを知ろう
HTML言語を詳細に解説していくと膨大な情報量になるため、
このページでは、基本的な部分しか触れません。
HTMLの詳しい解説については、
以下のHTML初心者向けウェブサイトで学習してください。
● HTML入門
常用するHTMLは限られてきますので、
すべてのHTMLを覚える必要はありません。
ただホームページ運営者になろうとしている人は、
ひと通りどんなHTML言語があるのかは、
見ておいたほうがいいでしょう。
こちらのサイトのHTML言語の解説は高度ですが、
一回は見ておくことをオススメします。
また、覚えることと実践することは別問題です。
覚えたHTMLを実際のホームページ作りで、
いきなり活かすことは難しいでしょう。
慣れないうちは、
他の人の作ったホームページのソースを見るなりして、
研究することをオススメします。
■ 次ページ 稼ぐためのCSSの基本
＜関連ページ＞
＜ほったらかしで月収１００万円を継続的に稼ぐ方法＞
