HTMLとは何か?

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

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

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

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

 

作成に必要なアプリ

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

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

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

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

 

書き方

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

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

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

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

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

 

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

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”utf-8″>
<title>タイトル</title>
</head>
<body>

</body>
</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とは

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>パラメータ