HTMLのタグについて

Last-modified: 2024-01-03 (水) 15:58:47

HTMLとは

  • Markup言語：タグと呼ばれるものを利用してページ中の文字列に見出し・段落などの構造の意味づけや装飾等を行う言語のこと
  • タグのことを要素(Element) とも呼ぶ
  • HTMLとは「複数のWebページを結びつけ、それぞれのページ内の構造を整理する」ための言語

htmlタグ

HTML形式の日本語を扱うよ、と記述する

<!DOCTYPE html>
<html lang="ja">
</html>


headタグ

  • HTML全体に影響する情報が含まれるタグ
  • HTMLの設定(タイトル、書式、ページの説明等)やJavaScript、CSSファイルの読み込みなどを行なう 
    <!DOCTYPE html>
<html lang="ja">
　<head>
  </head>
</html>

bodyタグ

  • bodyタグは、HTMLのコンテンツ本体を表すタグ
  • HTMLの中に1つだけ配置できる 
    <!DOCTYPE html>
<html lang="ja">
　<head>
  </head>
  <body>
  </body>
</html>

コメント

コメントは、「<!--」と「-->」で挟む
ブラウザ上には表示されないが、ソースビュー表示時に閲覧可能

文字コードの指定_meta 

<meta charset="utf-8">
  • charasetは「「属性(Attribute)」」と呼ばれる

外部スクリプトを読み込む_script 

<script src="main.js"></script>
  • scriptタグは、headタグやbodyタグの中に自由に配置することができる

外部スタイルシートを読み込む_link 

<link rel="stylesheet" href="style.css">
  • 一般的に、スタイルシートをリンクさせるために利用されることが、最も多い利用用途
  • linkタグは空要素であるため、終了タグは必要無い
  • headタグの中にのみ配置することができる

ブロックレベル要素_div

  • ブロックレベル要素は、親要素の領域全体を占有するブロックを形成するため、ブロックレベル要素を使用した場合、要素の後ろに改行が入る
  • ブロックレベル要素はインライン要素より大きな構造を構築するために利用されるため、インライン要素(タグ内に直接styleを記述すること)や他のブロックレベル要素を含めることができる 
    <div>
 <span>インライン要素</span>
 <div>ブロックレベル要素</div>
</div>
  • ブロックレベル要素とインライン要素という分類は、最新のHTML5ではコンテンツカテゴリというより複雑なモデルに置き換えられた
  • ほとんどのブロックレベル要素は、HTML5において、フローコンテンツに分類されている

インライン要素_span

  • インライン要素は、その要素と紐付けられた領域(文字列の幅など)のみを占有するため、インライン要素の後ろには改行が入らない
  • インライン要素はブロック要素より小さな構造を構築するために利用されるため、一般的にブロックレベル要素を含めることはできない 
    <!-- エラーにはならないが、本当はよくない -->
<span>
  <span>インライン要素</span>
  <div>ブロックレベル要素</div>
</span>
  • ブロックレベル要素とインライン要素という分類は、最新のHTML5ではコンテンツカテゴリというより複雑なモデルに置き換えられた
  • ほとんどのインライン要素はHTML5では、フレージングコンテンツに分類されている

最上位の見出し_h1 

<h1></h1>
  • 見出しはh1, h2, h3, h4, h5, h6まである
  • hとは、headingの略で、"見出し"を意味する
  • 見出しはコンテンツの階層構造を正しく表現するために利用するため、スタイル目的(主にフォントサイズを小さくするため)で見出しのレベルをスキップしてはいけない(h1の次はh2を使う)
  • 見出しのサイズを変更したい場合は、CSSのfont-sizeを利用する
  • 慣例としてh1要素はページ内で1つにしておくべき(らしい)

段落_p 

<p></p>


改行_br

  • 段落の中で用いるのが一般的 
    なにかの文書<br>
  • 空要素なので、終了タグは不要
  • 行間を広げるためにbrタグを連続して利用するのは避けて、CSSのmarginを利用すること

画像を表示する_img 

