HTMLとは何か?

HTMLとは、HyperText Markup Languageの略で、ウェブページを作成の構造を指定するための言語です。

Hypertextというのは、ハイパーリンク(リンク)を埋め込むことができるテキストのことです。

ウェブページのほとんどにHTMLが使用されています。

ファイル拡張子は、.htmlです。

 

作成に必要なアプリ

HTMLの作成に必要なアプリは、テキストエディタのみです。

テキストエディタは、メモ帳でも構いません。

HTMLを書くためのエディタや、HTMLをコードではなく表示を確認しながら書けるエディタのあります。

自分でかいたHTMLを見るには、そのファイルのパスをブラウザのアドレスバーに入力するか、エクスプローラーからファイルをブラウザにドラッグします。

 

書き方

HTMLには、タグというものがあり、<タグ名>から</タグ名>の間がそのタグの中身になります。

<タグ名>のことを、開始タグといい、</タグ名>のことを終了タグといいます。

終了タグがないものもあります。

また、タグには、属性というものがあります。属性をつける場合は開始タグを<タグ名 属性名=”値”>と書きます。値でいろいろなものを指定します。

属性をつける場合も、終了タグの書き方は変わりません。

 

また、基本のコードは下の通りです。

1行目はDOCTYPE宣言といい、コードがHTML5というバージョンであることを示します。詳しくは、「【HTML】DOCTYPE html – 宣言」という記事を参照してください。

そして、DOCTYPE宣言以外の全体をhtmlタグで囲んでいます。そのhtmlタグはlang属性という言語を指定する属性で日本語を指定します。

headタグは、文書の情報を指定する部分です。

metaタグのcharset属性で文字コードを指定しています。

titleタグでタイトルを指定しています。

そして、bodyタグの中に本文(表示する部分)を書きます。

 

バージョン

HTML 4.0

HTML 4.0は、1997年に勧告されたHTMLです。

HTML5

HTML5は、2014年に勧告されたHTMLです。

記事のセクション分けや、動画や音声の埋め込みなどが簡単になり、要素の見直しが行われました。

 

同時に使用される言語

CSS

CSSは、見た目を指定するための言語(スタイルシート)です。

主にHTMLと組み合わせて使用します。

HTMLと同じく、ウェブページのほとんどにCSSが使用されています。

JavaScript

JavaScriptはウェブページを動的にするための言語です。

計算をしたり、特定の条件でCSSを変更したりすることができます。

主にHTMLと組み合わせて使用します。

また、HTMLやCSSと同じく、ウェブページのほとんどにJavaScriptが使用されています。

 

ウェブページのHTMLを見る方法

ページのHTML(ソースコード)を見るには、まず、右クリックをします。

そして、「ページのソースを表示」をクリックします。

これで、ページのHTMLが表示されます。

この方法以外にも、Ctrl+Uを押すことで表示できます。

 

HTMLメール

HTMLメールとは、HTML形式のメールのことです。

HTML形式ではない通常の文字列だけのメールのことは、テキストメールといいます。

 

主なタグ

title

titleタグは、タイトルを指定するためのタグです。

1つのページに1つのタイトルを指定することができます。

headタグの中に書きます。

このタグは、検索順位にとても影響するタグです。

p

pタグは、Paragraph段落を示すタグです。

段落ではなく改行を表したいときは、後述のbrタグを使用します。

br

brタグはBReakの略で、改行するためのタグです。

終了タグは必要ありません。

a

aタグはAnchorの略で、他のページにリンクを貼るためのタグです。

href属性でリンク先のURLを指定します。

strong

strongタグは、文字列を強調するためのタグです。

img

imgタグは、画像を挿入するためのタグです。

src属性で画像のURLを指定します。

h1-h6

このタグは、見出しのタグです。

1-6の数字が小さくなるほど大きな見出しになります。

HTML5とは?いままでのHTMLとの違いは?

HTMLの新しいバージョンであるHTML5が勧告されていますが、そのHTML5とは何かをこのページでは説明します。

 

HTML5とは

HTML5は、HTMLのバージョン5で、要素の見直しや機能の追加などが行われました。

昔はサポートしていないブラウザもありましたが、現在はほとんどのブラウザがサポートしています。

 

変更,追加されたもの

 

DOCTYPE宣言

HTML5のDOCTYPE宣言はHTML4以前に比べて簡略化されています。

下の表がHTML4とHTML5のDOCTYPE宣言です。

HTML4のDOCTYPE宣言 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML5のDOCTYPE宣言 <!DOCTYPE html>

HTML4のDOCTYPE宣言は100文字ほどありますが、HTML5のDOCTYPE宣言は15文字ほどになってます。

 

