HTMLの世界に触れてみる|SEO女子コラム

第一回目のSEO女子コラムの投稿となります!
今回は第一回ということでかなり手探り状態…。

第一回コラムテーマ「HTML」

私たちは普段サイトの内部構造等を見る機会があります。
そこでネックになってくるHTML。そもそもWEBの知識が乏しかった私達からしたら未知の世界でした。
SEOに着目というよりは、基礎知識の観点になりますが、私達なりの勉強の結果のコラムとなっています。
それでは、コラムスタートです☆

HTMLって実際何なの?

担当者:きょん

初めまして!きょんです(^^)初めて書く今回の記事が『HTML』ということで!!
あぁ…っっ!テーマがでかい(´;ω;`)
SEO女子の一員として分かりやすく説明していきたい次第でございます。

ではさっそく…

HTMLとは?
「HyperText Markup Language(ハイパー・テキスト・マークアップ・ランゲージ)」の略になります。
(きょん訳:コンピューターにも理解できるすごい文字!)

WEB上で文章を書きたいと思っても、私たちが普段使っている言葉で書いてもコンピューターからすれば理解することが困難です。
そこで!コンピューターにも分かるようなマークアップ言語と呼ばれる言葉を用いて文章を書くことにしたのです。これがHTML。
このHTMLではタグと呼ばれる「目印」をつけ、文章を構成することにしました。(例:タイトルや見出し、リストなど)

要は「WEB上で文章を記述するときの専用言語」と言った感じですね。

ここまで来ても「イマイチ、HTMLがどんなものか分からないよぅ」って方は、パソコンから実際にこのサイトを右クリックして【ソースを表示】してみてください。
ソースの見方
どうでしょうか?
訳の分からない文字列が並んでると思いますが、これが『HTML』になります。

このHTML、実は生まれるまでにかなりの人生を送ってるんです。
…が、かなり長くなるので興味のある人は調べてみてください。機会があればまたコラムにでも…するかな…。

このHTML、実は一種類だけじゃないのです。
いくつか種類があるのですが、今主に主流となっているものをご紹介します。

★HTML4.1

現在HTMLは様々な装飾を付けることが出来るのですが、本来は文章の構造などをコンピューター示すものだから、装飾などでオシャレにしたい人はCSSを使ってね!と推奨するようになったのがこの4.1。
それまでに生まれては廃案となったHTMLたちの要素を取り入れつつ、複数の言語に対応した国際化の要素も盛り込まれます。(もちろん日本語にも対応☆彡)
今でも多くの人が使用しています。

★XHTML

「Extensible HyperText Markup Language(エクステンシブル・ハイパー・テキスト・マークアップ・ランゲージ)」の略で、XMLとHTMLを融合したものとなります。
「XML」とは先に説明したマークアップ言語の一種です。
XMLはHTMLと違い書き方に対してとっても厳しい!ちょっとでも書き方を間違えると怒られます。
XHTMLはその中間の存在なので双方に互換性があります。
時代は「XMLはWEB以外でもいろいろ使えて素晴らしい!」となったため、流行りにノッてHTMLのデータをXMLベースに移行するためにXHTMLは推奨されました。
HTML4の概要はほぼ引き継いでいますが、XMLベースなので記述について厳密なのはもちろん、多数のルールがあります。XHTML+CSSでの使い方が一般的なようです。

★HTML5

この【SEO初心者女子がゆく】もこのバージョンになります。文章の構造をより明確にブラウザやロボットに伝えることができるようになりました。また、記述の面に関しても大幅に要素などが追加・変更・削除がされたので、徒来のHTMLよりもソースの見た目がシンプルになり、作る側のスペルミスなどが起きにくいという利点もあります。特にCSSで代替できる要素などが多数変更となり、今まで少し曖昧だったタグの整理などもされたのです。
そして、ユーザーが動きのあるサイトを求める傾向があったため、JavaScriptを利用しなくても動画などを簡単に使用できるようになりました!
一番発揮できるのが、ほとんどの人が持っているスマートフォン。今ではアプリやサイトなどのほとんどがこのver.で作られています。しかし、パソコンとスマートフォンでは容量や処理速度に大きな違いがあるので、よりシンプルなHTMLが好まれると推測されます。

時代と共に需要も変わり、日々進化していくIT業界。
こうして見ると、HTMLの進化はWEBの歴史といっても過言ではありませんね!(名言)
コンピューターと人、両方に優しくなった次世代のHTML5!もっと勉強していきたいと思います!

WEB上の文章を読みやすく

担当者:つじさん

HTMLが誕生し、WEB上での文章の記述が容易に出来るようになったところで、もう少し欲を出してみましょう。

その文章、読みやすくしたい…!

まるで資料にマーカーをするように
大切な部分を赤丸でチェックしておくように
可愛いシールでデコレーションするように
色んな色で文字を塗っていくように……

文章を装飾したい!

実はそんな欲求も、HTMLは実現可能です。すごい!
下記でも説明するように、HTMLのタグにも装飾が出来るものが存在しますが、説明があったようにHTMLは文章の構造を示すもの。
そこに直接装飾を施すことはあまり良くないとされています。
それを解消するために、装飾専用の言語を付随させてHTMLのデコレーションを可能にさせたのが、先ほどからちょっと話題に上がっている「CSS」です。

CSSは「Cascading Style Sheets(カスケーディング・スタイル・シート)」の略称です。
文字や文のスタイルを指定するためのシートなので、スタイルシートですね。
スタイルシートにも幾つか言語が存在しますが、WEB用の言語が使われているのが「CSS」です。

CSS自体は独立していても機能せず、HTMLとの組み合わせで使用します。
概念としてはこんな感じかな?
CSSとHTMLの関係性
細かな組み合わせ方法等はまたの機会ということで今回省きますが、1つのCSSがあれば複数のページに対して同じスタイルを指定できたり、かなり便利な機能です。

CSSは直接HTML上に記述をしない仕様なので、HTMLファイルの文字数が多くなり過ぎないのも特徴ですね。
最近のGoogleはこのCSSも読み取ることが出来ると言われています。
実際に私達がサイトを見るようなデザインを、Googleも見ているようです。
人間みたいだな、Google…そのうちサイトにコメントとかくれたりして。「どうもGoogleでtyそんな話はさておき。

CSSは装飾の幅もかなり広くHTMLの構造を邪魔しないので、とってもおすすめです。
HTMLを学ぶ上で切り離せないアイテムの1つと言っても過言ではないかもしれないですね。

実際にHTML文章を装飾しよう!

担当者:おかもっさん

CSSのお話が出たところで、私は「HTMLタグやネット上で出来るデザイン」をテーマに記事を書いてみることにします。
実際にどうすれば文字を装飾できるのか、やってみましょう!

HTMLタグにも装飾用のタグは存在しますが、現在は推奨されていない傾向にあるようです。(現にXHTMLでは廃止されてたりします)
その為、多くのWEBサイトでは装飾等を行う時にCSSなどを活用しているかと思います。他にもFlashやJavaScriptなんかもありますが、話題にも出たので今回はCSSを取り上げます。

とはいえいきなりCSSを書いてもなんのこっちゃとなるので、装飾用のHTMLタグと一緒に紹介します。
CSSの記述方法について詳しくは書かないので、使いたい!って人はぜひ調べてみてください。

文字のサイズを変更する

いくら良い文章を書いているサイトでも、テキストを淡々と書いているだけのサイトは見る気がしないものです。
シンプルイズベストと言っても、実際見たいと思えるサイトでなければ作った意味もないですよね。
そこで、少し目を引くために注目してもらいたいタイトルや文章のサイズを変更をしてみましょう。

◯HTMLでの記述◯
<font size="5">ここの文字が記述した数字サイズへ変化します</font>
◯CSSでの記述◯
セレクタ{
font-size: 150%; /* サイズはpx、em、%を使用 */
}

タグのfontとsizeの間は半角スペース・数字は半角英数字で記述してください。
間違えてもすべてのテキストを大きくしないでくださいね。ただ見難いだけになってしまいます。
サイズの記述は色々なサイズが用意されているので、実際に使いやすいサイズを検証してみてください。

フォントカラーを変更する

タイトルの文字を大きくしたけど華やかさが足りない!更に目立たせたいキーワードがあるんだ!
そんな時にはテキストの色変更をしてみましょう。

色味のあるテキストにする事でサイトの印象も大きく変わります。
文字の色を変更する為にはこちらのタグを使用してみましょう。

◯HTMLでの記述◯
<font color="カラーコード">ここの文字の色が変わります</font>
◯CSSでの記述◯
セレクタ{
color: #FFFFFF; /* カラーコードやカラー名を指定 */
}

カラーコードを選ぶ際にはWEB色見本等のサイトを参考にしてみてくださいね。
さて、ココで要注意なのが、もし目立たせたくない文章がある時や隠したいワードがあるときに背景色とテキストを同じ色にしないことです。
なぜならこれは「隠しテキスト」としてペナルティを受ける対象になってしまう可能性があるから。
個人的にはCSSでh1タグを隠す手法をよく目にするのですが、背景とキーワードを同化させている手法も少なくないです。
よほど悪意がない限りペナルティを受けることはないですが、自分では隠しテキストのつもりはなかったのに!という時でもペナルティ受ける可能性があるので注意しましょう。

文字を強調する

サイトの中でこの文字すっごく大事だから!というのを伝えるときには強調タグを使用してみましょう。
テキストを強調する際に使用するタグは二種類あります。

◯HTMLでの記述◯
<b>ここが太字に</b><br />
<strong>ここが強調文字に</strong>

この二種、表示自体は一緒ですが、基本的にはstrongで重要度が高いよと知らせる方が良いかなという感じです。
コレを利用して注力したいキーワードに使用するのもイイと思います。
ただ、ほぼ全文にstrongタグ…など過剰に使用するのはやめましょう。
やり過ぎるとどれが強調したいのかわからなくなるので、行き過ぎた使用はNGです。

◯CSSでの記述◯
セレクタ{
font-weight: bold; /* 太字にする時に使用 */
}
特に重要性を伝えるわけではなく文字を太くしたいだけなら上のCSSが使えると思います。

さて、今回はテキストに関するタグをメインに書きましたが、文字を色とりどりにして様々な所を強調しすぎると、どこを見せたいサイトなのかよくわからない状態になります。
なのでどんなタグでもほどほどに、バランスを考えて使用しましょう。

いかがでしたでしょうか?
HTMLはとても情報が多く私達もまだまだ勉強不足です。
またいつかこのテーマにも触れる時が来るといいなと思います。

One thought on “HTMLの世界に触れてみる|SEO女子コラム

  1. SEO女子記念すべき第一回目のコラム読ませて頂きましたが、
    さすが女子ですね、文章が読みやすくて、画像もあったので良かったです。今後も期待してます(*´∀`)

コメントを残す

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.