Nagashima Laboratory

HTMLタグ

ここでは基本的なHTMLタグを解説しています。HTMLタグは<body>と<body>の間に記述します。基本的なHTMLの構造は下記のようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

<p>：段落
<br>：改行

フォルダ名：html_sample_02、ファイル名：index.html

  • <p>タグの文章が2つありますが、1つ目はキーボードのエンターキーで改行、 2つ目の文章では、途中に<br>を挿入してください。
<h1>段落</h1>
<p>ここには文章が
はいります</p>
<p>ここには文章が<br>はいります</p>
  • 2つの文章の表示の違いを確認してください。
  • HTML内で改行をしたいときには、改行用のタグ<br>を入れます。

<h1>〜<h6>：見出し

フォルダ名：html_sample_03、ファイル名：index.html

  • h1～h6の6種類　数字が小さい方から大見出し、中見出し…になります
  • 論文の章・節・項のように、構造に合わせて使います
  • 太字にしたいときに使うタグではないため、太字にすることが目的の場合はCSSで装飾します
<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>

<ul><ol><li>：順序あり（なし）リスト
<dl><dd><dt>：説明リスト

フォルダ名：html_sample_04、ファイル名：index.html

  • <ul> : Unordered List　順番のない箇条書き。順番を入れ替えても意味が変わらないリスト。
  • <ol> : Ordered List　順番のある箇条書き（デフォルトでは数字連番）。連番の付けられたリスト。入れ替えると意味が変わってしまうリスト。
  • <li> : List　リスト項目。<ul>や<ol>と一緒に使います
  • <dl>：Description List / 説明リスト。各項目が用語（term →dt要素）と説明（Description→dd要素）のペアになっている形式のリスト。「用語とそれを定義する文章」や、「質問と回答」などに使用します
<h1>様々なリスト</h1>
<h2>ul</h2>
<p>好きなたべもの</p>
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

<h2>ol</h2>
<p>好きなたべものベスト3（好きな順）</p>
<ol>
  <li></li>
  <li></li>
  <li></li>
</ol>

<h2>dl</h2>
<p>よくある質問</p>
<dl>
  <dt>Q:</dt>
  <dd>A:</dd>
  <dt>Q:</dt>
  <dd>A:</dd>
</dl>

<a>：アンカー（リンク）

フォルダ名：html_sample_05、ファイル名：index.html

<h1>リンク</h1>

<ul>
  <li><a href="https://google.com">リンク</a></li>
  <li><a href="https://google.com" title="Google検索">マウスをのせるとタイトル表示</a></li>
  <li><a href="https://google.com" target="_blank">別タブ表示</a></li>     </ul>

<table>：表

フォルダ名：html_sample_06、ファイル名：index.html

  • <table> 表
  • <tr> 行
  • <td> セル（thはヘッダー列・行に使います）
<h1>表</h1>
<table>
  <tr>
    <th>名前</th>
    <th>月</th>
    <th>火</th>
    <th>水</th>
  </tr>
  <tr>
    <td>Aさん</td>
    <td>○</td>
    <td>×</td>
    <td>○</td>
  </tr>
  <tr>
    <td>Bさん</td>
    <td>×</td>
    <td>×</td>
    <td>○</td>
  </tr>
</table>

<img>：画像

フォルダ名：html_sample_07、ファイル名：index.html

<h1>画像表示</h1>
<img src="images/sample.png" alt="画像">

<audio> : 音声
<video>：動画

フォルダ名：html_sample_08、ファイル名：index.html

  • 音声データmp3や、動画データmp4の埋め込み。動画については容量が大きくなるため、直接埋め込むのではなく、動画共有サイト（Youtube、Vimeoなど）にアップロードした上で、埋め込む、という手法もよく使われます（後述のiframe）
  • サイト上で突然音が流れると閲覧者を驚かせてしまうことがあるため、音が出ることを予め表示することや、ボタンを押してから音が流れるようにするよう、配慮します
  • 予めmediaフォルダにリンクしたいデータを入れておきます
<h1>メディア</h1>

<h2>音声</h2>
<audio src="media/sample.mp3" controls></audio>

<h2>動画</h2>
<video src="media/sample.mp4" width="480" controls></video>

<iframe>：フレーム

フォルダ名：html_sample_09、ファイル名：index.html

  • 他のウェブページのコンテンツを埋め込みます。
  • 下記コード内の※印の部分は削除してください
<h1>インラインフレーム</h1>
<h2>YouTube</h2>
※ここにYoutubeの埋め込みタグを挿入

<h2>GoogleMap</h2>
※ここにGoogleMapの埋め込みタグを挿入
  • Youtubeは、好きなYoutubeコンテンツのタグを挿入してください。
  • GoogleMapは、Map上で埋め込みをしたい場所を選び、タグを挿入してください
    • 埋め込みタグの確認方法：地図上で場所をクリック　共有＞地図を埋め込む　HTMLタグをコピー

() Category: 資料 Tags: