htmlタグを理解できる？

2013年2月5日

HTML

今回の記事の内容です

1 中学生でも知ってるhtml
- 1.1 ちょっとクイズ
2 無意識にheadとbodyは使いこなしてる・・・？
3 htmlを知ったからといって基本報酬は増えませんが・・・
4 検索に大きく影響します｜実際にあった事例より
- 4.1 【与太話１】生徒に・・・
- 4.2 【与太話２】仕事の依頼？

この記事の所要時間：約 5分55秒

ブログは作れるけど、htmlってよくわからないんだ。

タグって何？

CSSって何？

ある程度アフィリエイト活動を行ってくると必ず行き着く疑問。

中にはタグを覚えないと稼げないというわけの分からない脅迫観念まで
植え付けられている人もいるかもしれない。

結論から言えば、知らないよりは知っていたほうがいいです。

絶対に知っておいたほうがいいもの ←数えるほど
知っておいたほうが便利なもの ←数えるほど
不要な知識 ←大多数

って感じかな？

中学生でも知ってるhtml

こんにちは、ゆーすけです。

最近は中学校の技術家庭では、プログラミング言語として
BASICではなくhtmlが採用されているんですね・・・。
（学年末テスト対策で技術家庭科をやってるのは多分全校舎合わせて私だけだろう）

さて、中学生でも習う「html」をあなたは理解できます？

日頃あなたが閲覧しているブログやサイトはすべてhtmlというルール（言語）で
書かれています。

html（HyperText Markup Language）って呼ばれるもので、
httpプロトコルというルールに則って・・・・

すごくないですか（笑）

これ中学の技術家庭の先生が作っているプリントの書き出しだったのですが（笑）

分からせる気０（ゼロ）ですね。

ちなみに生徒も分かる気０（ゼロ）です（笑）

でも真面目な子ほど・・・「先生分からない～」となるわけです。

ちょっとクイズ

次のタグを出てくる順番に並べなさい。

<h1>
<title>
<h2>
<h3>
<html>
<head>
<p>

ちなみに・・・先生のプリントに載ってた問題（^^;

正解は 5-6-2-1-3-4-7 ということ。

できましたか？

図解するとこんな感じでしょうか？

<html>～</html>という箱のなかに、
<head></head>というサイト情報の箱と
<body></body>というサイトの本体内容を書く箱があるイメージ。

無意識にheadとbodyは使いこなしてる・・・？

日頃あなたが使っているブログやSIRIUSでも、
この３つの箱（領域）に相当するところがあるんですよ。

<html>も<head>も<body>も見えないところに書かれているのですが、
中身の細かいタグに関してはここであなたは設定しているのです。

【seesaaブログの場合】

◯headの設定

◯bodyの設定

【Siriusの場合】

◯headの設定

◯bodyの設定

でね、このへんは別に知らなくても困らないんですよ。

例えばですよ、教習所をイメージしましょう。

あなたは車運転するときにどうやって車が動くかの
仕組みしらなくても、アクセルふかしてハンドル握って運転は
できますよね。

日常点検とか日頃９９％やらないようなことまで習いましたよね（笑）

ブログを作ったり、SIRIUSでサイト作ったりするのは
まさにそれと同じ事です。

htmlを知らないとサイトが作れないということはないのです。
（車の動く仕組みを知らないと車が運転でいないというわけではないのと同じ）

htmlを知ったからといって基本報酬は増えませんが・・・

というわけで、アフィリエイターとして
ある程度レベルが上がってくると覚えたほうがいいよ
と言われるhtmlなんですが、めっちゃ勉強して覚えたところで、

基本報酬は増えません（笑）

だったら世の中のWeb屋がすべてトップアフィリエイターに
なってますよね。

でも、知らないよりは知っていたほうがいいことは間違いないんです。

例えば、最近バージョンアップして初心者でもまるでホームページ・ビルダー
のようにサイトが作れるようになったSIRIUSのデザインモード。
（ ⇒ SIRIUSのデザインモードの記事はこちらを参考別窓で開きます）

例えば、下に２つの「あああああ」ってあるでしょ？

灰色になっているという以外に違いわかります？

もしこれが分からないのなら、あなたはgoogleに嫌われるサイトを作るかも？

実は後ろに答えがあるのですが、よくみて下さい。

いいですか？

デザインモードの上の「あああああ」は
<h1>という見出しタグをつかってます。

それに対して、

