LogoMark.png

HTML/Tags

HTML Basic Tags

HTMLHTML/TagsHTML/SampleHTML/Tips

CONTENTS


基本要素

html

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

head

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

body

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

title

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

meta

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




セクション

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ページ内に1つのみ使用が原則。また、article, aside, footer, header, nav要素の中に入れてはいけません。

article

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

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

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

section

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

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


aside

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

補足:articleとsection

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

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

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

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



各種要素タグ

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

A|リンクの設定

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

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

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>

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

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

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

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

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


H*|見出し

h1~h6の6種類、見出しとして使用されます。
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" >

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>項目1</li>
    <li>項目2</li>
    <li>項目3</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 を追記します。
表の1行目では、横3つのセルが1つのセルに結合表示されます。

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

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

<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>項目1</li>
    <li>項目2</li>
    <li>項目3</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タグの丸暗記は必要ありません。必要に応じて、リファレンスを見て、微調整できる・・という技術があれば十分です。

文字参照

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

文字実体参照 表示 備考
&quot;    "    quotation mark  引用符
&amp;     &    ampersand アンド記号
&apos;    '    apostrophe アポストロフィ
&lt;      <    less-than sign 不等号(小なり)
&gt;      >    greater-than sign 不等号(大なり)
&copy     ©    copyright コピーライト
尚 &lt; という文字そのものを説明のために表示したい場合は、
&記号自体を、&amp; と表記します。
よって、以下のように記載すると表示されます。
&amp;lt;




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

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




PAGES

GUIDE

DATA


*1 SVGファイルを直接 src= で読み込ませることもできますが、後述のSVGタグを使う方が良いようです。
Last-modified: 2024-02-05 (月) 14:43:46