HTML入門！初心者向けに基礎コード・文法一覧・勉強方法を解説！

初心者向けのHTML入門

HTMLとは「Hyper Text Markup Language」の略称で、Webサイトの文書構造を記述するための言語のことです。近年ではWordPressなどのCMSの登場により、プログラミング経験がないような初心者でもHTMLを理解できれば、Webサイトの簡単な装飾ができるようになります。ここでは、初心者向けにHTMLの概要や特徴について詳しく紹介します。

HTMLとは

HTMLとは、インターネット上のWebサイトの文書構造を表現するための言語であり、CSSやJavaScriptといった言語と一緒に使用されるのが一般的です。CSSを使用すれば、Webサイトのスタイルを指定することができます。またJavaScriptを使用すれば、動的なWebサイトを作成することが可能です。CSSやJavaScriptを適用するためにも、HTMLはまず習得すべき必須な言語と言えるでしょう。

HTMLのような文書を記述する言語は、一般的にマークアップ言語とも呼ばれます。マークアップ言語では、文字や画像などにタグを使用してマーキングを行い、文書の骨組みを明確にできます。HTMLタグは、開始タグ「<タグ名>」と終了タグ「</タグ名>」でテキストを囲んで使用するのが一般的です。なお終了タグが不要なタグ要素もあるため、注意する必要があります。

HTML5とは

HTML5とはHTMLのバージョンが「5」であることを意味します。HTML1が開発されたのは1993年であり、バージョンアップを重ね、1999年にHTML4が開発されました。これまではHTML4がWebサイトを作成するための言語として主に利用されてきました。2014年にHTML5がリリースされ、HTML5が現在の最新バージョンです。

しかし2021年1月28日にHTML5は廃止され、「HTML Living Standard」が標準規格となっています。現状ではHTML5と「HTML Living Standard」では大きな差異はありませんが、「HTML Living Standard」は日々アップデートされるため注意が必要です。

HTML5はHTML4と比較して機能の豊富さが特徴です。例えばHTML5はマルチデバイスに対応しており、スマホなどさまざまなデバイスに対応したWebサイトを比較的簡単に作成できます。また、複数のブラウザにも対応しているのも魅力です。他にもHTML5を使用すれば、3Dアニメーションの作成・音声や動画の埋め込み・フォームの入力チェックなどができます。

HTMLの基礎コード

HTMLはWebサイトを作成するために必要な言語であることは理解できたでしょうか。ここではHTML入門ということで、HTMLの基礎コードを初心者向けに紹介します。

HTMLタグの記述方法

HTMLではタグ「<>」を使用して、文章構成を表現します。例えば、タイトルを付けたいときは「titleタグ」を使用します。開始タグと終了タグの間にテキストを記述すれば、Webサイトのタイトルを作成することが可能です。画像を挿入したいときには「imgタグ」を使用しますが、このタグには終了タグはありません。そのため終了タグの不要なタグがあることを覚えておきましょう。

HTMLの属性と属性値

要素の細かい動きを設定するためには、属性や属性値を記述する必要があります。属性の記述方法は「<要素名属性="属性値">」です。開始タグの要素名の後ろには、半角のスペースを空けなければなりません。また属性の後ろにはイコール「=」を付け、属性値はダブルクォーテーション「"」で囲む必要があります。なお属性値を囲む際にシングルクォーテーション「'」も使用できますが、一般的にはダブルクォーテーション「"」を使用します。

ここからはサンプルとして、英語や日本語などの言語を指定する「lang」という属性を使用し、例を示します。なお「lang」という属性は「html要素」に使用することが多いです。

<html lang="ja">

この記述により、HTML内の言語は日本語という設定にすることができます。属性名では「ja」を指定しており、「en」にすれば英語に設定可能です。

属性は複数指定することもできます。またよく使用される属性には「id」「class」があります。これらの属性は、CSSでデザインを定義するときに便利です。「id」は同じWebサイトで属性名が重複してはならないという特徴があります。一方「class」は同じWebサイトで同じ属性名を何度でも使用することが可能です。

HTMLのコード一覧

HTMLの基礎コードについては理解できたでしょうか。他にも理解しなければならないHTMLの基礎は数多くあるため、実際にサンプルコードを読み、まずはコードの意味を1つひとつ理解するのがおすすめです。ここでは、よく使用されるHTMLのコードについて詳しく紹介します。