<img src="image.png" alt="この画像の説明">
  • src:画像のアドレスを設定する
  • alt:画像が何らかの理由で読み込まれなかった際に画像の代わりに表示する画像の説明文を設定する

リンク_a_画像にリンクを貼る 

<a href="URL" target="_blank" rel="noopener noreferrer"></a>
  • href：リンク先をURLまたは、URLフラグメント(#で始まる文字。#topなど)を設定する
  • target：リンク先を表示するタブ(ウィンドウ)を指定する。_blankを指定した場合、新しいタブ(ウィンドウ)に表示される。
  • rel：リンク先のページとの関係を定義するために利用。rel属性を渡さない場合、リンク先のページからwindow.openerを通じてリンク元のページへアクセスすることができ、これはセキュリティの観点から避けるべき。よって、herf 属性を利用して外部のページにリンクする場合、rel 属性を設定しておく
  • noopener：リンク先のページから、window.openerを通じたアクセスできないようにする
  • noreferrer：リンク先のページに対して、HTTPヘッダを通じてリンク元のページの情報を送信しないようにする
  • ただし、noopenerは比較的新しい機能であるため、機能が有効になるブラウザはChromeとOperaのみ

リストを作成する_ul, ol, li

ulタグと olタグを親として、liタグを子にする

順不同リストを作成する_ul, li 

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>
  • ulタグは「Unordered List」の略で、配置順に意味を持たないアイテムをまとめるためのタグ
  • 子のliタグの先頭には「・」記号が付く

順序付きリストを作成する_ol, li 

<ol>
  <li></li>
  <li></li>
  <li></li>
</ol>
  • olタグは「Ordered List」の略で、配置順に意味を持つアイテムをまとめるためのタグ
  • 子のliタグの先頭には「1.」や「2.」などの数値が付く

テーブル_table, tbody, tr, td

  • 横方向が行、縦方向が列

table, tbody 

<table>
  <tbody>
    <!-- ここにテーブルの内容が入る -->
  </tbody>
</table>
  • tbodyタグは、テーブルの内容のあるひとまとまりを表すために利用する
  • tbodyタグはtableタグの中に複数設置することが可能

tr

trはテーブルの行(横)を作る

td 

<tr>
  <td></td>
</tr>
  • テーブルの列(縦)を作るにはtrタグの中にtdタグを追加する

フォームを作成する_form 

<form method="POST" action="フォームで送信されたデータを処理するプログラムがあるURL">
</form>
  • method：フォームが送信される場合に利用するHTTPメソッドを設定するもので、ブラウザにおいては「GET」と「POST」が利用可能
  • action：フォームで送信されたデータを処理するプログラムがあるURLを設定する

入力フィールドの作成_input

  • 入力フィールドを作るためにはinputタグを利用して、type属性にtextを指定する 
    <input type="text" name="email">
  • type属性を指定しなかった場合、textがデフォルトタイプとして指定される

複数行を入力するフィールドの作成_textarea

  • 複数行入力フィールドを作るためにはtextareaタグを利用する 
    <textarea name="details"></textarea>

チェックボックスを作成する_checkbox

  • 入力フィールドを作るためにはinputタグを利用して、type属性にcheckboxを指定する
  • value属性には、チェックしたときに送信される値を設定する 
    <input type="checkbox" name="acceptPolicy" value="true">

ラベルを作成する_label

  • テキスト部分をクリックしてもチェックボックスにチェックが入るようにする 
    <label for="acceptPolicy">
  <input type="checkbox" id="acceptPolicy" name="acceptPolicy" value="true">
  個人情報の取扱いに同意する
</label>
  • チェックボックスがlabelタグの子要素になっているので、for要素が無くても動作する

送信ボタンを作る 

<button type="submit">送信</button>

もしくは

<input type="submit" value="送信">
  • inputタグを利用したフォームの送信は、古いIE(Internet Explorer)の不具合を回避するために好んで利用されて来たが、現在では古いIEが利用されることは無いため、通常はbuttonタグを利用した方が良い
  • inputタグは文字のみに対応しているが、buttonタグはそれ以外にも対応している