HTML/Tags

HTML Basic Tags

HTML｜HTML/Tags｜HTML/Sample｜HTML/Tips

CONTENTS

• 基本要素
  • html
  • head
  • body
  • title
  • meta
• セクション
  • div（division）
  • header
  • footer
  • nav（navigation）
  • main
  • article
  • section
  • aside
  • 補足：articleとsection
  • 補足：ブロックとインライン
• 各種要素タグ
  • A｜リンクの設定
  • AUDIO｜オーディオ
  • BR｜改行
  • BUTTON｜ボタン
  • CANVAS｜キャンバス
  • DL/DT/DD｜説明リスト（定義リスト）
  • EMBED｜埋め込み
  • FORM｜フォーム
  • H*｜見出し
  • HR｜水平線
  • IFRAME｜インラインフレーム
  • IMG｜画像の配置
  • MAP｜イメージマップ
  • OL/LI｜リスト
  • P｜段落
  • PRE｜整形済みテキスト
  • RUBY｜ルビ
  • SPAN｜文字列属性
  • SVG｜ベクターグラフィックスの描画
  • TABLE｜表
  • UL/LI｜リスト
  • VIDEO｜ビデオ
  • <!--　-->｜コメント
• 文字参照

基本要素

html

HTML文書において基点となる要素 (トップレベル要素) で、ルート要素とも呼ばれます。他のすべての要素は、この要素の子孫として配置されます。

head

ブラウザーに対する指定と文書に関するメタ情報など、付加的な情報を指定するための要素で、meta、link、script、title 要素などが記述されます。。

body

HTML文書の内容を表す要素で、文書の内容となるテキストや画像、リストなどは全てこの要素の子孫として記述されます。

title

ブラウザーのタイトルバーやページのタブに表示される文書の題名を定義します。シンプルな用途の要素ですが、その最適化はSEO対策において非常に重要な事項です。

meta

HTML文書の文字コードや概要、キーワードなど、文書におけるさまざまなメタデータを表します。以下のような属性設定がなされます。

• charaset 属性

  charaset = "文字コード"

• name 属性

  name = "情報の種類"

• http-equiv 属性

  http-equiv = "情報の種類"

• content 属性

  content = "情報" ・・具体的な情報を記載します。

• 以下例

  < meta charset="UTF-8" > 
  < meta name="viewport" content="width=device-width, initial-scale=1.0" > 
  < meta name="description" content="説明文" > 
  < meta name="keywords" content="キーワード, キーワード, ・・" > 

セクション

HTMLでは、文書の骨格構造をしっかりと整理することが必要です。
以下、文書構造に関わる要素です。

div（division）

ページのレイアウトブロックにあたるもの、すなわちバックグラウンドの定義、幅の定義、左右にフロートしたりと、見た目をコントロールするための要素はすべてこれを使います。例えば、#wrapper #container、また、マージンやパディングを設定するためのブロックもdivを用います。

header

ページまたはセクションのヘッダ領域を定義。
ページタイトル、サブタイトル、ロゴなどを書くエリアです。

footer

ページまたはセクションのフッタ領域を定義。
コピーライト、関連リンク、サイト名などを書くエリアです。

nav（navigation）

ナビゲーションリンクの定義。サイト内リンクをグループ化します。
一般に以下のような書き方になります。

<nav>
    <ul>
        <li><a href="#">項目1</a></li>
        <li><a href="#">項目2</a></li>
        <li><a href="#">項目3</a></li>
    </ul>
</nav>

main

ドキュメントやアプリケーションのbody 要素(body)の主な内容を表します。ページ内のメインのコンテンツとなるセクションへ使用するもので、１ページ内に1つのみ使用が原則。また、article, aside, footer, header, nav要素の中に入れてはいけません。

article

独立した記事・コンテンツとして成立しうる内容をくくる要素です。ニュース記事やブログの投稿など、再利用・再配布可能なコンテンツを入れます。

記事のタイトルとして<h1>要素を含めることが推奨されています。

