Skip to main content

Html

HTML (HyperText Markup Language) は、ウェブページの構造を定義するために使用されるマークアップ言語です。テキスト、画像、リンク、見出しなどのコンテンツを配置し、ブラウザがどのように表示するかを指示します。

HTMLの基本​

HTMLは、タグと呼ばれる要素で構成されています。タグは山かっこ < > で囲まれ、通常は開始タグと終了タグのペアで使用されます。たとえば、段落を表すには <p> と </p> を使用します。

例:

<p>これは段落です。</p>

一部のタグには終了タグが不要なものもあります。これらは空要素と呼ばれ、画像を表示する <img> タグや改行する <br> タグなどがこれにあたります。

主な要素と役割​

1. 構造要素 🏗️​

ウェブページの全体的な構造を定義します。

  • <!DOCTYPE html>: 文書のタイプを宣言し、HTML5であることを示します。
  • <html>: HTML文書のルート（最上位）要素です。
  • <head>: 文書に関するメタ情報（タイトル、スタイルシートへのリンクなど）を含みます。
  • <body>: ページに表示されるすべてのコンテンツ（テキスト、画像、リンクなど）を含みます。

2. テキスト要素 📝​

テキストの書式や意味を定義します。

  • <h1> から <h6>: 見出しレベルを定義します。<h1> が最も大きく、<h6> が最も小さい見出しです。
  • <p>: 段落を表します。
  • <a>: 別のページや場所へのハイパーリンクを作成します。
  • <strong>: 重要なテキストを強調します。

3. メディア要素 🖼️​

画像や動画などのメディアを埋め込みます。

  • <img>: 画像を挿入します。src 属性で画像ファイルのパスを指定します。
  • <video>: 動画を埋め込みます。

属性について​

タグには、要素に関する追加情報を提供する属性を含めることができます。属性は開始タグ内で name="value" の形式で記述されます。

例: <a> タグの href 属性は、リンク先のURLを指定します。

<a href="https://www.google.com">Google</a>

<img> タグの src 属性は画像ファイルのパスを、alt 属性は画像が表示されない場合に代替として表示されるテキストを指定します。

<img src="flower.jpg" alt="美しい花">

HTMLとCSS、JavaScriptの関係​

HTMLはページの骨格を作ります。 CSS (Cascading Style Sheets) は、その骨格に装飾を加える役割を担います。色、フォント、レイアウトなどを制御します。 JavaScriptは、ページに動きやインタラクティブな機能を追加します。ボタンのクリックによる動作などがこれにあたります。

これら3つの言語は連携して、今日の動的なウェブページを構築しています。HTMLがコンテンツを提供し、CSSが見た目を整え、JavaScriptが動作を制御する、と考えると分かりやすいでしょう。