1.1 H T M L

HTML入門：ウェブページの構造とコンテンツを定義するマークアップ言語 #

1. HTMLとは #

HTML（HyperText Markup Language）は、ウェブページの構造とコンテンツを定義するマークアップ言語です。HTMLタグを使用して、テキストや画像、リンクなどの要素を配置し、ウェブページの基本的な構造を作ります。

2. HTMLの基本構造 #

HTML文書は以下の基本構造で構成されます。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ページのタイトル</title>
</head>
<body>
  <!-- ここにコンテンツが入ります -->
</body>
</html>
  • <!DOCTYPE html>: 文書のタイプを宣言します。この場合、HTML5の文書です。
  • <html>: HTML文書全体を表します。
  • <head>: ページのメタデータを含みます。例えば、文字コードやタイトルなどです。
  • <meta charset="UTF-8">: 文字コードをUTF-8に設定します。
  • <title>: ページのタイトルを設定します。ブラウザのタブに表示されます。
  • <body>: ページのコンテンツが含まれる部分です。

3. よく使われるHTMLタグとサンプルコード #

ヘッディング #

ヘッディングタグは、ページ内の見出しを定義します。<h1>から<h6>までの6つのレベルがあります。

<h1>これはh1の見出しです</h1>
<h2>これはh2の見出しです</h2>
<h3>これはh3の見出しです</h3>

段落 #

<p>タグは、段落を定義します。

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

リンク #

タグは、ハイパーリンクを定義します。href属性でリンク先を指定します。

<a href="https://example.com">これはリンクです</a>

画像 #

<img>タグは、画像を表示します。src属性で画像ファイルのURLを指定し、alt属性で代替テキストを設定します。

<img src="image.jpg" alt="説明的なテキスト">

リスト #

<ul>タグと<li>タグを使って、無序リストを作成します。順序付きリストは<ol>タグを使用します。

<ul>
  <li>リストアイテム1</li>
  <li>リストアイテム2</li>

  <li>リストアイテム3</li>
</ul>
<ol>
  <li>順序付きリストアイテム1</li>
  <li>順序付きリストアイテム2</li>
  <li>順序付きリストアイテム3</li>
</ol>

テーブル #

<table>、<tr>（行）、<th>（見出しセル）、<td>（データセル）タグを使ってテーブルを作成します。

<table>
  <tr>
    <th>見出し1</th>
    <th>見出し2</th>
  </tr>
  <tr>
    <td>データ1</td>
    <td>データ2</td>
  </tr>
  <tr>
    <td>データ3</td>
    <td>データ4</td>
  </tr>
</table>

フォーム #

<form>タグを使ってフォームを作成し、<input>タグや<textarea>タグを使って入力フィールドを追加します。

<form action="/submit" method="post">
  <label for="name">名前:</label>
  <input type="text" id="name" name="name">
  
  <label for="message">メッセージ:</label>
  <textarea id="message" name="message"></textarea>
  
  <input type="submit" value="送信">
</form>

まとめ #

この記事では、HTMLについての基本的な知識やよく使われるタグの説明を行いました。これらのタグを組み合わせて、ウェブページの構造を作成することができます。次のステップは、CSSを使ってデザインやスタイルを適用し、JavaScriptを使ってインタラクティブ性を追加することです。