【HTML入門】イラスト付き解説とサンプルの練習で基本を身につける

htmlの書き方の2つのルール

まずはhtmlの基本的な書き方のルールを覚えましょう。ルールはたったの2つです。

ルールその1 – 開始タグと終了タグで囲む

タグとは「<〇〇>」の部分を指します。

開始タグと閉じタグで囲む

htmlでは<開始タグ></終了タグ>(閉じタグとも呼ぶ)

この<〇〇>の中身を変えることで、見出しや段落、画像などを定義します。

開始タグと終了タグは微妙に異なり、終了タグにはスラッシュが付くことをしっかりと覚えておきましょう。

またタグで囲まれた全体のことを「要素」と呼ぶのでこれも覚えておきましょう。

htmlの出力結果

イラストのように「h1」というタグで囲ったものは大見出しで表示され、「p」で囲まれたものは段落で表示されることがわかります。

こうして任意のタグで囲い意味付けをしていくことを「マークアップ」と呼びます。

ちなみにプログラミングを行わず、htmlやcssだけの記述(マークアップ)を行う職業のことを「マークアップエンジニア」と呼びます。

ルールその2 – 入れ子構造にする

入れ子構造」なんて言葉は普段の生活でまず使わないので初めて耳にする方も多いでしょうが、htmlを勉強する上でよく使う言葉です。

先ほどのhtmlの定型文にもこの入れ子という構造が使われているので、そちらを使って解説します。

入れ子の説明

定型文のコードは<!DOCTYPE html>の一文を除いてhtmlタグに囲われていますよね。

このようにタグの中にタグを記入することを「入れ子」と呼びます。タグを別のタグで囲うことによって、どこからどこまでがひとまとまりの要素であるかグループ分けすることができます。

定型文を例にすれば、head要素はhtmlタグで囲われているので「html要素でもあり、head要素でもある」といえ、同じくbody要素も「html要素でもあり、body要素でもある」といえます。

headタグで囲まれた部分が表示されず、body要素で囲まれた部分が表示されるのもこの入れ子という構造でグループ分けしてあるからです。このように入れ子という仕組みはhtmlを記述する上で頻繁に使用します。

文章の説明だけではピンとこないと思いますが、後ほどのコードを書く練習で入れ子についてはマスターすることができるようになっているので安心してください。

初心者の頃にやってしまう入れ子のミス

nest-correct.png

入れ子の間違った例

タグの入れ子はいくつでも追加することができます。ただ、イラストの通り別のタグの開始タグや終了タグとクロスした関係になってしまうのは間違った入れ子の使い方なので気をつけましょう。初心者のうちはこうしたミスから「実際にwebブラウザで表示したら表示がめちゃくちゃ・・・」なんてことはよくあります。

次は実際のコードを書いていくよ

小難しい説明はここまで!htmlの基本は理解できたと思うから今度は実際にwebサイトをつくる時に使用するタグを書いていこう!

続き:実際に書いてhtmlのタグを覚えよう!

この記事を書いた人

web関連の勉強をしているみんなのために「とにかくわかりやすい記事」にこだわってwebスキルの情報を発信しています。フリーランスでデザイン・コーディング・webマーケティング(SEO)とweb全般のお仕事をしています。

この記事を読んだ人におすすめ

  • 【初心者向け】HTMLのimgタグを使って画像を表示する方法

  • 【HTMLのテクニック】コメントアウトを覚えてコードを見やすくしよう

  • マークアップの意味とマークアップ言語の種類について

  • HTMLのリンク作成|リンクタグの使い方と【a href】の意味を優しく解説

  • HTMLの見出しタグ|h1〜h6の使い方をイラストを使って解説

  • 入れ子構造をイラストを使ってわかりやすく説明!

  • HTMLの説明リストタグ【dl・dt・dd】の使い方を徹底解説

  • 【一覧表あり】HTML5でのタグの入れ子のルールを徹底まとめ

記事をもっと見る +

目次を開く