頭脳一式

人の記憶なんて曖昧なもの。すべての情報を頭に記憶するなんてナンセンス。困ったらここに来ればいいじゃん?

【HTML5】基礎知識(タグ編)

DOCTYPE宣言(ドキュメントタイプの宣言)

HTML文書がHTML5で記述されていることを明示的にブラウザに伝える役割を果たす。
DOCTYPE宣言をした場合、レンダリングモードが標準モード(Standards mode)での解釈となり、
DOCTYPE宣言をしない場合、レンダリングモードが互換モード(Quirks mode)での解釈となる。

<!DOCTYPE html>
<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>
タグ

タグは目印を意味する言葉で、HTMLはタグで目印をつけ各要素の役割を示す。

<h1>見出し</h1>
属性

属性は要素の役割を細かく指定するために使われ、開始タグの中に書く。

<img src="image/sample.jpg">

ディレクトリとパスの記載方法について

開いているhtmlファイルと同階層の別ファイルを指定する場合

<a href="page.jpg">

開いているhtmlファイルよりも上位階層の別ファイルを指定する場合

<a href="../page.jpg"><!--1つ上の階層の場合-->--一つ上の階層の場合、
<a href="../../page.jpg"><!--2つ以上上の階層の場合、「../」を続けて記述する。-->

開いているhtmlファイルよりも下位階層の別ファイルを指定する場合

<a href="abc/page.jpg">
<a href="abc/def/page.jpg">

サイトルートパス 「/」がルートディレクトリを示すので後は絶対パスと同じように続けて書く。

<a href="/image/sample/page.jpg">
<ul>要素と<ol>要素

<ul>要素と<ol>要素は、リスト項目を表示するための要素。
<ol>要素は「order list」の略で順序付きリスト、<ul>は「unordered list」の略で順序なしリストの意。
前者はリストの昇順に採番されたリストになり、後者は箇条書きのリストになる。
一連の用語と説明の組み合わせを表す<dl>要素とは目的に応じて使い分ける必要がある。
また、パンくずリストや画像ギャラリーなど、文中のリスト以外にも何かを同列に並べたいときにも使用される。

<!--<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>
  1. Google
  2. Yahoo
  3. Amazon
  4. SoftBank
  5. TOYOTA
<div>要素

<div>要素はそれ自体に特別な意味はなく、複数の要素を一つの塊として再定義するコンテナ要素として機能する。
複数の要素を一つにまとめることでCSS等で効率的に修飾することができる。 <div>要素のほかに適切な要素がある場合はそちらを使用したほうがセマンティクス的にはアクセシビリティが向上する。

#ID名#class名の違い

#IDは一つのHTML文書内で一度しか出現できないが#class名は何度でも使えるといった違いがある。
例えば<ul id="gallery">という#ID名を付けた<ul>要素は同じページに1つしか設定してはいけない。
また、それぞれの要素は#IDを1つしか持つことが出来ない。
つまり、galleryという#ID名を持った<ul>要素は他の#ID名を持つことが出来ない。
一方、#class名は何度でも使うことが出来ため、<ul class="gallery">という名前を付けた場合、ページ内にいくつでも設置することができる。
同じページ内に複数のglleryを持つ場合はclass属性を使用したほうが良い。 また、1つの要素に複数のクラス名を付けることを可能。 <ul class="gallery flower">のようにクラス名の間を半角スペースで区切ることで名前を付けることができる。
これをマルチクラスという。

画像のalt属性

画像の代替テキスト情報を保持する属性。
画像だけでは意味を理解できない音声読み上げブラウザや検索エンジンに対して、それが何の画像であるかを伝える大切な役割を果たす。 音声読み上げブラウザで読まれる文章はこのalt属性で指定したテキストである。 セマンティクスやアクセシビリティの観点からも必ず記述した方が良い。

<article>要素

