アフィリエイトに取り組む前に覚えておきたいHTMLタグ9選

(この記事はHTMLタグを全く知らない初心者向けの記事です)

アフィリエイトに取り組んでいると必ず「HTML」や「CSS」の単語を目にすることになります。

HTMLやCSS、これらの知識がアフィリエイトで必須というわけではありません。しかし、知っているとスムーズに作業を進めていくことが出来るのも事実です。そこで今回の記事ではアフィリエイトに取り組むなら最低限知っておいた方が良いHTMLタグを全部で9種類ご紹介したいと思います。

どのタグを使うと、どのように表示されるかを理解することもアフィリエイトで稼ぐための大切なステップです。是非チェックしてみてください。

スポンサー:月30万円稼げる98,000円相当のキットが無料

パソコン初心者でも最短30分で初報酬を稼ぐことができ、その後1日たった2時間で月30万円稼げるという方法が期間限定・無料で公開されました。この方法はキャッシュが発生するまでのスピードが早いことと、慣れると月100万円200万円と稼いでいけることが特徴です。

本来98,000円相当の教材が今回無料とのことですので、これは貰わないと損です。
■無料:月30万円稼げる98,000円相当のキットが無料

そもそもHTMLタグとは何なのか?

HTMLタグとはWeb上で何をどのように表示するかを示すものです。

例えば…

タグを活用することでフォントに意味をもたせることができる

このように、タグを使うことで様々な見せ方をすることが出来ます。選択した範囲を太文字にしたり、色を変えたり、背景色を変えたりできます。タグの知識が豊富な人ほど色々なコンテンツの見せ方が出来るようになります。例えば枠で囲ったり、人物+吹き出しを表示させたり、比較図を作ったり…色々出来ます。

SHO
HTMLやCSSの知識がある人はコンテンツを色々な形で見せれるので、有利ですよ!ユーザーも内容が同じなら、見やすく装飾された方を読みたいと思うはず!

アフィリエイトをやるなら最低限覚えておきたいHTMLタグ9選

では、具体的にどのようなタグがあるのか?今回は超基本として、最も登場する機会の多い9個のタグをご紹介したいと思います。

覚えておきたいHTMLタグ1:p

タグはParagraphの略で、<p></p>に囲まれた部分が、一つの段落になっていることを意味しています。一般的なブラウザの表示では、<p>~</p>の前後に1行分の改行が行われます。つまり<p>~</p>の前後に段落を作るということですね。

文章だけでは分かりにくいと思いますので、実際にWordPressの「テキスト」に打ち込んでテストしてみました。

Pタグ

テキストの欄で見るとこのようになりますが、ビジュアルで見ると以下のようになります。

Pタグは段落追加

<p>~</p>で囲まれた前後に、段落ができていますよね。このように表示されることになります。

pタグは主にサイト制作の時に使われることが多いですね。例えばWordpressの管理画面内で記事を書く場合、ビジュアル・テキストどちらで書くにしても<p></p>で囲む必要はありません。Wordpress側で自動で改行やpを適用してくれるためです。

覚えておきたいHTMLタグ2:br

<br>は「Break」の略で、改行を行うタグです。テキストや画像をブラウザ上で改行させる時に使います。

上記の<p>の場合<p>~</p>の前後に1行分の改行ができますが、<br>タグの場合は、文章を見やすく改行するために使います。こちらの例をご覧ください。先ほどと同じように、WordPressの記事を書く際に「テキスト」のところに文章を書いています。

<p></p>と違って終了タグがないのも特徴ですね。

<br>

これを「ビジュアル」に切り替えると以下のようになります。

<br>

先ほどより、行間が詰まっているのがお分かり頂けると思います。見た目を整えるために改行するのが目的なら<p></p>タグではなく<br>タグを使用しましょう。

覚えておきたいHTMLタグ3:border

borderは、枠線や境界線を指定する時に使うプロパティです。HTML・CSS、両方で登場します。例えば写真に枠を付けたい場合はこのように表記します。

<img src=”(url+画像ファイル名).jpg” alt=”写真” width=500px; height=200px; border=1px;>

またボーダー線、点線、二重線などいくつかの種類を選ぶことができて、さらに太さ、色も設定することができます。枠線をつけることで、内容を強調することができますから、とても便利です。

SHO
borderは画像に枠線を付けたい場合や、tableタグを使いたい時によく利用します。枠を目立たせることが出来るので重宝しますよ!

覚えておきたいHTMLタグ4:hr

<hr>はHorizontal Rule略で、見た目は水平の罫線が引かれます。終了タグなしで使えます。

hrのタグ単体で使う以外にも、線の長さを指定することができます。例えば、<hr width=”300″>のようにwidthという属性をつけて長さを指定することが出来ます。

hrタグ

このようにテキスト画面に入力したものが…

hrタグ見本

こんな感じで長さが変わります。

罫線の長さを変えたい時は、好みの長さを指定しましょう。HTML4.01では水平線を引くという定義のタグだったのが、HTML5からは、テーマ・話題の区切りを表す要素になり、水平線という定義ではなくなっています。

