HTMLとは?WEBデザイナーを目指すなら知っておきたい基礎知識

公開日:2022/09/01 最終更新日:2023/11/16

働き方が多様化している現在、自宅でできる仕事の幅も増えてきています。WEBデザイナーはホームページの作成やWEBサイトのデザインを担当する仕事であり、需要が高まっていて注目を集めている仕事です。今回は、WEBデザイナーとして活躍するうえで欠かせないHTMLの基礎知識について解説します。

そもそもHTMLとは

HTMLとはHyper Text Matkup Languageの略であり、WEBサイトを構成する言語です。ハイパーテキストとはWEBサイトに画像や動画を挿入したり別のWEBサイトのリンクを貼ったりと、さまざまな役割を果たしてくれるものです。

マークアップとは文章の構成・役割を示すもので、見出しや表、段落がこれに当てはまります。文章が構成されている要素を表しているといえば伝わりやすいでしょう。

このHTMLによって、検索エンジンが「このWEBページはこのような構造になっている」と把握できるのです。もっと分かりやすく表現するのであれば、WEBページに表示されている文字そのものです。

文字がすべて同じ大きさだったり色だったりすると、どこが重要なのか、どの部分に力を入れているか伝わりにくくなってしまいます。そこで、テキストの色や大きさ、太さ、装飾によってアピールするのです。

さまざまなバージョンがある

HTMLにはHTML4、HTML5などいくつか種類が存在します。数字が大きいほど新しいバージョンであり、それ以前のバージョンに比べグラフィックの描画や音声・動画の再生が容易になっている点が特徴的です。

今まで行えなかった処理に対応できるようアップデートされることも多く、新しいバージョンが使えるほど自分によって有利になるといえるでしょう。

HTMLのタグ・種類

HTMLのタグとその種類について説明します。HTMLは、文字を装飾するために使われるものであり、タグで挟んだ部分を要素といいます。そのままだとほかの文章と大きさも太さも変わらない要素が、HTMLのタグで囲むことで見出しになったり装飾が施されたりするのです。

主なHTMLタグ

タグの種類ですが、主なものとして見出しにつかわれるhタグがあります。これはh1、h2、h3のように、任意で小見出しをつけることも可能です。

続いて、通常のテキストに使われるのがpタグです。段落として1つのまとまりにしたい時に使うものであり、pタグを使用すると自動的に改行されるほか、pの開始タグと終了タグで囲んだ文章はタグ内で改行してもブラウザで見た時には改行されません。

そのほかに、箇条書きで使われるliタグ、リンクを挿入できるaタグ、画像を表示するimgタグ、太文字にする際のstrongタグ、表を挿入できるtableタグなど、さまざまなものがあります。ImgタグはPNG、JPEG、GIFなどWEB上で広く使われている画像のほかに、PDFやアニメGIFなども表示できます。

簡単なものから非常に複雑なものまで多種多様であり、ここで紹介したのはあくまで一例に過ぎません。HTMLタグを使いこなすことで、より魅力的なWEBページの作成ができてWEBデザイナーとしての評価が上がることにつながるでしょう。

HTMLの書き方

HTMLは、タグで要素を囲むという書き方が基本です。たとえば、見出しに使いたい文章があった場合「<h1>要素</h1>」と入力します。これでその要素がほかの文章とは異なる役割を果たしてくれるようになります。

最初の<h1>が開始タグ、終わりの</h1>が終了タグです。終了タグには「/」を忘れずにつけてください。これがなければ表示が崩れてしまうので注意しましょう。

HTMLはタグを駆使して文字や画像、映像、リンクなどに役割を与えるものとイメージしてください。これによってWEBページにメリハリがついて「ここを見れば重要な部分が分かる」「自分が知りたい情報はこの段落に書かれている」ということが、閲覧している人に分かりやすくなるのです。

そして、検索エンジンから見て優秀なページ、内容を認識しやすいページだと判断されれば、アクセス数が狙えて検索時に上位に表示されやすくなる点が特徴的です。

特別なツールは必要ない

有料のHTMLツールもありますが、標準仕様のテキストやメモ帳でHTMLを書くことも可能です。よく使うタグはあらかじめメモ帳に登録しておけば、WEBページを作成する際にそこからコピー&ペーストをしてすぐに適用させることができます。

また、メモ帳にHTMLタグで挟んだ要素を記入して、拡張子をhtml形式、保存先はデスクトップ、ファイルの種類はすべてのファイルで保存します。そうして保存したファイルをクリックすると、ブラウザ上に自分が作成したHTMLが表示されるようになるのです。

WEBページを作成する際にいちいち手間をかけることもなく、見やすいページを作れます。魅力的なページを作ってWEBデザイナーとしての実績を積み、より条件のよい仕事がもらえるよう励んでください。

まとめ

HTMLについて解説しました。耳慣れない単語かもしれませんが、実は自分がよく見ているWEBページをより魅力的にするためのものなのです。WEBデザイナーの地位は向上してきていますが、満足いくまで稼げるようになるには知識やスキルを磨かなくてはいけません。HTMLを使いこなして素敵で見やすいWEBページを作成し、自分の評価を上げていきましょう。

【東京】社会人でも通えるおすすめのWEBデザインスクール

イメージ
会社名東京デザインプレックス研究所HAL東京ヒューマンアカデミー インターネットアカデミー
特徴本物のデザイン力が身に付く!
フリートレーニング3年無料!
ゼミや体験学習が充実しているオンライン講座が便利海外へ就職の可能性も拡がる
詳細リンク公式サイトはこちら公式サイトはこちら公式サイトはこちら公式サイトはこちら