ページ本文やブログ投稿記事など、その部分の内容だけを取り出した際に独立したコンテンツとして成立する場合に使用する。 その中にいくつかの<section>要素を入れ子にして配置する。 <article>要素や<section>要素は「セクショニングコンテンツ」と呼ばれ、これらを配置することで文書内に<section>が作られる。 <section>による区切りがあることで文書構造(アウトライン)や階層をより明示的に表すことが出来る。

パンくずリスト

WEBサイト内で「今どのページにいるのか」を示すナビゲーションである。 パンくずリストという名前は「ヘンゼルとグレーテル」で主人公が森で迷子にならないように通った道にパンくずを置いて行ったエピソードに由来する。 SEOにも効果があるとされている。

<aseide>要素

<aseide>要素はその部分がページ内において、補足情報であることを示す要素。
asideという名前であるが、サイドバー専用というわけではなく、補足情報を<article>要素内に記載したい場合など、サイドバー以外に設置することも可能。

リンク先を別タブで開く方法
<a href="#" target="_blank">
<address>要素

<address>要素は直近の<article>要素か<body>要素の連絡先情報を表す。 後者の場合はその連絡先情報はドキュメント全体に適用される。 著作者の連絡先情報を掲載するときに使用し、それ以外の目的で使用してはいけない。

<small>要素

HTML4.01以前はテキストを小さくするための要素だったが、HTML5では注釈や細目を表す要素となる。「意味合いを弱める」という役割なので昔の仕様と違うことに注意。

特殊記号

コピーライトの先頭に記述されている<&copy;>「©」は特殊文字と呼ばれるものでHTMLで記号などの特殊な文字を使いたいときに使用する。

<figure>要素

<figure>要素は画像や表などの要素をさらに囲む要素である。 前後の文章と切り離せない挿絵や画像ではんかう、参照や補足的なものを掲載する際に使用する。 <figure>要素で囲んだ部分を他の場所に移動しても本文の文脈に問題がない場合に使用する。

<dl>,<dt>,<dd>要素

<dl>,<dt>,<dd>要素を使うと定義リストを作成できる。 定義リストとは、ある語句とそれに対する説明を一対一にしたリストのこと。 よく用語集などに使われる。 <dl>,<dt>,<dd>要素は必ず3つセットで使用する。

<dl>
    <dt>りんご</dt>
    <dd>赤い果物。</dd>
    <dt>レモン</dt>
    <dd>黄色い果物。</dd>
</dl>
<br>要素

breakの略で改行を意味する。

<table>要素

<tr>要素で横1行を定義し、さらにその中に<th>要素で見出しセルを、<td>要素でデータセルを定義する。

<form>要素

<form>要素は属性を使用してデータの送信先や送信方法を指定する。

ラジオボタンチェックボックス

input要素で設置する部品のうち、ラジオボタンチェックボックスは複数項目から選択するものなので、
複数の部品をグループにする設定が必要。
性別など、選択肢の中から1つだけ選択する項目の場合はラジオボタンを使い、好きな食べ物など
いくつ選択してもよいものはチェックボックスを使用する。
どちらもinput要素にname属性で同じ値を指定し、グループであることを示します。
またvalue属性には、その項目が選択されたときにサーバに送信される値を指す。

<textarea>要素

複数行を入力できるテキストエリアを設置するときは<textarea>要素を使用する。
<textarea>要素はrows属性とcols属性によって入力フィールドの高さと横幅を指定できる。
HTML4.01まではこの2つの属性は必須であったがHTML5からは必須ではなくなった。

<span>要素

<span>要素は何かの理由でテキストの一部を区別したいときに使う要素。
<div>要素同様、それ自身は特に何も意味を持たないため、クラス名などを付けて意味を与える。

email属性

メールアドレス専用の値で、「@」がない「全角になっている」などメールアドレスに相応しくない値が入力されたときにエラー表示する機能を持つ。

required属性

その項目が必須項目であることをブラウザに知らせることができる。未入力のまま送信ボタンを押すとエラーが表示される。