HTML開発の基本知識

今日はhtmlの基本知識を紹介します。内容を見れば、自分でもhtmlの書き方を理解できると思います。

htmlコメントアウトの書き方

コメントは、HTML文書のソース部分に記述する注意書きです。ソースの中に、サイト作成側の覚え書きや申し送りとしてコメントを入れることができます。コメント部分はブラウザからは無視されるので、ブラウザ上では表示されません。

1行のときは、以下のように「<!–」と「–>」で囲みます。

複数行のときも、以下のように記述すると「<!–」と「–>」の間の記述が非表示になります。

htmlコメントアウトの書き方注意点

①ほとんどのHTMLタグをコメントアウトすることが可能ですが、コメントタグ自体はコメントアウトすることはできません。

②「-(ハイフン)」を連続して記述すると、コメントの終了と解釈するブラウザがあるため、ハイフンの連続使用は止めましょう。

CSS、Javascript、PHPコメントアウトの書き方の一覧

HTMLによく使うタグ

<h1>～<h6>とは

「H」とは「Heading」の略で、見出しを意味するタグです。文章の章題や節題を記述し、その見出しの大きさに合わせて<h1>タグから<h6>タグまで設定できます。

※一行として使うタグ

<p>とは

「P」とは、段落を指定するためのタグで、「P」とは「Paragraph」の略です。<p>～</p>で囲まれたテキストは1つの段落であることを示します。

※一行として使うタグ

<br>とは

「br」とは「break」の略で、改行を行うためのタグです。終了タグなしで使います。似たタグに<p>タグがありますが、文章を明示的に改行するためには<br>タグを用います。

※終了タグ無し

<hr>とは

「HR」とは「horizontal rule（水平方向の罫線）」の略で、水平の横線を引くためのタグです。

※終了タグ無し

<b>とは

「b」とはフォント（文字）を太字（bold）にするためのタグです。<b>タグで囲まれたテキストは太字になります。似た効果を持つものに<strong>タグがありますが、<strong>タグは単語や文章の「強調」をしたい場合に使用します。

<strong>とは

「strong」とはテキストの強調を表す際に使用するタグです。

<i>とは

「i」とはフォント（文字）をイタリック体にするためのタグで、<i>～</i>のタグで囲まれたテキストはイタリック体になります。

<em>とは

「em」とは「emphasis」の略で、強調を表すタグです。<em>タグで囲んだテキストを強調し、Internet ExplorerやNetscape Navigatorなどのブラウザでは斜体文字で表現されます

<u>とは

「u」とはフォント（文字）に下線（アンダーライン）を引くためのタグです。<u>～</u>のタグで囲まれたテキストには下線が引かれます。

<ins>とは

「ins」とは「insert」の略で、後から追加された部分を示すタグです。

<ul>とは

「ul」とは「unordered list」の略で、その名前の通り順序がない箇条書きのリストを表示する際に使用するタグです。

使用例：
<ul>
<li>データ1</li>
<li>データ2</li>
<li>データ3</li>
</ul>

ulで良く使う属性の設定値：
type="disc"：黒丸アイコン
type="circle"：白丸アイコン
type="sqare"：四角アイコン

<ol>とは

「ol」とは「ordered list」の略で、その名前の通り順序のある番号付きのリストを表示する際に使用するタグです。

使用例：
<ol>
  <li>データ1</li>
  <li>データ2</li>
  <li>データ3</li>
</ol>

olで良く使う属性の設定値：
type="1"：項目番号の1タイプを指定します。
type="A"：項目番号のAタイプを指定します。
start="数値"：項目の開始番号を指定します。

<dl>とは

「dl」とは「definition list（定義）」の略で、定義リストを表すタグです。

定義リストは<dl>タグで範囲で表し、定義する用語（Definition Term）を<dt>タグで、用語の説明（Definition Description）を<dd>タグで表します。

使用例：
<dl>
<dt>用語</dt>
<dd>用語に対する説明</dd>
</dl>

<a>とは

「a」とは、「Anchor（アンカー）」の略で、リンクの出発点や到達点を指定するタグです。

使用例：
<a href="http://sample.htm">サンプルサイトへ飛びます。</a>

<a href=”#abc”>abcと名前を付けた場所へリンクします</a><br>
<a href=”index.htm#a”>別ファイルの名前を付けた場所へリンクします</a>

<pre>とは

「pre」とは「preformatted text（整形済みテキスト）」の略で、その名の通り<pre>～</pre>で囲んだ整形済みテキストを表示するためのタグです。

<img>とは

「img」とは「image」の略で、文書内に画像を表示するためのタグです。
表示する画像ファイルはsrc属性で指定し、WEB上ではGIF形式（*.gif）、JPEG形式（.jpg）、PNG形式（*.png）の画像形式を指定することができます。

