WebサイトにHTMLが使われていたり、プログラミング学習の手始めにおすすめとされたりすることが多いHTML。
実際にHTMLについて詳しく知っている人は少ないのではないでしょうか。
本記事では、初心者でも分かりやすくHTMLについての基礎知識から使用するタグ、書き方を詳しく解説していきます。
HTMLをこれから学びたいと思っている人は、ぜひ参考にしてみてください。
また、HTMLを無料で学習できるサイトを試してみるのもHTMLをより詳しく知るための第一歩です。「会員登録不要」でしかも「無料」の学習サイトはDig Skillがおすすめです。
HTMLとは何なのか
HTMLは、ウェブページの構造や内容を表現する言語です。
具体的には、文章の見出しや段落、リンク、画像などを配置することができます。
また、HTMLはハイパーテキストを扱うために開発されました。
ハイパーテキストとは、文書同士をリンクでつなぐことができるテキストのことです。
理由としては、インターネットが成長するにつれて、様々な情報を効率的に整理し、ユーザーが簡単にアクセスできるようにするためです。
プログラミング言語ではなくマークアップ言語
HTML（HyperText Markup Language）は、プログラミング言語ではなくマークアップ言語です。
HTMLは、テキストに対して装飾や構造を与える目的で開発されました。
具体例として、HTMLはタグを使って文書の構造を定義しますが、プログラミング言語はアルゴリズムや条件分岐など複雑な処理が可能になります。
HTMLは、ウェブページの構造と内容を記述するマークアップ言語であり、プログラミング言語とは役割が異なります。
HTMLの基礎知識とは
HTMLの構成要素は、以下の表です。
| 項目 | 説明 |
|---|---|
| タグ | HTMLのコードの中で使われる記号で、要素の開始と終了を示します。 |
| 要素 | タグで囲まれた部分で、ウェブページの構成要素です。 |
| 属性 | タグ内で要素に追加情報を与えるために使われます。 |
上記の基礎知識を理解し、適切に活用すれば、ウェブページの構造や内容を効果的に表現できます。
HTMLとCSSは何が違うのか
HTMLとCSSの違いは、役割が異なることです。
HTMLはウェブページの構造と内容を記述するための言語ですが、CSSはウェブページのデザインやスタイルを設定するための言語です。
具体例として、HTMLでは文章の見出しや段落、リンクなどを配置できますが、CSSでは文字の色やフォント、背景色などのデザイン要素を指定できます。
HTMLとCSSは、ウェブページの構造と内容を記述するHTMLとデザインやスタイルを設定するCSSという役割が異なるため、ウェブページ制作において両方を適切に使い分けることが重要です。
HTMLのメリットとデメリットとは
HTMLは、ウェブページの構造を記述するための言語です。
メリットとデメリットを理由、根拠や具体例を紹介します。
HTMLのメリット
HTMLのメリットは以下のようになります。
- シンプルで学びやすい
タグを使って文章の構造を記述するだけで、簡単にウェブページを作成できます。 - 柔軟性
CSSやJavaScriptと組み合わせることで、デザインやインタラクティブ性も追加できます。 - 汎用性
ほとんどのウェブブラウザで表示できるため、ユーザーにとってアクセシビリティが高いです。 - SEO対策に有効
HTMLで適切なタグを使うことで、検索エンジンに情報を効果的に伝えることができます。
HTMLのデメリット
一方、HTMLのデメリットもあります。
- デザイン制約
一部のデザインがHTMLだけでは実現できず、CSSやJavaScriptが必要になります。 - 保守性
大規模なウェブサイトの場合、共通のデザインやレイアウトを変更する際に、多くのページを一つずつ修正する必要があります。 - コードの冗長性
同じようなタグが繰り返されることがあり、コードの見通しが悪くなりがちです。 - 機能制約
HTMLはウェブページの構造を記述することが主な目的であるため、より高度な機能を実現するためには、他の言語が必要となります。
HTMLのバージョンとは
HTMLのバージョンとは、HTMLの仕様の進化に伴い、各バージョンごとに機能や構文が追加・変更されていった歴史です。
現在は「HTML Living Standard」が最新で、過去の「HTML5」は2021年1月に廃止されました。
新しいバージョンは、ウェブ技術の進化に合わせて機能が改善されており、ウェブ開発者にとってより効率的で便利な言語へと進化しています。
HTML5について詳しく知りたい人は、「【初心者向け】HTML5とは？特徴やできることを分かりやすく解説！」の記事を参考にしてみてください。
HTMLの代表的なタグ
代表的なタグや利用例は、次の通りです。
| タグ | 利用例 | 解説 |
|---|---|---|
| hタグ | <body> <h1>This is a Heading Level1</h1> <h2>This is a Heading Level2</h2> <h3>This is a Heading Level3</h3> <h4>This is a Heading Level4</h4> <h5>This is a Heading Level5</h5> <h6>This is a Heading Level 6</h6> </body> | 左記のコードでは、h1からh6までの見出しを示しています。それぞれの見出しは、異なる大きさと重要度を持っており、一般的にはh1が最も重要で大きく、h6が最も小さくなります。 |
| titleタグ | <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Example Page Title</title> </head> | 左記のコードでは、titleタグの中に”Example Page Title”というテキストが記述されています。ブラウザのタブにはこのタイトルが表示されます。ブラウザのタブに表示されるタイトルは、ページ全体の内容や目的を簡潔に表すものであるため、適切なタイトルを設定することが重要です。 |
| divタグ | <div class=”container”> <div class=”section”> <h2>Section 1</h2> <p>This is the content of section 1.</p> </div> </div> | 左記のコードでは、divタグを使用して2つのセクションをグループ化し、それぞれのセクションにはクラスが割り当てられています。CSSを使用して、各セクションのスタイルを定義しています。.containerクラスは全体のコンテナを定義し、.sectionクラスは各セクションのスタイルを定義します。 |
| spanタグ | <body> <p>This is a <span class=”highlight”>highlighted</span> text.</p> <p>This is <span style=”font-style: italic;”>italic</span> text.</p> </body> | 左記のコードでは、spanタグを使用して2つの異なるスタイルを適用したテキストが示されています。1つ目の例では、highlightクラスが適用された部分が赤色で太字になります。2つ目の例では、inlineスタイル属性を使用してイタリック体が適用された部分が示されています。spanタグを使用することで、テキストの一部分に対して個別のスタイルを適用することができます。 |
| pタグ | <body> <p>This is a highlighted text.</p> <p>This is italic text.</p> </body> | 左記のコードでは、2つの段落がそれぞれpタグで囲まれています。ブラウザは各pタグ内のテキストを1つの段落として表示します。段落は通常、テキストのまとまりや意味のある区切りとして使用されます。 |
| ul・ol・liタグ | <body> <h2>Unordered List (ul)</h2> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <h2>Ordered List (ol)</h2> <ol> <li>First item</li> <li>Second item</li> <li>Third item</li> </ol> </body> | 左記のコードでは、ulタグを使用して順序のないリスト（Unordered List）とolタグを使用して順序付きリスト（Ordered List）を作成しています。各リスト内のアイテムはliタグで表されています。ulタグは通常、リスト内の項目の順序が重要ではない場合に使用され、olタグは順序が重要な場合に使用されます。 |
| strongタグ | <body> <p>This is <strong>important</strong>information.</p> <p><strong>Warning:</strong> Do not touch the electrical wires.</p> </body> | 左記のコードでは、strongタグを使用してテキストを強調しています。例では、”important”という単語と”Warning:”という警告文が強調されています。ブラウザーは通常、strongタグ内のテキストを太字で表示しますが、意味的な強調も加えます。 |
| brタグ | <body> <p>This is a paragraph.<br> This is another line in the same paragraph.</p> <p>This is a new paragraph.</p> </body> | 左記のコードでは、brタグを使用して段落内に改行を挿入しています。最初の段落では、最初の行の後にbrタグが挿入され、2つの行が同じ段落に表示されます。2番目の段落では、通常の段落分割が行われます。 |
| aタグ | <body> <p>Visit <a href=”https://www.example.com”>Example</a> website.</p> <p>For more information, <a href=”contact.html”>contact us</a>.</p> </body> | 左記のコードでは、aタグを使用して2つのハイパーリンクが作成されています。最初のリンクでは、”Example”というテキストが表示され、クリックするとhttps://www.example.com に移動します。2番目のリンクでは、”contact us”というテキストが表示され、同じディレクトリ内のcontact.htmlに移動します。 |
| imgタグ | <body> <h2>Displaying an Image</h2> <img src=”https://www.example.com/image.jpg” alt=”Example Image”> <h2>Displaying a Local Image</h2> <img src=”local-image.jpg” alt=”Local Image”> </body> | 左記のコードでは、imgタグを使用して2つの画像が表示されています。最初の画像は外部のURL（https://www.example.com/image.jpg）から読み込まれ、2番目の画像は同じディレクトリ内のファイル（local-image.jpg）から読み込まれます。alt属性は、画像が読み込まれなかった場合やユーザーが画像を見ることができない場合に代替テキストとして表示されます。 |
HTMLを使用したWebサイトの作成方法と書き方とは
HTMLを使用したWebサイトの作成方法と書き方について説明します。
まず、HTMLファイルを作成し、作成したHTMLファイル中にタグを記述していくことでWebページが形作られるでしょう。
タグは、上記で紹介した代表的なものを用いることが一般的で、開始タグと終了タグの間にコンテンツを記述していきます。
適切なタグや属性を用いることで、見た目や構造を整えることが可能です。
記述するためのツールを用意する
必要なツールは、次の表です。
| 項目 | 説明 |
| パソコン | コードを記述するために必要な媒体です。 |
| テキストエディタ | テキストファイルを作成、編集、保存するためのソフトウェアツールです。 |
| フォルダ | コンピュータ上でファイルを整理し、階層的に保存するためのコンテナです。 |
| ファイル | コンピュータ上でデータを保存するための単位です。 |
テキストエディタについて詳しく知りたい人は、「おすすめ有料・無料プログラミングソフト 【初心者からできる！】」の記事を参考にしてみてください。
テキストエディタにHTMLを記述して保存
テキストエディタを開き、HTMLの基本構造やタグを記述していきます。
記述が終わったら、ファイル形式は「.html」で保存し、ブラウザで確認しながら修正を加えていきましょう。
実際にブラウザで確認する
ブラウザでの確認が重要な理由は、デザインやレイアウトが正しく表示されているかをチェックするためです。
具体例として、画像や文字の位置を調整したとき、想定通りの配置になっているかを見ることができます。
また、異なるブラウザでは表示が変わることがあるため、複数のブラウザでテストすることをおすすめします。例えば、Google ChromeやFirefox、Safariなどで確認することで、より多くのユーザーに適切な表示が提供できるでしょう。
さらに、スマートフォンやタブレットなどのデバイスで表示されるかも確認しましょう。
ウェブデザインがレスポンシブ対応しているかどうかを把握することができます。
Webサイトで公開してみる
Webサイトを公開する利点は、ユーザーからのフィードバックを得られることです。
例えば、操作性や使い勝手が良いか、目的に沿った情報が伝わるかなど、意見や提案が寄せられることがあります。
また、公開したウェブサイトをSNSなどで共有することで、知り合いや友人からも意見をもらうことができます。彼らからのアドバイスを元に、ウェブサイトをさらに良いものに改善することができるでしょう。
さらに、公開しているウェブサイトのアクセス解析を行うことで、訪問者の動向が把握できます。
ウェブサイトの弱点や改善すべき点が明らかになり、更なるブラッシュアップが可能です。
HTMLを書く時の注意点とは
HTMLを書く際に注意すべきポイントは、タグの正しい使用や閉じ忘れのないこと、インデントやコメントの整理です。
タグが正しく使われていれば、ブラウザが正確に解釈でき、エラーが発生しにくくなります。
また、タグの閉じ忘れがないようにすることで、予期せぬ表示や動作の不具合を防ぐことが可能です。
インデントを揃えて書くことで、見やすく整理されたコードになり、将来のメンテナンスも簡単になります。
コメントも重要で、他の開発者や自分自身がコードを理解しやすくなります。
HTMLを記述するときは入れ子を意識する
HTMLを記述する際に入れ子構造を意識することが大切です。
入れ子とは、あるタグの中に別のタグが存在する構造のことを言います。
例えば、<div>タグの中に<p>タグや<img>タグがあることが挙げられます。
入れ子構造を意識する理由は、ウェブページの構造が分かりやすくなり、コーディングがしやすくなるためです。
また、入れ子構造が適切にできていると、CSSでスタイルを適用しやすくなります。
入れ子構造を意識することで、タグの閉じ忘れを防ぐこともできます。
予期せぬ表示の不具合やエラーを避けることができるでしょう。
入れ子構造を意識したHTML記述は効率的で安全なコーディングに繋がります。
メモ帳でもいいがテキストエディタを活用することがオススメ
テキストエディタは、メモ帳に比べて多機能で便利です。
理由としては、テキストエディタはシンタックスハイライト機能があり、プログラミング言語ごとの色分けができるため、コードを見やすくなります。
具体例として、HTMLのタグは青色、属性は赤色になるよう設定できるでしょう。
また、テキストエディタには自動補完機能も付いており、入力を助ける形でコードを補完してくれます。入力ミスを防ぎ、効率よくコーディングができます。
さらに、検索と置換機能が強力です。
複数ファイルにまたがった検索や置換も簡単にできるので、大規模なプロジェクトでもスムーズに作業が進みます。
メモ帳ではなくテキストエディタを活用することがおすすめです。
まずはサンプルコードを模写してみる
プログラミング学習の初期段階では、まずはサンプルコードを模写してみることが有効です。
理由は、サンプルコードを模写することで、構文の書き方を身につけやすくなるからです。
具体的には、変数の宣言や制御構文など、一度に覚えるべきことが多いため、模写を通じて実際に手を動かすことが大切です。
さらに、模写を行うことで、エディターや開発環境にも慣れることができます。
開発環境の設定やショートカットキーの使い方など、効率的なコーディングの基盤を築くことができます。
まとめ
本記事では、HTMLの定義とそのタグの使用方法について説明しました。
HTMLは初心者にも学習が容易なプログラミング言語です。
今回解説したタグ以外にも、多くのタグが存在していますので、興味を持ったものから実際に試してみると良いでしょう。
HTMLの学習方法について詳しく知りたい人は、「HTML／CSSは独学で習得できる？必要な期間と勉強方法を解説」の記事も参考にしてみてください。
プログラミングに興味があるなら会員登録不要で無料のプログラミング学習サービス「Dig Skill」がおすすめ！登録不要なので自分に合わないと思ったらすぐ辞めれるし無料なので気軽に始めてみよう。
ソフトウェア会社がつくった学習サービスなのでスキルは間違いなく身につくでしょう。