例えばWordPressの標準的なテーマでは、articleはひとつの投稿記事をくくるものとして使われていて、その内部にheaderやfooterも含まれています。

section

章や節や項のように、見出しとそれに関する内容を階層構造(アウトライン)的に持つ場合に、それらを定義するものです。

各セクションには<h1>要素を見出しとして含めることが推奨されています。

aside

サイドバーに置くものなど、メインコンテンツ外のセクションの定義。補足情報や広告などはこれでくくります。

補足：articleとsection

articleやsectionは、どちらが上位でどちらが下位・・というものではなく、ページの内容によって使い分けるもの・・例えばブログの投稿記事のようなものであればarticleでくくってひとつづつバラで扱えるようにする。また例えば論文のようなものなら章・節・項をsectionで階層化する・・・。という感じの理解でいいのではないかと思います。

• articleの中にsectionがある → ◯
• articleの中にarticleがある → △（例外：記事中に他の記事を引用する）
• sectionの中にarticleがある → ◯
• sectionの中にsectionがある → ◯
  
  

補足：ブロックとインライン

以前、HTML要素にはブロックレベル要素とインライン要素という２つの区別がありましたが、HTML5ではこの発想はなくなり「デフォルトスタイルとしてのブロックとインラインがある」という考え方に変わりました。

• デフォルトスタイル：ブロック
  「箱」として扱われるスタイルでその幅は親要素の幅に従います。回り込みを可能にしないしない限り、左右いっぱいの領域を占有します。h1,h2・・, div, p, li, header, footer, nav, ・・はデフォルトでブロックです。
  参考：デフォルトでブロックとなる < li > をインラインで扱いたい場合

  li { display : inline; };

• デフォルトスタイル：インライン
  「文字列」と同等に順次横方向に並ぶように置かれるスタイルで、その幅は要素自体が持つ幅です。強制的に行を分けたい場合は <br> 等で改行する必要があります。a, img, pan, iframe・・などはデフォルトでインラインです。

参考：ブロックとインライン

各種要素タグ

以下、頻繁に利用されるHTMLタグ（上で紹介したセクション関連タグを除く）を紹介します。それほどたくさんあるわけではないので、覚えてしまいましょう。といっても漢字と同じで（？）読むことができればOKです。書ける必要はありません。なぜなら、PCを使った仕事ではコピペが常、また予約された単語はアプリケーション（テキストエディタ）がサポートしてくれるからです。「確かそういうワードがあったな…」ということさえわかっていれば大丈夫。難しく考えないでいきましょう。

A｜リンクの設定

このタグに囲まれた内容がリンクのボタンになります。
a : Anchor

<a href="Sample.html" target="_blank">サンプルページへ</a>

• href属性には以下のような設定ができます
  • 他のサイトへのリンク　href = "http://www.kyusan-u.ac.jp"
  • サイト内の他のページへのリンク　href = "gallery.html"
  • ページ内のラベルへのリンク　href = "#ID名" →　<section id = "ID名">
  • ファイルへのリンク　href = "sample.zip" ← ダウンロードはこの方法
  • メールの宛先を指定してメールソフトを起動　href = "mailto:xxx@xxx.xx"
• target属性には以下のものがあります
  • _self：自分自身のウィンドウを上書きして表示します（デフォルト）。
  • _blank：新規のウィンドウを開いて、そこに表示します。
    
    

AUDIO｜オーディオ

音声・音楽ファイルの再生に用います。

<audio src="sounds/sample1.wav" controls></audio>
属性　src ソース　autoplay 自動再生　loop ループ再生　
　　　controls コントロールバー　など
使えるデータ形式　WAV、MP3、Ogg Vorbis、AAC など

BR｜改行

改行を入れたいときに使います。
br : Break

<br> 　　　※XHTMLの場合は <br /> と表記するのが正解です。

BUTTON｜ボタン

ブラウザ仕様のボタンの表示に使います。

<a href="###"><button>お問い合わせ</button></a>

