AIにコードを書かせる時代でも、HTMLの基礎を知っておくとWeb制作の修正力が上がります。バイブコーダー向けにHTMLとは何か、タグの意味、最低限覚えたい要素をわかりやすく解説します。
HTMLって何なん？バイブコーダーでも最初に知っといた方がええ理由
AIに「いい感じのサイト作って」って言えば、今はそれっぽいWebページくらい普通に出てくる。
ほんま便利な時代や。
Claude CodeでもCodexでもCursorでも、ざっくり指示したらHTMLとCSSくらい一瞬で書いてくれる。
「もう自分でHTMLなんか覚えんでええやん」って思う人もおると思う。
まあ、気持ちはわかる。
でもな。
HTMLがまったくわからんままバイブコーディングすると、ちょっと壊れた時に普通に詰む。
これが怖いねん。
AIが作った画面を見て、
「この文字を少し大きくしたい」
「この画像をもうちょい上にしたい」
「なんか変な余白がある」
「ボタンの場所がおかしい」
「タイトルだけ変えたい」
この程度の修正でも、HTMLが読めへんと毎回AIに聞くことになる。
もちろんAIに聞けばええ。
でも、毎回聞いてたら時間もかかるし、トークンも食うし、たまにAIが余計なところまで触ってくる。
あるあるやな。
だからバイブコーダーでも、HTMLの基礎くらいは知っといた方がええ。
ガチのエンジニアになる必要はない。
でも、AIが出してきたコードを見て「ここがタイトルで、ここが本文で、ここがリンクやな」くらいはわかった方が強い。
HTMLとは？
HTMLは、ざっくり言うとWebページの骨組みや。
人間で言うたら骨格。
建物で言うたら柱とか壁。
文章で言うたら見出しとか段落。
Webページって、見た目だけ見ると画像とか文字とかボタンが並んでるだけに見える。
でも裏側では、HTMLが「これは見出しです」「これは文章です」「これは画像です」「これはリンクです」って意味を決めてる。
たとえばこんな感じ。
<h1>HTMLとは？</h1>
<p>HTMLはWebページの骨組みです。</p>
<a href="https://wakaran.org/">トップページへ戻る</a>これを見て、
<h1> は大きな見出し
<p> は文章
<a> はリンク
ってわかれば、とりあえず第一歩としては十分や。
逆にこれが全部謎の記号に見えてると、AIが作ったページを修正する時にしんどい。
HTMLはプログラミング言語なん？
ここ、ちょっとややこしい。
HTMLはよく「プログラミング言語」と言われることもあるけど、厳密にはマークアップ言語や。
「なんやそれ」って話やな。
プログラミング言語は、ざっくり言うと処理を書くものや。
たとえば、
もしボタンが押されたら
この処理を実行する
みたいなことを書く。
JavaScriptとかPythonはそういうタイプ。
一方でHTMLは、
ここは見出し
ここは本文
ここは画像
ここはリンク
みたいに、ページの構造を決めるためのものや。
つまりHTMLだけでは、複雑な処理はできへん。
でも、Webページを作るならほぼ必ず土台になる。
ここが大事なんよ。
バイブコーダーがHTMLを知るメリット
バイブコーダーがHTMLを知るメリットは、めちゃくちゃ現実的や。
一番デカいのは、AIの出力を自分で確認できるようになること。
AIは便利やけど、たまにそれっぽい顔して変なコードを出す。
たとえば、
<h1>記事タイトル</h1>
<h1>小見出し</h1>
<h1>さらに小さい説明</h1>みたいに、全部を <h1> にしてくることがある。
見た目だけなら問題なく見えるかもしれん。
でもSEO的には微妙や。
普通は、
<h1>記事タイトル</h1>
<h2>小見出し</h2>
<h3>さらに小さい説明</h3>みたいに階層を作る。
この違いがわかるだけでも、AIの出力をチェックできるようになる。
これが強い。
よく使うHTMLタグ
最初から全部覚える必要はない。
ほんまにない。
まずはこれくらいでええ。
<h1>一番大きな見出し</h1>
<h2>中くらいの見出し</h2>
<h3>小さめの見出し</h3>
<p>文章の段落です。</p>
<a href="https://example.com">リンクです</a>
<img src="image.jpg" alt="画像の説明">
<ul>
<li>リスト項目1</li>
<li>リスト項目2</li>
</ul>これだけでも、かなり読める範囲が増える。
特にバイブコーディングでよく触るのは、
h1 / h2 / h3
p
a
img
div
section
button
inputこのあたりやな。
div とか section は最初ちょっとわかりにくい。
ざっくり言うと、
div = 何かをまとめる箱
section = 意味のあるまとまり
くらいで最初はええ。
完璧に理解しようとすると眠くなる。
ワイはなる。
AIがHTMLでよくやるミス
AIにWebページを作らせると、見た目はそれっぽくても中身が雑なことがある。
たとえばこういうやつ。
見出しの順番が変
<h1>タイトル</h1>
<h3>いきなり小見出し</h3>
<h2>そのあと中見出し</h2>これは人間が読む分にはそこまで困らんかもしれん。
でも、検索エンジンや読み上げソフト的には構造がわかりにくくなる。
SEO記事を書くなら、見出し構造は地味に大事や。
alt属性がない
画像タグには alt という説明文を入れられる。
<img src="html-basic.png" alt="HTMLの基本構造を説明する画像">これがあると、画像が表示されない時や、読み上げ環境でも意味が伝わりやすい。
AIはここを空にしたり、適当な英語を入れたりすることがある。
divだらけになる
AIはたまに何でも div で囲みがちや。
<div>
<div>
<div>
<div>タイトル</div>
</div>
</div>
</div>
まあ、動くことは動く。
でも読みにくい。
こうなると、あとから修正する時に「どのdivやねん」ってなる。
ほんまに。
HTMLがわかるとAIへの指示も上手くなる
HTMLを少し知ってると、AIへの指示が具体的になる。
たとえば初心者の指示やと、
タイトルをいい感じにしてになりがち。
でもHTMLがちょっとわかると、
h1はそのままで、h2見出しだけ少し目立つデザインにしてみたいに言える。
これだけでAIの出力精度が上がる。
さらに、
記事本文のpタグの行間を広げてとか、
画像のalt属性もSEO向けに入れてとか言えるようになる。
これができると、AIに振り回される側から、AIを使う側にちょっと近づく。
この差はデカい。
HTMLを全部暗記する必要はない
ここ大事。
HTMLを全部暗記する必要はない。
ワイも全部を頭に入れろとは思ってへん。
むしろ今の時代、細かいタグはAIに聞いたらええ。
でも、
これは見出し
これは本文
これはリンク
これは画像
これはボタン
これはフォーム
くらいは読めた方がええ。
バイブコーディングって、勢いで作れるのが魅力や。
でも勢いだけで作ると、壊れた時に戻れなくなる。
最低限のHTML知識は、言うたら保険みたいなもんやな。
バイブコーダー向けHTML学習の順番
最初はこの順番でええと思う。
h1 / h2 / p / a / img を覚える
div と section の違いをなんとなく知る
form / input / button を見る
class と id を理解する
CSSとのつながりを見る
特に class は大事や。
<p class="warning">これは注意文です。</p>この class="warning" みたいなやつが、CSSやJavaScriptから見た目や動きを指定する目印になる。
AIに修正を頼む時も、
warningクラスのデザインだけ変更して
って言えるようになる。
これ、かなり便利。
HTMLを知ってるとWordPressでも強い
WordPressでブログを書く時もHTMLの知識は役に立つ。
ブロックエディターだけで記事を書くなら、基本的にはHTMLを直接触らんでもいける。
でも、コード記事を書くならHTMLは避けて通れへん。
たとえば、
<pre><code>
<h1>Hello World</h1>
</code></pre>みたいなコード表示を扱う時、HTMLがわかってないと「なんか表示が変」ってなりやすい。
あと、テーマをいじる時もHTMLの構造が見えると強い。
「ここがヘッダー」
「ここが記事本文」
「ここがサイドバー」
「ここがフッター」
これがわかるだけで、WordPressテーマの修正もかなり怖くなくなる。
まとめ：HTMLはバイブコーダーの防具や
AI時代にHTMLを全部手書きできる必要はない。
でも、HTMLがまったく読めへん状態でバイブコーディングするのは、地図なしで知らん街を爆走するようなもんや。
勢いはある。
でも事故る。
HTMLは、バイブコーダーにとって武器というより防具やと思う。
AIが書いたコードを見て、
ここは見出しやな
ここは本文やな
このリンク先おかしいな
この画像に説明ないな
このdiv多すぎやな
って気づけるだけで、かなり事故を減らせる。
まずは全部覚えようとせんでええ。h1、p、a、img、div
このへんからで十分や。
AIに任せる時代やからこそ、最低限のHTMLは知っといた方がええ。
わからんまま突っ走るより、
ちょっとだけわかって突っ走る方が強い。
ほんまそれやで。