いづいづブログ

アジャイルコーチになりたい札幌在住SEです。アジャイル札幌スタッフ＆ScrumFestSapporo実行委員。Like：パクチー/激辛/牡蠣/猫/初期仏教

HTMLの基本を理解する #1

Webプログラミング HTML HTMLの基本を理解する

HTMLの学習をしたので記録。

ここにあるごく簡単なHTMLの説明を読んで要点をまとめた。

1.HTML

HTMLとは

HTMLとは「HyperText Markup Language」の略でマークアップ言語である。

マークアップ言語とは、文章にマークを付けて「これは見出しだよ」「これはリストだよ」というように意味持たせる（＝文書を構造化する）言語のこと。

要素とは

要素とタグ

HTMLは見出し、段落、リストなどの「要素」を組み合わせて構成する。この「要素」をマークアップ記号を使って表現したものが「タグ」。タグは、

<h1>見出しだよ</h1>

のように開始タグ<XX>と終了タグ</XX>のペアで挟む。 終了タグは省略できるものもあるができるだけ省略せずに書くほうがいい。

ヘッド要素とボディ要素

HTMLは「ヘッド」と「ボディ」で構成されている。詳細は後述。

親要素と子要素

要素は入れ子関係になっており、外側の要素を「親要素」その内部に含まれる要素を「子要素」と呼ぶ。 一番トップにあたる親要素を「ルート要素」と呼びhtml要素がそれにあたる。

基本的なタグ

<html>

その文書がHTML文書であることを指定する。ルート要素。

<head> <body>

ヘッドにはヘッダー情報（タイトルやリンク、どのような言語が使われているのかなど）を書く。その他CSSやスクリプトなど外部ファイルの読み込みを制御することもできる。 このようにコンピュータに知らせるための情報をメタ情報と呼ぶ。

ボディは本文。実際にブラウザの画面上に表示される内容（文章や画像）を書く。

ちなみにここまでの<html>と<head>と<body>を使って書いたHTMLはこんな感じ。

<html> 
    <head> 
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta name=”description” content=”この文書の説明”>
        <meta name=”keywords” content=”キーワード1,キーワード2,キーワード3”>:</head>
        <title>タイトル</title>
        <link href="style.css" rel="stylesheet" type="text/css" />
    </head> 
    <body>
        文書の本体部分
    </body>
</html>

<title>

この文書のタイトルを書く。

タイトルはその文書自身についての情報なので、ヘッド要素に書く。

１つの文書には１つのタイトルしかつけられない。 タイトルはその文章を代表する重要な要素なのでよく考えたわかりやすいタイトルをつけるように心がける。

<title>タイトル</title>

<h1>〜<h6>

ある程度の長さになる文章を書く場合、内容を細分化し１つのまとまりごとに見出しをつける。

<h1>見出し１</h1>
<h2>見出し２</h2>
<h3>見出し３</h3>

<p>

１つの段落を表す。

p要素は空行を１つ空けるための要素ではないことに注意する。

<p>見た目に変化はありません</p>
<p>HTML上で改行をしても
見た目上は改行されないのです</p>

見た目に変化はありません

HTML上で改行をしても 見た目上は改行されないのです

<br>

段落の途中で改行をいれる。

住所<br>
名前<br>
電話番号<br>

住所
名前
電話番号

<ul>

列挙型の箇条書き。箇条書きにする部分を<ul>でマークアップし、項目はli要素で並べる。

<ul>
  <li>バニラ</li>
  <li>チョコレート</li>
  <li>ミックス</li>
</ul>
  • バニラ
  • チョコレート
  • ミックス

<ol>

順序型の箇条書き。箇条書きにする部分を<ol>でマークアップし、項目はli要素で並べる。

<ol>
  <li>卵を割ります。</li>
  <li>塩とコショウで味付けします。</li>
  <li>熱したフライパンで焼きます。</li>
</ol>
  1. 卵を割ります。
  2. 塩とコショウで味付けします。
  3. 熱したフライパンで焼きます。

<a>

リンクする 。 リンク元となる文字は<a><a/>で挟む。リンク先のURLは、開始タグにhrefという「属性」を加えて示す。

<a href="http://izumii19.hatenablog.com/">いづいづブログ</a>

いづいづブログ

<em> <strong>

文字を強調する 。ただしブラウザの環境により必ずしもイタリックや太字になるわけではなく、赤字や下線で表現される場合もある。

<p><em>emで強調している</em></p>
<p><strong>strongで強調している</strong></p>

emで強調している

strongで強調している

<img>

画像を表示する 。 <br/>タグと同様に、これも終了タグのないタイプのタグ。 srcという属性には表示する画像名を、altという属性には画像が表示できない場合の代替文を指定する。

<p><img src="aaa.gif" alt="画像が表示できないときこの説明がでる" /></p>


参考 html-coding.co.jp

何で書くか

テキストエディタで書くことが多い。

HTMLエディタというものも存在するがあまり使い勝手が良くない様子。

HTMLの書く時の注意

HTMLはあくまでも構造上の印をつけるものなので構造上の印をつける以外の目的を持たせないこと。 違う目的（見た目の操作など）でマークアップを変えてしまうと構造上の意味合いが変わってしまうため、マークアップの目的が果たせなくなってしまう。

マークアップをするとブラウザで見たときに見た目が変わるけど、それはCSSが全く入っていなくても判断できるようにするためのおまけのようなもの。

2.アクセシビリティ

アクセシビリティとは

アクセシビリティとは、特にWebサイト上における、情報やサービスへのアクセスのしやすさのことである。 様々な環境に配慮し、どんなユーザーでも使いやすいページはアクセシビリティ (accessibility) が高いと言える。 誰でもウェブのコミュニケーションに参加できるように設計を行うこと。

アクセシビリティが高いコンテンツを作るには

コンテンツが認識可能であること

  • 全ての非テキスト内容に、代替となるテキストを用意し、拡大印刷、点字、音声合成、シンボルや簡略言語など他の形態に変換できるようにする。 （img要素にalt属性で代替テキストを記述することも、その１つ）

  • 内容と表現を分離する。万が一CSSをがなんらかの理由で適用できない環境でも内容は伝えることが可能。

誰でも操作可能であること

  • 特別な装置に依存することなく操作できること。すべてキーボードで操作できるようにする。
  • 入力の制限時間を設けたり、勝手にページが切り替わったりしないようにすること。
  • てんかんなどを誘発するような激しい点滅などの表現をしない。また点滅したり動いたりする情報は、煩わしさも感じさせることになる。

操作しやすいUI

  • 操作しにくかったり、なんの機能なのかわからないパーツを表示すると、コミュニケーションがとりづらいため工夫が必要である。