CANVAS｜キャンバス

Webページにビットマップイメージを描画するときに使います。

<canvas id="sample" width="640 height="480"></canvas>

実際の描画は、id をフックとして JavaScript で記述します。

DL/DT/DD｜説明リスト（定義リスト）

dl : description list（説明リスト）
dt : description term（説明される言葉）
dd : description, definition（説明、定義）

<dl>
 <dt>AA</dt>
  <dd>美術学科・・</dd>
 <dt>AD</dt>
  <dd>デザイン学科・・</dd>
 <dt>AP</dt>
  <dd>写真映像学科・・</dd>
</dl>

EMBED｜埋め込み

Flashのようなコンテンツを埋め込む際に使います。終了タグは無しです。

<embed src="Sample.swf" width="200" height="100" autoplay>
属性　src ソース　width="480" 表示幅　など 
　　　EMBED を使うとAUDIOやVIDEOで再生できない形式のメディアを
　　　再生できる場合があります。万能です。

FORM｜フォーム

入力・送信フォームを作成する際に使用します。

<form action="(送信時の動作｜CGIやJavaScript関数)">
    <input type="text" name="NAME"></div>
    <input type="submit" value="送信">
</form>

部品には、以下のタグがあります。

• INPUT｜入力
  type= の部分を変更するだけで、様々な入力受付が可能です。

  type="text" 1行テキストボックス
  type="password" パスワード入力ボックス
  type="checkbox" チェックボックス（複数選択可能）
  type="radio" ラジオボタン（排他的選択）
  type="file"　送信ファイルの選択（[参照]ボタンが表示されます）
  type="submit" 送信ボタン
  type="reset"　リセットボタン
  type="button"　汎用ボタン
  type="image"　画像のボタン

• SELECT&OPTION｜選択
  以下のように使います

  <select name="color">
      <option value="R">RED</option>
      <option value="G">GREEN</option>
      <option value="B">BLUE</option>
  </select>

• TEXTAREA｜テキストエリア
  以下のように使います

  <textarea name="message" rows="4" cols="40">ここに記入してください。  
  </textarea>

  
  

付記
問い合わせやアンケートなどの Form はHTMLの技術のみでは実現できません。実際には以下のように、送信ボタンの押下に対してCGIを動かす仕組みが必要です（PHPなどのプログラミング技術が必要です）。

<form action="example.php" method="post" >
  　　 ： 
      <input type="submit" value="送信する">
</form>

• action属性：どのようなプログラムを動かすか（どこへ送るか）
• method属性：get / post
  • get：データベースにキーワードを送って検索結果を取り出すなど・・
  • post：メッセージの書き込み投稿、新規データの登録など・・

付記２
以下のフォームは、Google検索を活用するコードで、実際に動きます。自分でプログラムを書く必要はありません。

<form action="http://www.google.com/search" method="get">
  <label >Google: </label>
  <input type="search" name="q">
</form>

H*｜見出し

h1～h6の６種類、見出しとして使用されます。
h : Heading

<h1>大見出し</h1>

一般的には、このタグで囲まれた文字は本文より大きな太字で、
上下に1行分のスペースがとられます。

HR｜水平線

水平の罫線を表示します。
hr : Horizontal Rule

<hr>

IFRAME｜インラインフレーム

HTML文書内に別のHTML文書を入れ子で配置するためのものです。

<iframe src="imageGallery01.html"></iframe>

ただし、他人のサイトを自分のサイトの情報であるかのように内包するのはいけません。あくまで「サイト内記事の差し替えに用いる」という活用法にとどめましょう。
YouTubeが提供する動画の埋め込みコードは ＜iframe＞が利用されています。

IMG｜画像の配置

画像を表示させる場合に使用します。終了タグは無しです。
img : Image

<img src="sample.gif" alt="香椎駅" width="200" height="100" >

• 属性
  • src：画像データファイルのURL
  • alt：代換え文字
  • width：幅
  • height：高さ
