ITスキル・ノウハウ

初心者のためのHTML基本文法ガイド：ウェブ制作の第一歩

2024年10月7日

初心者のためのHTML基本文法アイキャッチ画像

こんにちは、フリーランスエンジニアになって1年のぽんねぐです！

さて、本日はHTMLの基本文法編ということで、「システムエンジニアに転身したいが何から始めれば良いだろう？」「HTMLって聞いたことはあるけど使い方は知らない」といった方に向けて自分の知識整理も兼ねて記事にします。

以下、目次となります。

はじめに

ウェブサイト制作を始める際に最も基本となる技術がHTML（HyperText Markup Language）です。HTMLは、ウェブページの構造を定義する言語で、すべてのウェブサイトはこの言語で作られています。HTMLの理解は、Webデザインやフロントエンド開発を行う際に不可欠なスキルです。

本記事では、HTMLの基本的な文法と重要なタグ、属性の使い方、そしてコメントや空要素について学びます。初心者でも分かりやすく、HTMLの基礎をしっかり押さえることで、次のステップへと進むための強固な土台を築きましょう。

HTMLの基本構造と主要タグ

HTMLの定義と基本構造

HTMLは、ウェブページを作成するためのマークアップ言語です。すべてのHTML文書は、基本的に以下の構造を持ちます。

<!DOCTYPE html>
<html>
  <head>
    <title>ページタイトル</title>
  </head>
  <body>
    <h1>見出し</h1>
    <p>段落テキスト</p>
  </body>
</html>

上記の構造は、HTML文書の基本フレームワークです。<>がたくさん出てきますが、これらを「タグ」と呼びます。<html> タグでHTML文書の開始と終了を示し、その中で<head>タグにはメタ情報（ページのタイトルなど）が含まれ、<body>タグには実際に表示されるコンテンツが含まれます。

DOCTYPE宣言について

HTML文書の最初にある <!DOCTYPE html> は、HTML5を使用していることをブラウザに伝える宣言です。これはHTMLのルールを守りながら表示されるようにするためのもので、ウェブページが正しく表示されるために重要です。

主要なHTMLタグ

以下は、よく使われる主要なHTMLタグです。

見出しタグ

見出しタグ（<h1>〜<h6>）はページの見出しを定義します。<h1>は最も重要な見出し、<h6>は最も小さい見出しです。

<h1>大見出し</h1>
<h2>小見出し</h2>

段落タグ

段落タグ（<p>）はテキストの段落を作成します。

<p>これは段落テキストです。</p>

リストタグ

リストタグ（<ul>、<ol>、<li>）は順序付きリスト（<ol>）や順序なしリスト（<ul>）を作成します。

<ul>
  <li>項目1</li>
  <li>項目2</li>
</ul>

画像タグ

画像タグ（<img>）は画像を表示するために使用されます。src 属性で画像のファイルパスを指定します。

<img src="image.jpg" alt="画像の説明">

リンクタグ

リンクタグ（<a>）は他のページやリソースへのリンクを作成します。

<a href="https://pon-neg.blog">リンクテキスト</a>

属性の使い方

属性の基本概念

HTMLタグに追加する属性は、要素に追加の情報を提供する役割を持ちます。属性はタグの開始部分に書かれ、通常はキーと値のペアで記述されます。

<a href="https://pon-neg.blog" target="_blank">リンクテキスト</a>

上記の例では、href がリンク先を指定し、target="_blank" で新しいタブでリンクを開く指定をしています。

よく使われる属性

  • href: リンクのURLを指定します（<a>タグに使用）。
  • src: 画像や動画などのリソースのパスを指定します（<img>, <video>タグに使用）。
  • alt: 画像の代替テキストを提供します（<img>タグに使用）。
  • class: CSSやJavaScriptで使用するスタイルやスクリプトの対象となる要素を指定します。
  • id: ページ内で一意の識別子を持つ要素を定義します。

属性を使った具体例

この例では、srcで画像のパスを指定し、altで画像の説明を設定、classでスタイルを設定し、idで一意の識別子を割り当てています。

<img src="image.jpg" alt="説明文" class="responsive" id="main-image">

HTMLのコメントと空要素

コメントの記述方法

HTML内でコードの説明やメモを残したい場合、コメントを使用します。コメントはブラウザに表示されず、コードの読みやすさを向上させるために使います。

<!-- これはコメントです -->

空要素

HTMLには内容を持たない空要素があります。これらは開始タグだけで完結します。

  • <br>: 改行を挿入します。
  • <hr>: 水平線を挿入します。
<p>1行目のテキスト<br>2行目のテキスト</p>
<hr>

まとめ

今回の記事では、HTMLの基本構造や主要なタグ、属性の使い方、コメントと空要素について学びました。これでウェブ制作の基礎をしっかり押さえ、今後の学習に進むための土台が築けたと思います。基礎を確実に押さえることが、より複雑なWeb開発スキルを習得するための鍵となります。

今回のポイントをまとめますと、次のとおりです。

ポイント

  • HTMLの基本構造（<html>, <head>, <body>）はウェブページの基礎となり、タグの使い方を理解することで、適切な構造を作成できる
  • 属性（href, src, altなど）はHTMLタグに追加情報を与え、要素をより柔軟に操作するために重要である
  • コメントや空要素は、コードの整理や構造の明確化に役立ち、ウェブページをよりわかりやすくデザインするためのツールとなる

何か不明点などございましたらコメント欄に記載頂けたらと思います！

以上、最後までお読みいただきありがとうございました。

-ITスキル・ノウハウ
-, ,