私がウェブ系の会社に勤め始めた当初はHTML4の時でした。その後数年間おそらく４〜５年はXHTMLというものが主流になりました。そして現在のHTML５が主流になって早10年近く経ち、現在はHTML Standardというものが主流です。
変わったところは確かにありますが、基本的な構文は同じというイメージで大丈夫です。つまりある程度覚えたら少し新しい知識を足すだけで対応できた（動くことは動く）というのが私の経験です。ただ各ブラウザごとに対応状況が違ったり、タグが追加/廃止されたり、属性が追加/廃止されたり変化はあります。またSEOやページ表示速度/ブラウザのDOM解釈、セマンティックなタグ付け（意味を正しく指定する、例えばdivを無闇に乱用しない）など周辺知識も含めるとHTMLも世間で言われているような優しいものではなく意外と奥が深いと思います。
HTMLを体験
何はともあれ書いてみましょう。
以下操作できる人はPCで実際にやってみましょう。
PCがない方はPCでの操作をイメージしながら読んでみてください。
<html lang="ja">
<head>
<title>サンプルページ</title>
</head>
<body>
<h1>サンプルページ</h1>
<p>これは <a href="demo.html">サンプル</a>です。</p> <!-- これはコメント -->
</body>
</html>ここで私たちが主に書いたり、編集するのはheadタグとbodyタグの間です。
ここではheadタグにはtitleタグを書いていて
bodyタグにはh1タグとpタグ、aタグを書いています。
細かい説明は割愛しますがこれをテキストエディタにコピーペーストしてindex.htmlという名前でデスクトップに保存します。そしてindex.htmlを右クリックしプログラムから開くでブラウザを選択して開くとページが表示されると思います。ただサンプルという文字をクリックしてもまだリンク先には飛びません。
demo.htmlを作成してみましょう。以下のソースをコピーペーストしてdemo.htmlという名前でデスクトップに保存してみましょう。
<html lang="ja">
<head>
<title>demoページ</title>
</head>
<body>
<h1>デモページ</h1>
<p>ここをクリックして<a href="index.html">インデックスページ</a>に戻る</p>
<!-- これはコメント -->
</body>
</html>そしてdemo.htmlを同じように右クリック→アプリケーションで開く⇨ブラウザで開いてみましょう。
今度は「ここをクリックしてインデックスページに戻る」をクリックするとindex.htmlの内容が表示されると思います。そしてデモページにもリンクされていますね。これがハイパーリンクです。複雑なウェブページも基本的にはこのリンク機能を組み合わせて制御をしています。
HTMLはコーダー、ウェブデザイナー、ウェブ制作、フロントエンドエンジニアなどが担当することが多いですが、共有知識としてマーケター、プログラマ、ディレクター、インフラエンジニア、などの職種の方もある程度いじれる方が多い基本的な知識という位置づけです。
昨今ノーコードと言ってこう言った言語なしでも作れるツールはありますが、そう言ったツールの根っこで動いているのはやはりHTMLだったりします。またノーコードでもオプションでHTMLがいじれるというのも昔からよくある形です。結局HTMLが完全に不要になるという世界はまだまだ遠いというのが私の印象です。すぐに動かせるものですのでなんとなく触り続けていけば自然と身についていたりするのもHTMLのいいところだと思います。まずは少しずつ触る時間を増やしていくのがおすすめですね。
コメント