<table>とは

「table」とは<tr>、<th>、<td>などと組み合わせて表を作成するためのタグです。表の基本的な構造は<table>～</table>の中に<tr>～</tr>で表の横部分を指定し、その中に<th>～</th>や<td>～</td>で表題や縦軸を指定してセルを定義します。

<tr>とは

「tr」とは「table row」の略で表の行部分（横方向）を指定するタグです。

<caption>とは

「caption」とは、テーブルのタイトルを指定するタグです。<caption>タグは、table開始タグの直後に1つだけ記述します。

関連属性

セルの合併

<div>とは

「div」とは、単体では特に意味を持たないタグですが、<div>で囲った部分をブロックレベル要素としてグループ化することができるタグです。

<span>とは

「span」とは、単体では特に意味を持たないタグですが、<span>～</span>で囲った部分をインライン要素としてグループ化することができるタグです。

タグの共通属性

id ：要素に対して固有の識別子を設定するための属性です。 属性値に任意の文字列を指定することで、要素に固有の識別子を設定することができます。 id属性の値は一意であるため、他の要素に設定されたid属性に同じ識別子を指定することはできません。

class：要素に対してクラス名（分類名）を付けることができます。
このクラス名は、主にスタイルシートのセレクタ（スタイルの適用対象）として使用されることになります。

name：要素に名前を設定するための属性です。 また、コントロールやアプレット、フレームなどの名前を設定する目的にも使用されます。属性値に任意の文字列を指定することで、要素に名前を設定することができます。

style：タイルシートを記述するためのHTMLタグです。

<form>とは

「form」とは、入力・送信フォームを作成する際に使用する要素です。
<form>タグがひとつのフォームとなり、フォームの中に<input>タグ、<select>タグ、<textarea>タグなどのフォーム部品を配置してフォームを作ります。

<input>とは

「input」とは、<form>タグで作成したフォームの中でテキスト入力欄やボタンなどの部品を作成する要素です。

※type属性の値：text、 password 、 radio、 checkbox、 file、 hidden、 submit、 image、 reset、 button

<select>とは

「select」とは、<form>で作成したフォームの中でメニュー（セレクトボックス）を作成するためのタグです。初期値ではプルダウン型のメニューが作成されますが、<size>属性により選択肢の表示行数を指定することが可能です。また、メニューの選択肢は<option>を用いて作成します。

<textarea>とは

「textarea」とは、複数行の入力が可能な入力欄を作成するためのタグです。
<textarea>～</textarea>内に入力されたテキストは、入力フィールドの初期値として入力欄に表示されます。

<frameset>とは

「frameset」とはウインドウをいくつかのフレームに分割する際に使用するタグです。ウインドウをどう分割するかは<frameset>タグで指定し、分割した各フレーム内に表示するページは<frame>タグで行います。

<frame>とは

「frame」とは分割されたフレームの中のファイルと表示方法を指定するタグです。<frame>タグは、ウインドウの分割を行なってフレームを設定する<frameset>タグの中で使用します。

使用例：
<frameset cols="240,1*,3*">
  <frame src="sample1.html">
  <frame src="sample2.html">
  <frame src="sample3.html">
</frameset>

<noframes>とは

「noframes」とは、フレームに対応していないブラウザや、ユーザーがフレームを表示しない設定にしている場合に、代替の内容を表示するためのタグです。

<iframe>とは

「IFRAME」とは「inline frame」の略で、文書の中にインラインのフレームを作成するためのタグです。

<iframe>を使用することで、ウインドウを分割してフレームを作るだけではなく、ウインドウの中に独立したフレームが作成することができます。

<embed>とは

「embed」とは「enbedding（埋め込み）」の略で、文書内に音声や動画などのデータを埋め込むためのタグです。本来、動画や音声を再生するにはプラグインが必要ですが、src属性で指定ファイルを読み込むことで、ブラウザにインストールされているプラグインでデータを再生することができます。

<object>とは

「object」とは画像や動画、音声、プラグインデータ、HTML文書などのさまざまな形式を持つデータを文書に埋め込むための汎用的なタグです。<applet>タグ、<embed>タグ、<bgsound>タグ、<img>タグなどの替わりに使用されます。

html5について

終了タグを省略できる
li、dt、dd、p、optgroup、option、tr、td、th

html、head、bodyが完全に省略できる。

追加されたタグ
header, nav, article, section, aside, footer

formタグに追加された属性
required, placeholder, autofocus

inputタグに追加されたtypeの値
email, date, week, month, time, color, range,  number

audio、videoタグの追加