セクション

HTML5になって、セクションを決める要素が追加されました。

HTML4では、divタグを使用していましたが、HTML5ではセクションを決めるタグで代用することができます。

下の表は、セクションを決めるタグの一覧です。

<header> ヘッダー
<footer> フッター
<article> 記事
<aside> サイド
<nav> ナビ
<section> 一つのセクション

<header>タグは、サイトのタイトル,ヘッダー画像,ヘッダーナビなどに使用します。

<footer>タグは、フッターのコピーライト,連絡先,ナビなどに使用します。

<article>タグは、記事に使用します。

<aside>タグは、サイドバーなどに使用します。サイドバーの中には検索や他のページヘのリンクなどが入ります。

<nav>タグは、ナビに使用します。

<section>タグは、一つのセクションです。

 

inputタグのtype属性

<input>タグのtype属性の値もHTML5で新しく追加されています。

下の表が追加されたtype属性の値の一覧です。

color
date 日付
email メールアドレス
month
number
range スライド式の数値選択
search 検索
time 時間
url URL
week

 

メディアを埋め込むタグ

HTML5では、メディアやファイルを埋め込むタグが追加されました。

<audio> 音声の埋め込み
<video> 動画の埋め込み
<embed> ファイルの埋め込み
<iframe> インラインフレームの埋め込み
<source> 埋め込みファイルのソース

 

<canvas>

<canvas>タグは、JavaScriptと組み合わせて図形などを描画するためのHTML5で追加されたタグです。

このタグとJavaScriptを使えば、ゲームを作ることもできます。

 

APIの追加

APIが追加されたことでアプリケーションを作りやすくなりました。

 

追加されたタグ

HTML5で追加されたタグです。

<datalist> データリスト
<figure> 図表
<figcaption> <figure>のキャプション
<main> メイン
<mark> 注目させる
<meter> ゲージ
<progress> 進捗状況
<ruby> ふりがな
<rp> ふりがなを囲む記号
<rt> ふりがなの文字列
<details> 詳細情報
<summary> <details>の概要
<time> 時間
<wbr> 改行可能
<keygen> 暗号鍵
<output> 計算結果

<datalist>タグは、フォームに使うデータリストです。

<figure>タグは、図表です。

<figcaption>タグは、<figure>タグのキャプションです。

<main>タグは、メインコンテンツを示します。

<mark>タグは、注目させたい部分です。ブラウザではたいてい黄色になります。

<meter>タグは、ゲージです。値の最大値や最小値を設定することもできます。

<progress>タグは、進捗状況です。

<ruby>タグは、ふりがなです。

<rp>タグは、ふりがなを囲む記号です。

<rt>タグは、ふりがなのテキストです。

<details>タグは、詳細情報です。

<summary>タグは、<details>タグの概要です。

<time>タグは、正確な時間です。

<wbr>タグは、ブラウザが改行してもいい場所です。

<keygen>タグは、暗号鍵を生成します。

<output>タグは、計算結果などです。

 

廃止されたタグ

HTML4以前のタグの一部が廃止されました。

<u> 下線
<acronym> 頭文字語
<applet> Javaアプレット
<big> 文字を大きくする
<center> 文字を中央に表示
<dir> リスト
<font> フォント関連の操作
<frame> フレーム
<frameset> フレームの分割
<strike> 打ち消し線
<tt> 等幅フォント

<u>タグは、下線を引きます。CSSのtext-decoration:underlineで代用できます。

<acronym>は、頭文字語です。

<applet>は、Javaアプレットを埋め込みます。<object>タグで代用できます。

<big>タグは、文字を大きくします。CSSのfont-sizeで代用できます。

<center>タグは、文字を中央にします。CSSのtext-align:centerで代用できます。

<dir>タグは、リストです。<ul>タグで代用できます。

<font>タグは、フォントの操作をします。CSSで代用できます。

<frame>タグは、フレームです。

<frameset>タグは、フレームの分割をします。

<strike>タグは、打ち消し線を引きます。CSSのtext-decoration:line-throughで代用できます。

<tt>タグは、等幅フォントにします。

HTML5とは

HTML5は、HTMLの5つ目のバージョンで、現在の最新のHTMLです。

HTML5は、現在ほとんどのブラウザが対応しています。

 

HTML4との違い

DOCTYPE宣言

HTML4では、<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>と長かったのですが、HTML5では<!DOCTYPE html>と簡略化されました。

構造

<header>(ヘッダー),<footer>(フッター),<section>(セクション),<article>(記事)などのタグが追加されたので、<div id=”header”>と記述せずにタグだけでヘッダー,フッター,記事などを分けることができるようになりました。

