ナメてはいけないHTML

2020年11月28日

テクノロジー

t f B! P L
オールマイティWEBスペシャリストの、下駄です。 プログラミングを学ぶ時に必ずHTMLとCSSから学ぶ教材が多いのですが、正直PythonかRubyから始めるほうが効率的なのではないかという風に言われています。 確かに、僕の場合は、MSX-Basicからスタートしていることを考えたらHTMLなんて、後で覚えた形になっています。 そして、今どきHTMLを知らなくてもHTMLが書けるという事をどなたかのPodcastで言っていたのを聞いて、本当にHTMLを知らなくてもWEB紙後が作れるのかというのを考えてしまいました。

HTMLも言語

Hyper-Text-Markup-Languageの頭文字でHTMLということで、マークアップ言語に位置づけられることは、調べると簡単にわかりますが、たしかにプログラミングという内容ではないですね。 動的な要素もなければ、単体では静的ページをブラウザで表示するだけの言語なのですが、cssとjavascriptをセットで使ってようやくwebサイトが出来上がるというのが、今どきのwebサイトなのですが、同的要素が無いwebサイトであればhtmlとcssだけでいいかもしれませんが、何かしらの機能をつけたい時や、少しでも今風にしたい場合はjavascriptは欠かせません。 CSSは、アニメーションもできて、変数要素も持っていることから多少はプログラミングの概念を感じますが、それでも、条件分岐、繰り返し処理という、本来プログラミングの基本とされているこれらの処理ができないことから、cssができるとしても、プログラミングができるという風にはならないでしょう。 そして、HTMLエディタ系のソフトウェアを使うと、画面にDOM構造を配置していくだけでHTMLやCSSを書き込まなくてもwebサイトは作れるかと思います。 中には簡単な部分的な動的機能であれば、javascriptも、そこにセットしてくれる内容もあるようです。 でも、HTML言語でいちばん重要な事は、DOM構造と、それぞれのタグの役割を理解することにあるので、勝手に作られたHTMLの構造は、実際に考えられて作られたHTMLとは大きく違っていて、その後の変更や、何かしらの扱いに困るケースが多々有り、 その時点で困って、エンジニアにヘルプをするという企業から、何度か相談をもらったという経験がありますが、もれなくHTML書き直しをしたことは否めませんね。

構造化されたHTMLのメリット

HTMLタグをキチンと理解していないと、効率的なSEO対応ができません。 h1~h6タグの構成を理解せずに、見出し文字サイズを見た目だけで配置されたページでは、hタグの構造ルールが守られずに、検索サイトの評価ポイントが下がるというのは、かなり初歩的なSEO対応なのですが、 それ以外にも、セマンティックタグと言われる、article,nav,section...などの要素をきちんと配置するルールは、HTMLを理解していないとできないですし、単にHTMLコーディングしかできないレベルだと、こうしたSEOルールに対応するスキルも不足しているプログラマーもまあまあな割合でいるようですね。

W3CのHTMLチェッカー

実際に自分で作ったHTMLをW3Cが提供している「HTMLバリデーションサービス」というチェック機能を使ってみると、少なからず何かしらのエラーが見つかることでしょう。 HTMLチェッカー http://validator.w3.org/ CSSチェッカー http://jigsaw.w3.org/css-validator/ URLを入力すると、数多くのエラーが表示されて、びっくりする人も多いでしょう。 HTMLは、こうしたエラーを含んでいても、なんとなく表示されてしまう言語で、このようにエラー表示されることがないので、軽視されてしまうんでしょうね。 でも実際に、エラーがある状態でjavascriptを使ってDOMにアクセスすると、エラーでアクセスできないといった経験が過去に何度もあり、結果的にHTML構造の作り直しをする羽目になったというのは、経験してみないと分からず、その時点でHTMLの知識不足があったという事も知っているエンジニアはHTMLは軽視していないでしょう。 ちなみに、自分の会社のWEBサイトをチェックしてみたら、25個もの指摘がされてしまいました・・・orz 改めてHTMLを通してふんどしを締め直す必要を思い知らされました。 やはり、HTMLを、ナメてはけませんね。

このブログを検索

プロフィール

自分の写真
町田市, 東京都, Japan
プログラミングとサーバーを心の底から楽しむクリエーターです。 経営者であり、開発者でもありますが、得意としているのは、アイデア創出です。

ブログ アーカイブ

QooQ