ホームページ作成で使用するHTMLタグとは?HTMLの主要タグ一覧 

目次

HTMLとは?

HTMLとは、HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)の略で、ウェブサイトのページを作成するための標準的なマークアップ言語です。

HTMLの主な特徴と役割

  1. 構造化されたドキュメントを作成
    HTMLは、テキストベースのドキュメントにマークアップ(タグ)を追加することで、ウェブページの構造を構成します。これにより、見出し、段落、リスト、リンク、画像などの要素をウェブページ上に表示できます。
  2. ハイパーテキストのサポート
    HTMLはハイパーテキストをサポートしており、ウェブページ間のリンク(ハイパーリンク)を作成することができます。これにより、インターネット上の異なるリソースやページに簡単にアクセスすることが可能になります。
  3. ブラウザによる解釈
    HTML文書はウェブブラウザによって解釈され、ユーザーに視覚的な形で表示されます。ブラウザはHTMLタグを読み取り、指定された構造とスタイルでコンテンツをレンダリングします。
  4. スタイルと機能の分離
    HTMLは主にコンテンツの構造を定義するために使用され、その見た目やスタイルはCSS(Cascading Style Sheets)によって、動作や挙動はJavaScriptによってそれぞれ制御されます。

主要なHTMLタグ一覧と説明

文書構造タグ

  • <!DOCTYPE>: HTML文書のタイプを宣言する
  • <html>: HTML文書のルート要素
  • <head>: 文書のメタデータを含む
  • <title>: 文書のタイトルを指定
  • <body>: 文書のコンテンツを含む

メタデータタグ

  • <meta>: 文書のメタデータ(文字セット、ビューポート等)を指定
  • <link>: 外部リソースへのリンク(例: CSSファイル)
  • <style>: 文書内のインラインCSSスタイルを定義

コンテンツセクショニング

  • <header>: ヘッダーセクション
  • <footer>: フッターセクション
  • <h1><h6>: 見出しレベル1~6
  • <nav>: ナビゲーションリンクのセクション
  • <section>: 文書のセクション
  • <article>: 独立したコンテンツのセクション
  • <aside>: サイドバーなどの周辺コンテンツ

テキストコンテンツ

  • <p>: 段落
  • <hr>: 水平線(セクションの分割などに使用)
  • <pre>: 整形済みテキスト
  • <blockquote>: 長い引用
  • <ol>: 順序付きリスト
  • <ul>: 順序なしリスト
  • <li>: リストアイテム
  • <dl>: 定義リスト
  • <dt>: 定義用語
  • <dd>: 定義の説明

インラインテキストセマンティクス

  • <a>: アンカー(リンク)
  • <span>: インラインコンテナ
  • <br>: 改行
  • <b>: 太字テキスト
  • <i>: 斜体テキスト
  • <strong>: 強調テキスト
  • <em>: 強い強調
  • <small>: 小さい文字
  • <mark>: マークされた(ハイライトされた)テキスト
  • <time>: 日付や時間を表す

イメージとマルチメディア

  • <img>: 画像
  • <audio>: 音声コンテンツ
  • <video>: ビデオコンテンツ
  • <figure>: 図や画像、図表
  • <figcaption>: 図や画像のキャプション

埋め込みコンテンツ

  • <iframe>: インラインフレーム(他のHTMLページを埋め込む)
  • <embed>: 外部アプリケーションやプラグインの埋め込み
  • <object>: 外部リソースの埋め込み
  • <param>: <object>要素用のパラメータ

スクリプト

  • <script>: スクリプト(通常はJavaScript)
  • <noscript>: スクリプトが無効の場合の代替コンテンツ

フォーム関連タグ

  • <form>: ユーザー入力を収集するためのフォーム
  • <input>: 入力フィールド
  • <textarea>: テキストエリア
  • <button>: ボタン
  • <select>: ドロップダウンリスト
  • <option>: <select>内の選択肢
  • <label>: フォーム要素のラベル

これらのタグはHTML文書の構造を形成し、ウェブページのさまざまな要素を定義します。各タグの具体的な使い方や属性については、さらに詳しく調べることをお勧めします。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

目次