【HTML5】 基礎知識（タグ編）
HTML文書がHTML5で記述されていることを明示的にブラウザに伝える役割を果たす。
DOCTYPE宣言をした場合、レンダリングモードが標準モード（Standards mode）での解釈となり、
DOCTYPE宣言をしない場合、レンダリングモードが互換モード（Quirks mode）での解釈となる。
<!DOCTYPE html>タグは目印を意味する言葉で、HTMLはタグで目印をつけ各要素の役割を示す。
<h1>見出し</h1>#ID名と#class名の違い#IDはHTML内の要素を一意に識別するために用いる。ゆえに他の要素と#IDが重複してはならない。
一方、#classは複数の要素で重複して用いることができる。
<ul class="classA classB">のようにクラス名の間を半角スペースで区切ることで複数指定することができる。
これをマルチクラスという。
マルチクラスは、複数の要素に共通の装飾を施した後に、「この要素だけ追加で別の装飾を加えたい！」というときに役立ちます。
<html>タグDOCTYPE宣言の後に記述するタグ。
HTML文書であることを明示し、文書の最初と最後に記述する。
<html>
</html><head>タグ文書のヘッダ情報を表すタグ。
htmlタグの内側に記載する。
<head>
</head><head>要素に記述できる情報<meta>タグHTML文書に関する情報を指定するタグ。
meta要素を指定する際には、 name属性,http-equiv属性,charset属性のうち、少なくとも一つを指定する必要がある。
【charset】
HTML文書の文字コードを指定する属性。
以下はそのHTML文書の文字コードが「UTF-8」であることを示す。
<meta charset="UTF-8"><link>タグ外部ファイルを参照するときに使うタグ。
<link rel="stylesheet" href="style.css" type="text/css"><title>タグ文書のタイトルを表すタグ。
ブラウザのウインドウタイトルや、ブックマーク、検索エンジンの検索結果等に表示される。
<title>サンプルサイト</title><body>タグHTML文書本体の内容を表すタグ。
<body>
</body><ul>要素と<ol>要素<ul>要素と<ol>要素は、リスト項目を表示するための要素。
<ul>は「unordered list」の略で順序なしリストの意で箇条書きのリストを生成する。
<ol>要素は「order list」の略で順序付きリストの意で昇順に採番されたリストを生成する。
<!--<ul>要素で記述した場合-->
<ul>
<li><a href="https://www.google.co.jp/">Google</a></li>
<li><a href="https://www.yahoo.co.jp/">Yahoo</a></li>
<li><a href="https://www.amazon.co.jp/">Amazon</a></li>
<li><a href="https://www.softbank.jp/">SoftBank</a></li>
<li><a href="https://toyota.jp/">TOYOTA</a></li>
</ul><!--<ol>要素で記述した場合-->
<ol>
<li><a href="https://www.google.co.jp/">Google</a></li>
<li><a href="https://www.yahoo.co.jp/">Yahoo</a></li>
<li><a href="https://www.amazon.co.jp/">Amazon</a></li>
<li><a href="https://www.softbank.jp/">SoftBank</a></li>
<li><a href="https://toyota.jp/">TOYOTA</a></li>
</ol><div>要素<div>要素は「division」の略で「分割」という意味があります。
それ自体に特別な意味はなく、複数の要素を一つの塊として再定義するコンテナ要素として機能する。
複数の要素を一つにまとめることでCSS等で効率的に修飾することができる。
<div>要素のほかに適切な要素がある場合はそちらを使用したほうがセマンティクス的にはアクセシビリティが向上する。
<article>要素ページ本文やブログ投稿記事など、その部分の内容だけを取り出した際に独立したコンテンツとして成立する場合に使用する。
その中にいくつかの<section>要素を入れ子にして配置する。
<article>要素や<section>要素は「セクショニングコンテンツ」と呼ばれ、これらを配置することで文書内に<section>が作られる。
<section>による区切りがあることで文書構造（アウトライン）や階層をより明示的に表すことが出来る。
<aseide>要素<aseide>要素はその部分がページ内において、補足情報であることを示す要素。
asideという名前であるが、サイドバー専用というわけではなく、補足情報を<article>要素内に記載したい場合など、サイドバー以外の用途にも使用可能。
<address>要素<address>要素は直近の<article>要素か<body>要素の連絡先情報を表す。
後者の場合はその連絡先情報はドキュメント全体に適用される。
著作者の連絡先情報を掲載するときに使用し、それ以外の目的で使用してはいけない。
<small>要素HTML4.01以前はテキストを小さくするための要素であった。
HTML5では注釈や細目を表す要素となる。「意味合いを弱める」という役割なので昔の仕様と違うことに注意。
<figure>要素<figure>要素は画像や表などの要素をさらに囲む要素である。
前後の文章と切り離せない画像等を指し、参照や補足的なものを掲載する際に使用する。
<figure>要素で囲んだ部分を他の場所に移動しても本文の文脈に問題がない場合に使用する。
<dl>,<dt>,<dd>要素<dl>,<dt>,<dd>要素を使うと定義リストを作成できる。
定義リストとは、ある語句とそれに対する説明を一対一にしたリストのこと。
よく用語集などに使われる。
<dl>,<dt>,<dd>要素は必ず３つセットで使用する。
<dl>
<dt>りんご</dt>
<dd>赤い果物。</dd>
<dt>レモン</dt>
<dd>黄色い果物。</dd>
</dl><br>要素breakの略で改行を意味する。
<table>要素<tr>要素で横1行を定義し、さらにその中に<th>要素で見出しセルを、<td>要素でデータセルを定義する。
<form>要素<form>要素は属性を使用してデータの送信先や送信方法を指定する。
input要素で設置する部品のうち、ラジオボタンとチェックボックスは複数項目から選択するものなので、
複数の部品をグループにする設定が必要。
性別など、選択肢の中から１つだけ選択する項目の場合はラジオボタンを使用する。
好きな食べ物などいくつ選択しても良いものはチェックボックスを使用する。
どちらもinput要素にname属性で同じ値を指定し、グループであることを示す。
またvalue属性には、その項目が選択されたときにサーバに送信される値を指す。
<textarea>要素複数行を入力できるテキストエリアを設置するときは<textarea>要素を使用する。
<textarea>要素はrows属性とcols属性によって入力フィールドの高さと横幅を指定できる。
HTML4.01まではこの２つの属性は必須であったがHTML5からは必須ではなくなった。
<span>要素<span>要素は何かの理由でテキストの一部を区別したいときに使う要素。
<div>要素同様、それ自身は特に何も意味を持たないため、クラス名などを付けて意味を与える。
属性は要素の役割を細かく指定するために使われ、開始タグの中に書く。
<img src="image/sample.jpg">画像の代替テキスト情報を保持する属性。
画像だけでは意味を理解できない音声読み上げブラウザや検索エンジンに対して、それが何の画像であるかを伝える役割を果たす。
音声読み上げブラウザで読まれる文章はこのalt属性で指定したテキストである。
セマンティクスやアクセシビリティの観点からも必ず記述した方が良い。
email属性メールアドレス専用の値で、「＠」がない「全角になっている」などメールアドレスとして相応しくない値が入力されたときにエラー表示する機能を持つ。
但し、これを指定しておけばユーザーに正確なメールアドレスを入力してもらえるというわけではなく、例えば空文字等は許容してしまう。
実際の挙動はブラウザ毎に異なるため、使用する際には注意が必要。
<form method="" action="https://www.zunouissiki.com/">
メールアドレス：<input type="email" name="email"><br>
<input type="submit" value="送信">
</form>required属性その項目が必須項目であることをブラウザに知らせることができる。未入力のまま送信ボタンを押すとエラーが表示される。
■ソース抜粋
<form method="" action="https://www.zunouissiki.com/">
ユーザーID：<input type="text" name="id" required><br>
パスワード：<input type="password" name="password" required><br>
<input type="submit" value="送信">
</form>開いているhtmlファイルと同階層の別ファイルを指定する場合
<a href="page.jpg">開いているhtmlファイルよりも上位階層の別ファイルを指定する場合
<a href="../page.jpg"><!--1つ上の階層の場合-->
<a href="../../page.jpg"><!--2つ以上上の階層の場合、「../」を続けて記述する。-->開いているhtmlファイルよりも下位階層の別ファイルを指定する場合
<a href="abc/page.jpg"><!--同階層のabcフォルダ内の場合-->
<a href="abc/def/page.jpg"><!--同階層のabcフォルダ内のdefフォルダ内の場合-->サイトルートパス
「/」がルートディレクトリを示すので後は絶対パスと同じように続けて書く。
<a href="/image/sample/page.jpg">WEBサイト内で「今どのページにいるのか」を示すナビゲーション。
パンくずリストという名前は「ヘンゼルとグレーテル」で主人公が森で迷子にならないように通った道にパンくずを置いて行ったエピソードに由来する。
SEOにも効果があるとされている。
コピーライトの先頭に記述されている<©>「©」は特殊文字と呼ばれるものでHTMLで記号などの特殊な文字を使いたいときに使用する。
View Comments
の「前後の文章と切り離せない挿絵や画像ではんかう、」の「んかう」は誤字でしょうか？
ご指摘ありがとうございます。
遅くなりましたが誤字を修正いたしました。