デザインモードの下の「あああああ」は
強調と16ポイントという文字サイズ(<strong>タグと<span>タグ）なんです。

テンプレートをいじったりしてないなら
基本あなたは編集領域で<h1>ってタグを使っちゃいけないんです。

デザインモードがなかった頃は<h1>と<h2>タグは入れようがなかったのだが、
新しいデザインモードでは<h1>と<h2>も選択出来てしまう・・・

<h1>は大見出し

<h2>が中見出し

<h3>以降は小見出し

という感じです。

第１章

第１節

（１）

のようなイメージです。

h1は大きさを示すための記号ではありません。

１ページでh1は１回しか使いません。

こういう知識は知っておいたほうがいいです。

今後このへん理解してないでSIRIUS使うと痛い目にあいますからね。

検索に大きく影響します｜実際にあった事例より

私の出講している塾は結構大きな塾なのですが、校舎単位で
イベントなどをブログでアップしているのです。
使っているのはWordpressでマルチサイト仕様です。

もちろん企業ですから、
ホームページからの集客を意識してのことですね。

校長（または社員）が記事を書いてアップしているんです。

面白いことに、こういうツールがあっても、
毎日毎日記事を更新している校舎とたまに更新している校舎
というのはあるわけです。

ちなみに・・・毎日毎日更新している校舎は

「地域名＋塾」のキーワードで検索をかけても１ページ目に来ません。

私が出講している校舎はそれほど更新頻度は高くないのですが、
「地域名＋塾」のキーワードで１ページ目２位にいます。

実はうちの塾はwordpressで記事をアップしているといいましたが
wordpressの標準エディタしかなぜか搭載していないので、
みんな文字装飾（大きくする）のに<h1><h2>を使って装飾
してしまってるんです・・・。

すごいですよ。あるページのタグ見たら

<title>春募集体験受付中</title>

<h1>塾の名前</h1>

<h2>体験生の皆さん～来て下さい♪</h2>

<h1>◯◯イベントやりました<h1>

てな感じなんです。何十校舎とすべてこんな感じ。

ある程度タグがわかってる人ならこの書き方ありえないと
すぐに分かりますよね。

なんでこんなことが起きるかというと・・・

wordpressでも「ビジュアル」と「テキスト」って投稿画面の
右上にありますよね。

これビジュアルエディタとhtml編集ということなんですが、

普通の人は、タグは知らないからビジュアルでのみ編集するわけです。

標準エディタは文字サイズの変更ボタンがありません。
あるのは、見出し１～見出し６・・・。

ここで編集してるんです。

本当にあった怖い話（笑）

ちなみに私の校舎では

<title>【地域名】で塾をお探しなら【校舎名】の春期講習会</title>

<h1>【地域名】の学習塾【校舎名】の春期講習会体験受付中</h1>

<h2>【地域名】で一番成績が上がるという自信があります！</h2>

<p>◯◯イベントやりました。平均点は・・・</p>

などのように書いてます。

おそらく塾を探すであろう人は【地域名＋塾】や【塾＋評判】とかで
探しますからね。ただしここはタグと言うよりはSEOの細かい話。

WordPressは検索エンジンにも強いなんてきっと聞いて
システム担当が導入したのかもしれません。ひょっとしたら
コンサルタントに吹きこまれたのかもしれません。

私はいち講師なだけなのでその詳しい経緯は知りませんが、
このままでは大きな損失になりますよね。

道具(ツール)は正しく使って
はじめて効果がある

すべてのhtmlを覚える必要はWeb屋でない限り必要ないですが
（Web屋でも調べればいいも多い）
最低限はやっぱり知っていたほうがいいですよね。

私も完璧に使いこなせているわけではありませんが、
支障がない程度には使えています。

アフィリエイターはこの程度でいいと思ってます。

【与太話１】生徒に・・・

テスト対策でhtmlを教えたのですが、みんなしっかりと
理解してくれたのでCSSを叩きこもうとしたら、９割が
脱落しました（爆）

【与太話２】仕事の依頼？

日頃うちのペットのマリアをトリミングしていくれている
美容院さんがサイト作成を考えているらしく、
こういう話をしたら食いついて来ました。

リアルに仕事が取れる予感（笑）

日頃のアフィリエイトでの勉強が思わぬ時に役立ちました。

勉強っていうのはいつお金に変わるかわからないのだよ！

勉強がてら、htmlを知ってみてはどうですか？

Post Views: 2,719

タグ : htmlタグ, タグ　理解, ホームページの作り方

「target=”_blank”という名の思いやり」

「吹き出しイラスト作ってみよう(2)」