hタグ

見出しタグには「h1タグ」から「h6タグ」までの6種類があります。大きい見出しを作成したいときには「h1タグ」を使用し、数字が大きくなるほど小さい見出しとなります。見出しタグを上手く使用すれば、ユーザビリティやSEO効果の向上が期待できるでしょう。見出しタグはテキストの見た目を設定するために使用するのではなく、Webサイトの階層構造をユーザーや検索エンジンにわかりやすく示すために使用する点に気を付けましょう。

imgタグ

「imgタグ」は画像を挿入するために使用します。これまでにも説明しましたが、「imgタグ」では終了タグが必要ありません。「src」という属性を使用して、表示する画像ファイルを指定することができます。また「alt」という属性を使用すれば、画像を表示できない場合に画像の代替テキストを表示することが可能です。さらに「width」「height」という属性を使用すれば、Webブラウザ上で表示する画像の幅や高さを指定することができます。

aタグ

「aタグ」はリンクを貼るために使用します。「href」という属性を使用して、リンク先を指定することが可能です。リンク先には遷移させたいURLを入力します。また「aタグ」ではテキストだけではなく、画像を挟むこともでき、画像のリンクボタンを作成することが可能です。

pタグ

「pタグ」は段落を表現するために使用します。「pタグ」は頻繁に使用される要素の1つです。「pタグ」の開始タグと終了タグで囲まれたテキストは1つの段落であることを示します。

HTMLの勉強方法

HTMLのよく使用されるコードについては理解できたでしょうか。ここでは、HTMLの初心者向けの勉強方法について詳しく紹介します。

本を活用する

HTMLに関する本は数多くあり、超初心者向けから上級者向けまでさまざまな本があります。初心者の方は、HTMLの概要や基礎についてゼロから説明している本を選ぶのがおすすめです。本を活用するメリットはネット環境がなくても勉強できるため、場所を問わず学習できる点です。また簡単にメモを書いたり、付箋を貼ったりして自分なりにアレンジできます。さらに、費用がほとんどかからないのも魅力です。

一方本を活用するデメリットとして、実践的なスキルが身に付きづらい点が挙げられます。HTMLに限らずプログラミング言語は、実際に手を動かして試行錯誤しながら学ぶことによってスキルが身に付きます。そのため体系的な知識を習得できる本だけではなく、サンプルコードや練習問題の記載された本も購入するのがおすすめです。

HTML入門サイト（学習サイト）を活用する

近年では、インターネット上でプログラミング言語を勉強できる学習サイトも数多くあります。例えば、「Progate」「ドットインストール」「schoo」「Udemy」などがあります。学習サイトはプログラミングスクールと比較するとサポートが少ないため、独学で勉強したい方向けです。また、プログラミングスクールよりも一般的に安い費用で利用できます。

学習サイトを利用するメリットは、実際に手を動かしながらHTMLを学べる点です。環境構築が不要な学習サイトであれば、すぐにHTMLのコーディングを始められます。ただし、将来的にWeb制作現場などで働きたいと考えている方は、環境構築から丁寧に解説されている学習サイトを選びましょう。

HTML初心者の方は、本で体系的な知識をインプットし、学習サイトでアウトプットすると効率よく習得できます。そのため本と学習サイトを併用してHTMLを学習するのはおすすめです。独学な苦手な方は、プログラミングスクールの受講を検討しましょう。

実際に手を動かしながらHTMLを学習しよう！

これまでに、HTMLの概要・基礎コード・コード一覧・勉強方法について初心者向けに解説しました。HTMLとはWebサイトの文書構造を記述するための言語を指します。なお、現在のHTMLの標準規格は「HTML Living Standard」です。

HTMLでは開始タグ「<タグ名>」や終了タグ「</タグ名>」を使用して、文章構成を表現します。ただし終了タグが不要なタグ要素もあるため、注意が必要です。また属性を付ければ、要素の細かい動きを設定することができます。例えば「imgタグ」を使用するときには、「src」という属性を使用して表示する画像ファイルの指定が可能です。

HTMLを勉強するにあたって、本と学習サイトを併用するのがおすすめです。特に、本はサンプルコードや練習問題が記載されているものを選びましょう。実際に手を動かしながら学習することで、HTMLの実践的なスキルを身に付けることができます。

気になる人のXをフォローしよう！