• 画像として使える形式 JPEG、GIF、PNG、SVG*1
  
  

MAP｜イメージマップ

画像内の特定のエリアに対してリンクを設定する際に使用します。

<img src="sample.gif" usemap="#sample">

<map name="sample">
    <area shape="rect" coords="20,10,120,80" href="01.html">
    <area shape="circle" coords="200,100,40" href="02.html">
    <area shape="poly" coords="400,100,500,100,500,200,400,100" href="03.html" >
    <area shape="default" href="00.html">
</map>

参考：イメージマップのコードを生成するツール
HTML Imagemap Generator：https://labs.d-s-b.jp/ImagemapGenerator/

OL/LI｜リスト

olタグとliタグで番号付きリストを作成できます。
ol : Ordered List　/　li : List

<ol>
    <li>項目１</li>
    <li>項目２</li>
    <li>項目３</li>
</ol>

P｜段落

pタグは段落を指定します。複数の行が含まれる領域になります。
p : Paragraph

<p>段落を指定します</p>

PRE｜整形済みテキスト

半角スペースや改行をそのまま表示する際に使用します。
CSSのソースコードなどをそのまま表示する場合は<code>も併用します。
pre：preformatted text

<pre><code>body{color:red};</code></pre>

RUBY｜ルビ

かつてはI.E.のみでしたが、最近では大半のブラウザが対応しています。

<ruby>
   漢字<rt>かんじ</rt>
</ruby>

SPAN｜文字列属性

spanタグは、まとまった文字列に対して何らかの属性を定義する場合に用います。

<span>インライン要素として扱われます</span>

SVG｜ベクターグラフィックスの描画

SVG形式の図形を、以下のように直接記述することができます。

<svg width="100" height="100">
   <circle cx="50" cy="50" r="40" stroke="black" stroke-width="10" fill="red" />
</svg>

Illustrator のようなベクター系のソフトを使うと、.svg 形式でファイルを保存することができます。それをテキストエディタで開くとソースコードが見えるので、<svg> 〜 </svg> の部分（実質全部）をそのままHTMLにコピー&ペーストで表示できます。

TABLE｜表

表を作成するタグです。tableタグは全体、trタグは行、tdタグは列、それぞれ組み合わせて使用します。

<table>
    <tr>
        <td>データ</td>
        <td>データ</td>
    </tr>
</table>

しっかり構造化するには以下のように、thead ＞ tfoot ＞ tbody の順にくくって記述します（これはヘッダとフッタを先読みして表示するため）。実際の表示は thead ＞ tbody ＞ tfoot の順になります。

<table  border="1" rules="all">
    <thead>
         <tr>
              <th>商品</th>
              <th>価格</th>
         </tr>
    </thead>
    <tfoot>
         <tr>
              <td>合計金額</td>
              <td>250円</td>
         </tr>
    </tfoot>
    <tbody>
         <tr>
              <td>鉛筆</td>
              <td>150円</td>
         </tr>
         <tr>
              <td>消しゴム</td>
              <td>100円</td>
         </tr>
    </tbody>
</table>

セルの横方向の結合は、以下のように colspan を追記します。
表の１行目では、横３つのセルが１つのセルに結合表示されます。

<table  border="1" rules="all">
  <tr>
    <td colspan="3">一覧</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
  </tr>
</table>

　
セルの縦方向の結合は、同様に以下のような書き方になります。
表の１列目では、縦３つのセルが１つに結合表示されます。

<table  border="1" rules="all">
  <tr>
    <td rowspan="3">一覧</td>
    <td>A</td>
  </tr>
  <tr>
    <td>B</td>
  </tr>
  <tr>
    <td>C</td>
  </tr>
</table>

　
表の罫線その他についてですが、HTML5では、ビジュアルに関することは原則としてCSSで記述するのが現在の標準的な考え方です。例えば border属性の指定は空文字か「1」の指定だけが使用を認められています。

UL/LI｜リスト

ulタグとliタグでリストを作成できます。デフォルトでは黒丸の付いたリストになります。
ul : Unordered List　/　li : List

