株式会社シベスピ 従業員ブログ

シベスピの社員ブログ。技術・想い・経験沢山書いていきます!

初級エンジニアのためのHTML初歩(1)

30歳になり、初めてバリウムを飲みましたが、ぐるぐる回る機械が面白くてテンションが上がったのでまたやりたい。どうも内田です。

最近、後輩にHTMLについて話す機会があったのですが、エンジニアになりたてってとにかく覚えることが多く、大変だと思います。
プログラム、データベース、業務知識、サーバー等、右から左から知識が入ってくる中、WEBを使用したシステムの案件にアサインされると大抵は通る道であるHTML。
今回は覚えることが多すぎな初級エンジニア向けにHTMLの初歩的なことを書いていこうと思います。

そもそもHTMLってなに。

えいちてぃーえむえる。Hyper Text Markup Languageの単語の頭文字をとってHTMLというのですが、なんだこれとWikipediaをみるとこう書いてあります。

HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ、HTML(エイチティーエムエル))は、ハイパーテキストを記述するためのマークアップ言語の1つである。

はい。日本語でおk
そうなんです。説明を読んでも、呪文、馴染みのないカタカナの羅列で何のことやらさっぱりわからないんですよね。

まずはハイパーテキストマークアップランゲージについて、紐解いていきましょう。

ハイパーテキストとは

Wikipediaにはこう書いてあります。

ハイパーテキスト (hypertext) とは、複数の文書(テキスト)を相互に関連付け、結び付ける仕組みである。「テキストを超える」という意味から"hyper-"(~を超えた) "text"(文書)と名付けられた。テキスト間を結びつける参照のことをハイパーリンクと言う。ハイパーテキストは文書を表示するユーザインタフェースの一種であり、従来の文書作成方法の持つ、要素を組織化することについての限界(特にその線形性)を克服しようとするものである。

要はリンク押したら違う文章(画面)に遷移できるすごい文章ってことです。

マークアップランゲージとは

Wikipediaにはこう書いてあります。

マークアップ言語(マークアップげんご、英: markup language)は、視覚表現や文章構造などを記述するための形式言語である。テキストファイルであることが多いが、バイナリデータによる形式もある。

要は、文章に構造的な意味を与えるために、記述する言葉となります。
文章に構造的な意味って言われても何のことやらって感じですが、構造については後述いたします。

意味は分かったけど、別に文章を書きたいわけじゃなくてサイトを作りたいだけなんですけど。。

おそらく、説明を読んで、意味は分かっても、なんとなく腑に落ちない。だって文章を書きたいわけではなく、サイトを作りたいだけですし!って方も往々にしていらっしゃると思います。

これこそが、一番重要なポイントです。

そもそも、HTMLは今でいう企業や個人のサイトを作るためにできた言語ではないんです。

HTMLのもともとの目的

HTMLはもともと、研究者同士の情報共有の手段としてできた言語です。つまり、論文とかを共有することを目的とした言語です。

ということは、リッチな見た目とか、アニメーションとかは要らず、論文っぽくタイトルや文章が書けて、かつ違う文章に遷移できればよかったわけです。
そんな文章共有を目的とした言語をサイトを作成するのにも使用している。ただそれだけなんですね。

そういってしまうと、文章を書くのではなくて、サイトを作る目的で作ってるんだから文章構造を意味付けるHTMLタグって気にしなくていいんじゃないかと思われる方もいるかもしれないのですが、
サイトを文章として理解する相手が実は目に見えないところにいまして。。皆さんがよく使われるであろうGoogleやYahoo等の検索エンジンはまさにサイトのHTMLをもとにサイトを文章として理解します。
そして、その文章からそのサイトはどういったサイトなのかを解析して検索順位や検索結果を出している、つまりは検索エンジンにサイトの内容を伝えるにはサイトの内容が伝わるようにHTMLで文章構造を組み立てて記述する必要があるんです。

まぁ、検索結果に出さないHTMLもあるとおもうのですが、書いた以上は誰がしかの目に触れるものですので、文章構造を意識して書いたほうが可読性を考えるとよいかと思います。

では文章構造ってなによってなった方。おそらくみなさん文章に構造的な意味をつけるソフトを触ったことがあるのではないかと思います。
おそらくその中で一番使われているであろうソフトがそう、Wordです。

Wordがわかれば、HTMLの文章構造がわかるだと!?

実は、HTMLタグと同じ意味のものがWordの中には沢山あるんです(そりゃもともと文章の構造を示すための言語ですし。。)
次回はこれらをHTMLタグとあわせて紹介していきます。

余談ではありますが、前職で未経験でもいいからHTML書ける方を採用したいけどどうしたらいいかと相談されたことがあります。
その時は実際、Wordできちんと文章書けるならHTMLもかけますよと回答しました。
逆を言えば、Wordできちんと文章を書けない人はHTMLも書けないので、初心者はまずwordで文章を書いてみるのもいいかと思います。