覚えておきたいHTMLタグ5:font(sizeやcolorなど)

<font>はフォントの種類や大きさ、色を指定するタグです。

タグで囲んで見せ方を指定します。種類を指定する場合は「face属性」。文字の大きさを指定する場合は「size属性」。文字の色を指定する場合は「color属性」を使います。

ただ、今ではCSS(スタイルシート)が標準で使えるようになっているので、これらの装飾用タグを使う機会は激減しています。タグで行っていた機能は、CSSで代替されていますから。HTML4.01では非推奨タグになっていますし、HTML5では廃止されています。

フォントに関する指定は、できる限りCSSを使用するようにしましょう。実際にCSSのフォント指定の方が、自由度が高くて変更も簡単なのでオススメです。

覚えておきたいHTMLタグ6:img

imgは「image」の略で、簡単に言うと文章内に画像を表示するタグです。

表示する画像ファイルはscr(source)属性で指定します。src属性は、画像のファイル場所を指定する役割があるため、必須のタグ属性になっています。そしてwidth属性とheight属性で、画像ファイルの表示サイズを指定できます。

以上の説明をタグで表すとこのような形になります。

<img src=”(場所+画像ファイル名).jpg” alt=”(画像代替文字)” width=(横幅) height=(高さ)各種属性>

覚えておきたいHTMLタグ7:a href

タグは「Anchor(アンカー)」の略で、リンクの出発点と到達点を指定するタグになります。リンクの出発点ではhref属性でリンク先を指定します。

例えば、WordPressのテキストの部分に以下のように入力します。

リンクタグ

どちらにもアフィリエイトJAPANのURLを入れています。ただ、下の方が入力されている属性が長いですよね。実際の記事になった時には、このように表示されます。

リンク

結論として、両方ともアフィリエイトJAPANのトップページへのリンクができたということになります。しかし、上のリンクはクリックするとそのままページが切り替わり、下のリンクは別のタブでリンク先のページが開きます。

このように、<a href=”URL”>文字</a>という風にすると、簡単にリンクを作ることができるわけですね。

覚えておきたいHTMLタグ8:h1-h6

<h1>~<h6>のhは「heading」の略で、見出しという意味になります。<h1>が最上位の見出しで、数字が小さくなるにつれて下位の見出しになります。分かりやすいように、WordPressのテキスト欄にこのように打ち込んでみました。

見出しタグ

すると以下のように表示されます。

見出しタグ

このように<h1>~<h6>で囲まれた文字は、それぞれ大きさが変わっていますね。数字が小さい方が上位の見出しになるので、サイズも大きくなります。

見出しは必ずhタグで囲みましょう。Googleはhタグが使われている整理整頓されたコンテンツを高評価にする傾向があります!

覚えておきたいHTMLタグ9:ulとli

<ul>は「unordered list(順序がないリスト)」の略で、文字通り順序がない箇条書きのリストを表示する際に使用するタグです。<ul>タグは、必ず一つ以上の<li>タグを含む必要があり、活用方法としてはこのようになります。

リストタグ

上記のように、テキストに打ち込むと…

リストタグ

ビジュアルではこのように表示されます。箇条書きリストになっていますね。

もう一つの<li>とは「list item」の略で、リストの項目を表示するためのタグです。リストアイテムとして表示させる場合は、<ol>タグで<li>タグを囲みます。

ol

<ol>タグは配置順に意味を持たせるリストになるため、<ol>タグに囲まれている<li>タグは以下のようになります。

ol

このように<li>タグは番号の付いたリスト項目になるのです。タグの使い方を少し変えるだけで、表示される結果が大きく変わるということですね。

まとめ

全部知っているよ!という方も多かったと思います。

HTML・CSSは学べば学ぶほど表現豊かになり、色々な形でコンテンツを届けることが出来るようになります。私は独立してから4年が経過しましたが、今ではHTMLタグを色々な場所で使うようになりました。ビジュアルではなく、ほぼテキストで入力するようになっています。確実にリターンをもたらしてくれるので、今からコツコツ勉強していくことをオススメします。

【アフィリで月30万円稼げる98,000円相当のキットが無料】

パソコン初心者でも最短30分で初報酬を稼ぐことができ、その後1日たった2時間で月30万円稼げるという方法が期間限定・無料で公開されました。この方法はキャッシュが発生するまでのスピードが早いことと慣れると月100万円以上稼いでいけることが特徴です。

本来98,000円相当の教材が今回無料とのことですので、これは貰わないと損です。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

ABOUTこの記事をかいた人

19歳の頃に起業を目指す。上場企業を含む営業会社を3社経験、その後マーケティング会社の取締役を経験する。Webマーケティングの中でもDRMやインバウンドマーケティング、プロダクトローンチに精通し、ローンチ経験は14回、累計の売上高は10億円を大きく越え、現在はそれぞれの手法をMIXして売上を伸ばすことを得意としている。コピーライティングとマーケティングが専門分野。2015年6月株式会社ウェブエンジンを創業。アフィリエイトJAPANを月間30万PVのメディアに育て上げ、現在年商約4000万円。今は年商1億円突破を目指している。