LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@Tomo27(EG- Fujita)

苦手なフロントエンド開発について学ぶ「HTML編」

Last updated at Posted at 2025-01-28

始めに

苦手なフロントエンド開発について学ぶ「目次」のの記事から派生する「HTML編」になります。

:warning:　：この記事を読むと、HTMLの基本が理解でき、簡単なWebページが作れるようになります。

自信のリスキニングを込めて記載していますが、「初心者にも理解しやすく」をモットーに記載していきます。
しかし、読んでいるうちに不明点や深堀してほしい箇所等あればコメントください！
「良いね・ストック」お願いします！

:warning: ：当記事に示された意見はわたし個人のものであり、所属する組織を代表するものではありません。

HTMLとは？

HTML（HyperText Markup Language）は、Webページの構造を記述するためのマークアップ言語です。
どんなWebページにするかはこのHTMLで記述し作成します。

Webページの中で表示するテキストや画像、リンク、動画、フォームなどの要素を定義し、それらの配置や意味を指定する役割を持ちます。

HTMLの主な特徴

  1. Webページの骨組みを作成

    • HTMLはWebページの「構造」を定義します。
    • 見出し、段落、リスト、リンク、画像などの基本的な要素を記述。

  2. マークアップ言語

    • 人間が読める形式で記述し、コンピュータにその意味を伝えます。
    • HTMLでは「タグ」と呼ばれる特定のキーワードを使います。

  3. 静的なコンテンツを提供

    • HTML単体では動的な動作は提供せず、主に固定されたコンテンツを表示。
    • 動的な動作を実現するにはJavaScriptなどが必要。

  4. 標準化された仕様

    • HTMLの仕様はW3C（World Wide Web Consortium）やWHATWGによって策定され、ブラウザがその仕様に基づいて表示を行います。

HTMLの構成要素

  1. タグ（Tag）

    • HTMLの基本単位であり、コンテンツの種類や意味を示します。
    • 開始タグと終了タグで要素を囲むことが多い。
    • 例: 
      <h1>見出し</h1>
<p>段落テキスト</p>

  2. 要素（Element）

    • タグとその中身を含む構造全体を指します。
    • 例: <h1>見出し</h1> は見出し要素。

  3. 属性（Attribute）

    • 要素に追加情報を与える。
    • 例: 
      <img src="image.jpg" alt="画像の説明">

  4. コメント

    • コード内でメモや説明を残すための記述。
    • 例: 
      <!-- これはコメントです -->

よくある間違い

  • タグを閉じ忘れ
    HTMLの多くのタグは2対になっていることが多いです。
    タグにもよりますが 先頭のタグを作った際終わりのタグもセットで作るようにしましょう。
<p>この段落は… → <p>この段落は…</p>
  • 属性の間違い
    下記例ではsrcと記載すべきところsourceと記載してしまっています。正しい属性を記載しましょう。
<img source="image.jpg"> → <img src="image.jpg" alt="画像説明">
  • 入れ子構造の誤り
    HTMLでは表現の仕方として入れ子構造（タグとタグの間にタグや要素を入れること）ができます。
    正しい順序で設定しないと期待した表示がされないことがあります
<p><h2>タイトル</h2></p> → <h2>タイトル</h2>

HTMLの基本構造

HTML文書の基本的な構造は以下の通りです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTMLの基本構造</title>
</head>
<body>
    <h1>見出し</h1>
    <p>これはHTML文書の基本構造の例です。</p>
</body>
</html>
  • <!DOCTYPE html>: 文書がHTML5であることを宣言。
  • <html>: HTML文書全体を囲むタグ。
  • <head>: メタ情報やスタイル、スクリプトなどを定義。
  • <body>: ページの主なコンテンツを記述。

HTMLのバージョン

  • HTMLはバージョンを重ねて進化してきました。
    • HTML 1.0: 初期の仕様（1991年）。
    • HTML 4.01: 広く普及したバージョン（1999年）。
    • HTML5: 現在の主流バージョン。マルチメディア要素やセマンティクス（意味付け）の強化。

HTMLの役割

  1. セマンティクス（意味付け）

    • コンテンツの意味や役割を明確にする。
    • 例: <header>（ヘッダー）、<article>（記事）、<footer>（フッター）。

  2. アクセシビリティ

    • 視覚障害者用のスクリーンリーダーなど、支援技術に対応。

  3. 他の技術と連携

    • CSSやJavaScriptと組み合わせて、スタイルや動きを追加。