そして、見た目を操作するHTMLタグ(<b>,<i>,<small>,<center>タグなど)の内容が変更,削除されました。

外部ファイルの埋め込み

flashなどのプラグインを使わずに<audio>タグで音声,<video>タグで動画を埋め込むことができます。

描画

flashなどのプラグインを使用せずに<canvas>タグとjavascriptを使用して、グラフィックを描画できるようになりました。

また、CSS3を使用して、グラデーションやアニメーションを作成できるようになりました。

機能

ファイルを操作するFile API,位置情報を取得するGeolocation APIなど、いろいろなAPIが追加されました。

HTMLタグ一覧

  • <!doctype html>HTML文書の最初に記述する(閉じタグ無し)
  • <html>HTML文書の<!doctype html>以外の全体の部分(Hypertext Markup Languageの略)
    • <head>このページの情報を記述する(headは頭という意味)
      • <title>ページのタイトル
      • <meta>ページのメタデータ(閉じタグ無し)
      • <link>外部からのCSSなどを呼び出す(閉じタグ無し)詳しくはこちらへ
      • <style>ここにCSSを記述する
      • <base>基準URL
    • <body>ページの本文(bodyは体という意味)
      • <header>文章のヘッダー部分
      • <footer>文章のフッター部分
      • <article>記事になっているメインの部分
      • <aside>メインではない補足情報などの部分
      • <nav>ナビゲーション
      • <section>セクション
      • <h1>~<h6>見出し(hの後の数字が大きい方が大きい見出し)
      • <script>この中にjavascriptを記述する
      • <noscript>javascriptがオフになっている場合に表示する
      • <ul>箇条書きリスト(unordered listの略)
      • <ol>順番付きリスト(ordered listの略)
        • <li>リストの中の一つの項目(list itemの略)
      • <dl>定義リスト
      • <dt>定義リストの中の定義されるもの
      • <dd>定義リストの中の定義されるものの説明
      • <div>マークアップするための範囲指定(縦に重なっていく)
      • <span>マークアップするための範囲指定(横に重なっていく)
      • <p>段落
      • <hr>水平線を引く(閉じタグ無し)
      • <blockquote>引用している部分
      • <strong>強調詳しくはこちらへ
      • <em>強勢詳しくはこちらへ
      • <var>変数
      • <ins>追加された部分
      • <del>削除された部分
      • <sub>下付き文字
      • <sup>上付き文字
      • <time>時間
      • <br>改行
      • <code>プログラムなどのコード
      • <a>リンク
      • <address>連絡先など
      • <img>画像
      • <pre>改行やスペースを保持
      • <hgroup>見出しをグループ化
      • <i>斜体詳しくはこちらへ
      • <b>太字詳しくはこちらへ
      • <s>打ち消し線
      • <q>引用
      • <small>警告、免責事項など
      • <table>表
        • <thead>表のヘッダー
        • <tbady>表のボディー
          • <th>表の見出し
          • <tr>表の横の1行
          • <td>表のデータ
          • <col>表の縦の1行
          • <colgroup>表の縦1行をグループ化
        • <form>フォーム
          • <label>フォーム部品とラベルを中に書く
          • <input>フォームの入力部品(閉じタグ無し)
          • <option>セレクトボックスなどの選択肢を指定する
          • <select>セレクトボックス
          • <textarea>テキスト入力エリア
          • <fieldset>フォーム内の部品をまとめる
          • <legend>fieldsetにタイトルをつける
        • <figre>図表
        • <figcaption>図表のキャプション
        • <dfn>用語
        • <abbr>略語
        • <u>下線
        • <menu>メニュー
        • <command>コマンド
        • <details>詳細情報など
        • <summary>detailsの内容の概要
        • <meter>測定値
        • <progress>進行状況
        • <output>計算結果
        • <keygen>キー
        • <map>イメージマップ
        • <area>イメージマップのリンク領域
        • <source>メディアファイルの種類、URLを指定
        • <wbr>改行してもいい位置
        • <bdo>書く方向を決める
        • <bdi>書く方向を独立させる
        • <ruby>振り仮名
          • <rt>振り仮名のテキスト
          • <rp>振り仮名を囲む記号
        • <mark>目立たせる
        • <kbd>入力する内容
        • <samp>出力結果
        • <caption>キャプション
        • <canvas>図形を書く
        • <audio>音声
        • <video>動画
        • <iframe>インラインフレーム
        • <embed>データを埋め込む
        • <object>データを埋め込む
        • <param>パラメータ