WEBプログラミングを学習するにあたって、ほとんどの人がまず最初に学習するのがHTMLです。

しかし、プログラミング初心者の人は「HTMLとは？」と感じているのではないでしょうか？

そんなプログラミング初心者の人でもHTMLが理解できるよう、わかりやすい画像や具体例を使って解説していきます。

HTMLとは？

基本的には、WEBページにある文字がHTMLであると考えて問題はありません。
下の画像で考えると、赤い四角で囲った部分はHTMLで作られています。（厳密に言うとこれだけではないですが、一部のみ紹介します。）

 

この文字はどうやって書かれているのか？HTMLを理解するためには次に「タグ」という概念の理解が必要です。

HTMLのタグとは？

タグとは何なのでしょうか？
タグとは、「文字（テキスト）に役割を与えてあげる印のようなもの」と言えます。

下の例のように、文字をタグで囲ってあげることにより、ただの文字がh1（見出し）やp（段落）といった意味を持つようになります。

※最後のタグ（終了タグという）には「/」が入ることに注意してください。閉じ忘れなどがあると、表示が崩れたりする原因にもなります。

HTMLとは？

※「HTMLを学習しよう！」という文字にh1（見出し）という意味が加わりました。

<h1>は「heading(見出し)」頭文字と1をとって<h1>です。

上記のように、タグによって文字に意味を持たせることができます。

見出しに使いたい文字がある時は、その文字を<h1></h1>で囲ってあげます。
<h1></h1>以外にも、HTMLには多くのタグがあります。次にタグの中でよく使われる種類を幾つかご紹介します。

HTMLのタグの例

<h1>以外に、どんなタグがあるのでしょうか？今回は、よく使うタグをいくつか紹介します。

箇条書きにする【<ul><ol><li>タグ】

文字を箇条書きにしたい時は<li>タグを使います。

但し、<li>タグを使う時には、<ul>タグで囲まなければいけません。

<ul>と<ol>はリストの種類を決定する親タグです。

その下に子タグ<li>を使ってリスト表示させます。

必ず親タグと子タグをペアで利用します。

親タグ同士は組み合わせて利用できません。

<ul>と<li>をペアで使った例

【例1】

001
002
003
004
005	

<ul>
    <li>あいうえお</li>
    <li>あいうえお</li>
    <li>あいうえお</li>
</ul>

【結果】
・あいうえお
・あいうえお
・あいうえお

【例2】<ol>と<li>をペアで使った例

001
002
003
004
005	

<ol>
    <li>あいうえお</li>
    <li>あいうえお</li>
    <li>あいうえお</li>
</ol>

【結果】
１あいうえお
２あいうえお
３あいうえお

<ul>と違ってリスト先頭のマーカーが数字になります。

文字を太く（強調）する【<strong>タグ】
<strong>タグは文字を太くして、強調したい時に使います。

【例】

<strong>Hello HTML!!</strong>

【結果】

Hello HTML!!

HTMLとは？についてでした

他にもHTMLには多くのタグがあります。これからHTMLを学習していくと様々なタグを使うことなるでしょう。

投稿者プロフィール

kinukawahiroyasu
投稿タグ