HTMLのタグ一覧とその意味

HTMLのタグは、ウェブページの構造やコンテンツを定義するために使用されます。タグは要素の種類や意味を示す役割を持ち、以下のカテゴリに分類されます。

1. 文書の基本構造を定義するタグ

タグ 意味
<!DOCTYPE html> 文書がHTML5であることを宣言する。
<html> HTMLドキュメント全体を囲む。
<head> メタ情報（タイトルや文字コードなど）を定義。
<title> ページのタイトルを指定（ブラウザのタブに表示）。
<meta> メタデータ（文字エンコーディング、説明、キーワードなど）を指定。
<link> CSSなどの外部リソースを読み込む。
<style> CSSを埋め込む。
<script> JavaScriptを埋め込む。

See the Pen HTML例 by Tomoki (@TomokiF127) on CodePen.

2. テキスト関連のタグ

タグ 意味
<h1> ～ <h6> 見出し（h1が最も大きく、h6が最も小さい）。
<p> 段落を定義。
<br> 改行（空要素）。
<hr> 水平線（区切り線）。
<strong> 強調（太字）。
<em> 重要性を示す強調（斜体）。
<small> 文字を小さくする。
<mark> ハイライト表示。
<blockquote> 引用文を示す。
<code> ソースコードを表示。
<pre> 改行や空白を保持したまま表示。

See the Pen テキスト関連のタグ by Tomoki (@TomokiF127) on CodePen.

3. リスト関連のタグ

タグ 意味
<ul> 順序なしリスト（箇条書き）。
<ol> 順序付きリスト（番号付き）。
<li> リスト項目（<ul> や <ol> の中で使用）。
<dl> 説明リスト。
<dt> 説明リストの用語。
<dd> 説明リストの説明。

See the Pen リスト関連のタグ by Tomoki (@TomokiF127) on CodePen.

4. ハイパーリンク関連のタグ

タグ 意味
<a> ハイパーリンクを作成。
target="_blank" 新しいタブでリンクを開く属性。

See the Pen ハイパーリンク関連のタグ by Tomoki (@TomokiF127) on CodePen.

5. 画像・メディア関連のタグ

  • タグに alt 属性を必ず付けましょう。（アクセシビリティ向上、SEO対策）のため
タグ 意味
<img> 画像を表示（src属性で指定）。
<audio> 音声ファイルを埋め込む。
<video> 動画ファイルを埋め込む。
<source> audio や video 内で異なるフォーマットのメディアを指定。

See the Pen 画像・メディア関連のタグ by Tomoki (@TomokiF127) on CodePen.

6. テーブル関連のタグ

タグ 意味
<table> テーブル（表）を作成。
<tr> テーブルの行を作成。
<th> テーブルのヘッダーセル（見出し）。
<td> テーブルのデータセル。
<caption> テーブルの説明を追加。

See the Pen テーブル関連のタグ by Tomoki (@TomokiF127) on CodePen.

7. フォーム関連のタグ

タグ 意味
<form> フォームを作成。
<input> テキスト入力・ボタンなどのフォーム要素。
<textarea> 複数行のテキスト入力エリア。
<button> ボタンを作成。
<select> ドロップダウンリスト。
<option> ドロップダウンリストの項目。
<label> 入力欄のラベル。

See the Pen フォーム関連のタグ by Tomoki (@TomokiF127) on CodePen.

8. セマンティックタグ（HTML5以降）

タグ 意味
<header> ヘッダー（サイトやセクションの上部）。
<nav> ナビゲーションメニュー。
<section> セクション（意味を持つまとまり）。
<article> 記事（独立したコンテンツ）。
<aside> 補足情報（サイドバーなど）。
<footer> フッター（ページやセクションの下部）。

See the Pen セマンティックタグ（HTML5以降） by Tomoki (@TomokiF127) on CodePen.

まとめ

HTMLはウェブページの基礎となる言語です。CSSでデザインを追加し、JavaScriptで動きを与えることで、HTMLを活用したより洗練されたウェブページを作成できます。
HTMLのタグは「構造・意味を持たせる」ために使用されます。
セマンティックなタグを適切に使うことで、可読性やSEO（検索エンジン最適化）が向上し、アクセシビリティも向上します。
CSSやJavaScriptと組み合わせることで、デザインや動作を付加できます。

また今回紹介したタグの他にも多くのタグが存在します。
気になった方はぜ調べてみてはいかがでしょうか？

ではまた！:wave:

0
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?