HTML,CSS

Webデザイナー入門|UNIT1-1|HTMLって何?よく聞くこの言語をどんなものか理解しよう

HTMLって何か知ってますか?

プログラムの中でも最もポピュラーなもので、Webサイトやアプリ、電子メールなどを適切に表示するためにさまざまな場所で使用されています。

HTMLとは?

それではそのよく聞く「HTML」について。

HTMLとは

Hyper Text Markup Languageハイパー テキスト マークアップ ランゲージ

マークアップ言語の一種であり、JavaScriptやPHPなどのプログラミング言語とは異なります。

プログラマーを目指さない人でも、HTMLを知っておくだけでメールやブログなどで理解を深める事ができるので活躍の場も多く、覚えておいて損はしないでしょう。

CSS(レイアウト)やJavaScript(アクション)などのプログラムと併用することが出来て、より高度なページを作成する事が可能です。

マークアップ言語

HTMLはマークアップ言語です。
プログラミング言語とは異なるので違いを説明しておきます。

マークアップ言語とは

Webサイト文章に目印をつけ
コンピューターに認識させるための言語

「タグ」と呼ばれる要素で記述して文章を分類して装飾を行います。
コンピューターはタグにより「見出し」なのか「本文」なのか「リンク」なのか、さまざまな文脈の意味合いを適切に理解する事が出来ます。

難しく書いてるけど要するに、
「この文は○○ですよ」
とコンピューターに示す言語です。

HTMLってどんな役割?

説明が多少重複しますがHTMLとはマークアップ言語の一つで、Webサイトの文章を見出しや段落などに分けて構成を組み立てる役割を担います。

HTMLタグと呼ばれる書式を使い、Webサイトを組み立てていく事で読みやすいページが完成します。
HTMLを使わない場合は、ただの一枚のページに文字だけがそのままびっしり羅列されるだけの読みにくいページになります。

文章を読みやすく装飾したり、クリックするだけでURLにアクセス出来るようにしたりとページ構成を組み立てる重要な役割を実行している言語なので理解する事で自由な表現が出来るようになります。

タグと要素

HTMLはタグで囲まれ要素と呼ばれます。

例えば見出しを作ってみましょう。

<h1>Hello World</h1>

「見出し」文章Hello Worldを囲んでいるタグは「大見出し」を表すタグ。
タグで囲まれている領域を「要素」といいます。

例のように「h1」タグで囲まれた要素を「h1要素」といいます。

空要素

要素には、終了タグがなく開始タグだけで利用できる要素があり「空要素」と呼びます。

よく使われる例では、

  • 文章を改行する<br>
  • 水平線をつける<hr>
  • 画像を表示する<img>

などがあります。
ここからここまでという範囲を指定する必要がないので、開始タグだけで記述して利用します。

属性

例えば上記で利用した見出しを説明する画像
HTMLで表示するとこうなります。

<img src="https://locany.net/wp-content/uploads/2023/02/ACA4D5AF-0CCF-4B11-A7D7-28F9205571AD-1024x533.jpeg" alt="" class="wp-image-4132" width="393" height="202"/>

src属性で指定している属性値は画像のURL
alt属性で指定している属性値は画像の説明文
width属性の属性値は画像の横幅
height属性の属性値は画像の縦幅です。

それらの属性を組み合わせた要素で構成されたHTML
表示される画像が下記となります。

属性は『"』(ダブルクォーテーション)または『‘』(シングルクォーテーション)で囲むことで有効となります。
どちらでも違いはありませんがどちらか1つに統一して使いましょう。

今はざっくりとで大丈夫なのでこの仕組みを頭に入れて置いて頂く事で後に出てくるHTMLタグを読む上で役に立ちます。

属性の値によりHTMLタグは装飾され自由に組み合わせて様々な表現を行います。

インデントで誰にでも読みやすいHTML

Web制作の現場では、インデントを使いHTMLの入れ子構造をわかりやすくして誰にでも編集がしやすいように制作するのがマナーです。

開発は基本的には1人でするものではないので他の人が見た時にわかりやすくしておかないと作業効率が悪くなってしまうからです。

一人前のエンジニアを目指すのであれば、インデントをうまく使い誰にでも編集ができるHTMLを作成する事を心がけましょう。

