ブログをやっているとたびたび目にする言葉、HTML。
タグがどうとか、属性がどうとか、結局HTMLってなんのことなんでしょう。
そんな疑問を解消すべく、HTMLを全く知らない方に丁寧に解説していきます。
ブログをやっていると避けては通れないHTML。理解したらブログの世界が広がるかも？！
こんな方におすすめ
- HTMLを全く知らない
- これからブログを始めようとしていて基礎知識がほしい
HTMLとは？
HTMLとは、Hyper Text Markup Language(ハイパー テキスト マークアップ ランゲージ）の略称です。HTMLの役割は、簡単にいうとWebページの骨組みとなる文字列です。HTMLそのものはブログなどのWeb上の文章には現れません。
もっと細かくしてみましょう。
- Hyper Text：テキストを超えた文章、テキスト同士を結びつける仕組み
- Markup：印（タグ）をつける
- Language：言語
つまり「テキスト同士を結びつけ、関連づけるためにテキストにタグをつけるための言語」です。
…なんか意味わからなくなってきましたね（笑）。
Hyper Text（ハイパーテキスト）の訳が意味を分からなくしています。一旦ハイパーテキストのことは、ぼやけさせてください。
具体的にどんなものかというと、以下をご覧ください。
<p>これは例文です</p>
HTMLというのは、文（テキスト）の一つ一つをどんな役割で表示するのか、目印をつけるためのものなんです。
わたしたちがブログで文章を書こうと思ったときに、「これは見出しにしたい」「ここで改行」「箇条書きにする」というのを、文章作成のときにWordPressなどで操作しますよね。
あれって、その操作一つ一つで文章にHTMLタグを付けているんです。
文章が出来上がったときに、見出しとして表示させたり、箇条書きに表示させたりしてくれているのが、HTMLです。
HTMLの役割
これはプログラミング言語とは違う言語で、マークアップ言語と呼ばれています。わたしは勘違いしていました。なんか難しい文字列は全てプログラミング言語だと思ってました…（笑）。
HTMLは「マークアップ（印をつける）言語」です。
前述した通り、HTMLとは、Web上で文章の表示をどうやってするか、印づけする役割をもっています。ただの印なので、わたしたちがWeb上で文章をみているときは見えていません。
代表的なものをみていきましょう。
- <p>〇〇</p>：pで囲まれた〇〇は「段落」の意味をもつ
- <h1>〇〇</h1>：h1で囲まれた〇〇は「見出し1」の意味をもつ
- <a>〇〇</a>：aで囲まれた〇〇は「リンク」の意味をもつ
<>（カッコ）でアルファベットなどを囲って、それそのものは「タグ」「HTMLタグ」なんて呼ばれています。
HTMLの相方、CSS
HTMLがタグづけをして文章表示を整えてくれる骨組みだとすると、CSSは装飾品のようなものです。
CSSは、Cascading Style Sheets（カスケーディング スタイル シート）の略称です。
HTMLだけだと、Wordに文字を打つような表示だけです。
しかし、CSSを加えると、文の色を変えたり、背景の色や表示を変えたりしてくれるのです。HTMLと同じくマークアップ言語の一種。
なぜ今CSSの話をしたかというと、CSSはHTMLと一緒に使うからです。
ブログなどWeb上に文章を書くときには、HTMLで文章たちにタグを付けて見出しやら段落やら、箇条書きやら役割を与えてあげます。
それらの文字を大きくしたり背景の色を変えてみたり、細かく調整するのがCSSの役割なんです、切っても切れない関係。
HTMLをブログ初心者が学習するメリット
ここまで読んで下さった方は、HTMLになにかしらの興味があってみてくれていたと思います。
では、HTMLを学習するメリットはなんなんでしょうか。ブログ初心者、もしくはブログを書こうと思っている人向け前提にお話しします。わたしが思うメリットは以下の通り。
- ブログデザインをあれこれできる
- コード入力などのときに苦戦しなくなる
- ライティングの案件受注時に役立つ
メリット①ブログデザインをあれこれできる
ブログ初心者の方は多分、自分のサイトのデザインが気になるんじゃないでしょうか。わたしは最初気になって仕方なかったです。
わたしがブログを始めたての頃、目次を書き込みたくて色々いじったり、文章の背景色を変えてみたかったり、それはもう苦労しましたよ。
HTMLとかCSSとか、全く知識がないもんだから「背景色 変更」とか調べてわかるところだけ読んで、コピペしたけどうまくいかなかったり、ブログも書かずに莫大な時間を使っていました。
今思えば、ちゃんとHTMLやCSSを一から勉強しておけば、一日潰れてブログ書けなくなるとかなかったんじゃないかなーと後悔しています。
サイトや記事の編集をきれいにしても、最初は誰も見にこないのでしょうがないんですが…。
どんなに見栄えを良くしても、ブログを書き始めの方はまず記事数を多くして、記事の質を上げていく必要があります。
それはそうとして、最低限なんとか取り繕いたい、きれいにしたい、とどこかで思ってしまうでしょう。
そんなときにちゃんと記事を書く時間を持ちつつ、さらりとブログデザインを変えれるのが一番いいので、先に勉強しておいた方がいいでしょう。
メリット②コード入力の時などに苦戦しなくなる
ブログやっていると思うんですが、仕組みの面で苦戦することが多いです。
「早く記事の作成に取り掛かりたいのにー！」
と思いながら、コードがどうだ、タグがどうだと、妨害されたこともしばしば。
HTMLとCSSを知っていたからコード入力がクリアできたとは思いませんが、そこらへんに関わる知識を知っているのと全く知らないのとでは全然話が違います。
せめて、HTMLとCSSの知識があれば、ふんわりでもわかったんじゃないだろうか…と、これもわたしの後悔ですが、知らないということが記事作成の時間を妨げる障害となります。
ブログって意外と、マークアップ言語やプログラミング言語を知っていると楽なので、学習しておいて損はないです。
メリット③ライティング案件受注時に役立つ
これはわたしが経験していないんですが、わたしの師匠から聞いた話。
ランサーズとかクラウドワークスで仕事を受注するときに、HTMLやCSSの知識はあった方がいい、とのことでした。
仕事の継続受注にも繋がる可能性が増えますし、ライターやブログを書いている人の中にはHTMLやCSSをよくわかってない人も結構いるらしいです。
自分に付加価値をつけるためにも、学習しておいた方が良いです。
HTMLの学習におすすめの本
HTMLの学習は基本的に独学になると思うので、教材選びは重要です。
以下におすすめの書籍を紹介するので、参考にしてみてください。
全くの未経験、まっさらなところから勉強しようとしている方におすすめです。丁寧でわかりやすいです。タイトル通りの感想ですが正しくその通り。
一応kindle版もありますが、紙媒体の方が良いです。気になったところをパラパラ〜とできるのは紙ならではの良さなので、できれば電子書籍じゃない方が使い勝手が良いでしょう。
こちらのいいところは、サイトを制作しながら学習できる、デザインのことも初歩を学習できる、という内容が良いです。
Web関連のことはインプットだけでなく経験もした方が理解が深まるので、体験型という点でおすすめです。
HTMLはWebサイトの骨組み・基礎となることなので、しっかり学んでブログに活かしていきましょう！
