HTMLをゼロから身につけるとしたら

HTMLを身に付けたい！という時、大抵何から始めれば良いか分からないです。自分だったらどうするかな、という話です。

HTMLのとっつきにくさ

Web制作においてHTMLは必須かつ基本の要素です。ですがCSSやJavaScriptが使われていないHTML単体で出来ることはとてもシンプルなため、これで本当にWeb制作出来るようになるの？という気分に襲われます。

見出しが <h1> で…文章が <p> で…と知識としては増えていくのですが、それで何かが作れるようになるように感じられず、「学べている」という感覚を持ちづらかったような記憶があります。

そのくせ <div> を多用するなとか、 <h1> はページに1つだ、いや2つだ、などと色んな意見が交わされていて、慣れてない自分から見るととっつきにくい印象でした。

ブラウザが分かるように翻訳してあげる

Webサイトが存在する目的は、伝えたい情報を見る人に伝えることです。その情報を機械（ブラウザ）が分かるように翻訳してあげるのがHTMLと考えてみてください。

ブラウザが情報を理解できる状態になっていないと、その後にCSSやJavaScriptを効かせることもできません。そうなると必要なデザインを実現することもできなくなります。

HTMLだけをやっているとシンプル過ぎて不安になると思いますが、その後のデザイン作業の土台を作っていると考えると見方が変わってきます。

また翻訳の方法は一つではありません。どう書くかは人間の情報の解釈によって微妙に変わります。なので最初はあまりベストプラクティスにこだわらず、情報を翻訳すること自体に慣れていけば良いでしょう。

WYSIWYGエディタで情報の翻訳に慣れる

学び始めの人にオススメしたいのは、学習のメモなどをWYSIWYGエディタで書いてみることです。例えばこのnoteでも良いですし、WordPressの投稿画面やnotionなんかも良いと思います。

WYSIWYGエディタはHTMLの中から基本的な要素を抜き出し、見出しや箇条書きなどを簡単に記述できるものです。このエディタのHTMLでできる範囲が大体分かっていれば、Webサイトを作るためのHTMLの知識としては半分以上をカバーできると思います。

noteのWYSIWYGエディタ

例えば箇条書きをするときはエディタの「リスト」で箇条書きにするように気をつけます。「・」と改行で箇条書きっぽい見た目にできますがそれは避けてください。そうした作業を繰り返すことで、情報を機械に向けて翻訳することに慣れていけるはずです。

あとはWebサイトの模写でしょうか。気に入ったサイトをHTMLで再現して、最後にソースコードを見比べて勉強するものです。全てのサイトが良い感じのソースコードになっているわけではないので、学び始めの時にいきなり1人でやるのは難しいかもしれません。ある程度HTMLに慣れてきたら大変有効な学習法だと思います。

30代で勉強し始めた時に苦労したことを思い出したのでこれを書きました。同じようにとっかかりに苦労している人の役に立てば幸いです。