<div>
    <h1>
        Hello World
    </h1>
    <p>
        プログラムを学ぶ皆さん、一緒に頑張りましょう♪
    </p>
</div>

こんな感じです。

タグを入れ子にすることでどこからどこまでがdiv要素どれがp要素なのか分かりやすくなります。
HTMLは長く慣ればなるほど複雑になるので解読するのが大変になります。

インデントを使ってコードを読みやすくして編集しやすいコード作成を心がけましょう。

hタグを理解して使いこなそう

続いての重要な基礎
「hタグ」についての解説です。

すでに上記説明でも登場した「hタグ」
実際にどのような役割なのでしょうか?

hタグの重要性

hタグとは、ユーザーや検索エンジンがページの重要なテーマを理解するためにHTMLでマークアップする見出しタグです。

hタグを使わないページは構造が分かりづらく、重要なテーマが何なのかが明示できないので訪問者に訴求できません。
結果、Googleから評価されづらいコンテンツになり、SEOでマイナス評価を受けて訪問者を減らしてしまう結果に繋がってしまいます。

hタグは適切に使い、分かりやすいコンテンツにしましょう。

hタグの使い方

hタグはh1から始まり
h2、h3、h4、h5、h6と続きます。

数字が小さい物から順に使います。
hタグはh6まで全て使う必要はありません。
基本はh1タグは1ページに1つだけ使います。

記事全体の見出しをh1で付けます。
記事全体のタイトルとなる部分です。

記事内で章を分けるときにh2タグを使います。
さらにh2タグの中で章を分けるときにh3タグを使い、h3タグの中で章を分けるときにh4タグ〜と1段階小さいhタグを使い章を分けていく事でまとまりのあるページを作成する事が出来るので訪問者が読みやすく、ユーザビリティ向上に繋がりSEOからも高評価を得ます。

このhタグの使い方を間違えて順序がバラバラになってしまうとユーザーも検索エンジンも混乱してしまい、結果SEOに悪評価を与えてしまうのでキッチリと理解した上で利用しましょう。

<h1>記事のタイトル<h1>
    <h2>起</h2>
        <h3>おじいさんとおばあさんがいました</h3>
        <h3>おじいさんは山にしばかれに</h3>
        <h3>おばあさんは川に洗濯に</h3>
    <h2>承</h2>
        <h3>川上から大きな桃が!!</h3>
        <h3>食い意地のはったおばあさんは持ち帰り</h3>
        <h3>桃から男の子が誕生ウェイ</h3>
        <h3>桃のすけと名づけました</h3>
    <h2>転</h2>
        <h3>桃のすけは強さを求め旅に出る</h3>
            <h4>人造悪魔の実、SMILEを食べる</h4>
            <h4>海賊達と友達になる</h4>
        <h3>故郷に戻り戦いを決意する</h3>
        <h3>悪い竜との戦いが始まる</h3>
    <h2>結</h2>
        <h3>国をかけた大決戦</h3>
            <h4>国中が一丸となり戦う</h4>
                <h5>死力を尽くして何度でも立ち上がる</h5>
                <h5>海賊が覚醒を始める</h5>
            <h4>竜は朽ちて国を取り戻す</h4>
            <h4>長い年月の苦しみから国中が解放される</h4>
        <h3>活躍した海賊は世界の皇帝となる</h3>

上記図をHTMLにしてみるとこのようなプロットが作成できました。

このように見出しだけでもある程度のストーリーがわかってしまうほど見出しは内容にそったもので読者に書かれている内容を伝える役割があります。

hタグを適正に使う事で読者へ記事の内容を訴求して読みたく感じてもらうために重要な役割を持っているので適当に付けずにしっかり考えて適正なhタグを利用してください、

まとめ

HTMLの概要でした。

HTMLを適正に使えるようにするために、しっかりと知識をつけてください。
完璧に全てのタグを丸暗記をしなくてもググりながら調べながらコードを書いたらいいと思います。

「こんな時は○○のタグを使う!」
実際に作業するときにそうやって閃く事ができるだけであとはコピペでいいと思います

スポンサーリンク

0
ぜひ、ご意見をコメントして下さいx