<ul>
    <li>項目１</li>
    <li>項目２</li>
    <li>項目３</li>
</ul>

VIDEO｜ビデオ

動画ファイルの再生に用います。

<video src="movies/sample1.ogv" autoplay></video>
属性　src="URL" ソース　width="480" 表示幅　controls コントロールバー
　　　autoplay 自動再生　 loop ループ再生　muted 消音　
　　　poster=”画像データのURL” ポスター画像
使える形式　MP4、WebM、Ogv など

video 要素（audio要素も）でメディアの URI を指定する際、再生範囲を指定する追加情報を含めることができます。記法は以下のとおり。

#t=[starttime][,endtime]

時間は秒数 (浮動小数点数) または、時/分/秒をコロン区切りで指定できます。
例えば、2時間5分1秒は 2:05:01 。以下に例を示します。

<video src="http://example.com/video.ogv#t=10,20"・・・

<!--　-->｜コメント

コメントを記述するためのものです。ブラウザ上には表示されません。

<!-- この部分は表示されません -->

とりあえず、以上、基本的なタグの意味が理解できていればOKです。
実際には、各タグに詳細な属性情報を付加することができます。
以下にHTMLタグリファレンスが掲載されたサイトをご紹介しますので、
詳細は、そちらを参考にしてみて下さい。

現実の仕事では、オーサリングソフトがタグの記述を支援あるいは自動生成してくれるわけですから、HTMLタグの丸暗記は必要ありません。必要に応じて、リファレンスを見て、微調整できる・・という技術があれば十分です。

• Google: HTML タグ 一覧
  
  
  
  

文字参照

HTMLの中に直接書くと、タグや特殊記号として処理されて、その文字そのものが表示されないものがあります。その場合は以下のように「文字参照」を使って表示させます。

文字実体参照　表示　備考
"    "    quotation mark  引用符
&     &    ampersand アンド記号
'    '    apostrophe アポストロフィ
&lt;      <    less-than sign 不等号(小なり)
&gt;      >    greater-than sign 不等号(大なり)
&copy     ©    copyright コピーライト

尚 < という文字そのものを説明のために表示したい場合は、
&記号自体を、& と表記します。
よって、以下のように記載すると表示されます。
<

補足：IEでHTML5を正しく認識させる方法について
この問題は現在ほぼ解消されました。記事は参考までに残しています。

独自路線色の強かった少し前のI.E.（InternetExplorer）ではHTML5への対応も不完全で、他の標準ブラウザのような動作が期待できません。Googleからそれを解消するスクリプトが提供されていますので、お試し下さい。

• html5shivの導入
  IE8以前のブラウザにHTML5のタグを認識させるためのライブラリです。
  Download > http://code.google.com/p/html5shiv/
  • 1) ダウンロード・解凍して html5shiv.js を見つけて下さい。
  • 2) ファイルを適当な場所に置いて下さい
    　（ここではドキュメントルートにjsフォルダを作って置きます）。
  • 3) HTMLの<head>内に以下のコードを記述して下さい。

    <!--[if lt IE 9]>
        <script src="js/html5shiv.js"></script>
    <![endif]-->

    HTMLの記述としては、単なる注釈扱いになりますが、IEのみが以下のように解釈します。
    「もしもIEのバージョンがv9未満だったならば、スクリプトを読み込め・・」という意味です。
    
    

• IE9.jsの導入
  IE6,7,8 を ie9 に近づけるためのライブラリをリンク導入します。
  以下のソースコードをHTML内に書くだけです。

  <!--[if lt IE 9]>
      <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
   <![endif]-->

  この情報のオリジナルは以下にあります。随時、最新の情報を使って下さい。
  http://code.google.com/p/ie7-js/

• 以下、比較してみて下さい。当然ですが、IE8以前のブラウザで見ないと、この2つの違いは確認できません。
  • 普通にHTML5で作ったもの
  • 上2つを実装したもの