SUGI's Tips

6.192017

HTMLの基本【Web Design】

HTMLって？

HTML（エイチティーエムエル）とは、HyperText Markup Languageの略で、ウェブページを作成するために開発された言語です。 現在のインターネット上で公開されてるウェブページのほとんどが、HTMLで作成されています。
ハイパーテキスト（HyperText）とは、ハイパーリンクを埋め込むことができる高機能なテキストです。 ハイパーリンクというのは、ウェブページでクリックすると別ページへ移動したりするリンクのことです。
ハイパーテキストでは、ウェブページから別のウェブページにリンクをはったり、 ウェブページ内に画像・動画・音声などのデータファイルをリンクで埋め込むことができます。 HTMLには、このハイパーリンク機能で関連する情報同士を結びつけて、情報を整理するという特徴があります。
また、目印をつける（Markup）というのは、文書の各部分が、どのような役割を持っているのかを示すということです。 例えば、見出し・段落・表・リストなど、文書の中で各部分が果たしている役割が分かるように目印をつけます。 こうした見出し・段落・表・リストなどの文書内の各部分を要素（element）と呼びます。
文書内の各部分に目印をつけて、その部分がどんな要素なのかを明確にすることで、コンピュータがその文書の構造を理解できるようになります。

このようにコンピュータに理解できるように文書の構造を定義することこそが、HTMLの最も重要な役割と言えます。 その際、目印をつけるための記号として使用されるのがHTMLタグです。

ドキュメントタイプ宣言　Document type definition

■ <!DOCTYPE html> …… ドキュメントタイプを宣言する

根本となる要素　The root element

■ <html>〜</html> …… HTML文書であることを示す

文書のメタデータ　Document metadata

■ <head>〜</head> …… 文書のヘッダ情報を表す
■ <title>〜</title> …… 文書にタイトルをつける
■ <base> …… 相対パスの基準URIを指定する
■ <link> …… リンクする外部リソースを指定する
■ <meta> …… その文書に関する情報（メタデータ）を指定する
■ <style>〜</style> …… スタイルシートを記述する

スクリプト　Scripting

■ <script>〜</script> …… 文書にJavaScriptなどのスクリプトを組み込む
■ <noscript>〜</noscript> …… スクリプトが動作しない環境用の表示内容を指定する

セクション　Sections

■ <body>〜</body> …… 文書の本体を表す
■ <section>〜</section> …… 一つのセクションであることを示す【HTML5より】
■ <nav>〜</nav> …… ナビゲーションであることを示す【HTML5より】
■ <article>〜</article> …… 記事であることを示す【HTML5より】
■ <aside>〜</aside> …… 余談・補足情報のセクションであることを示す【HTML5より】
■ <h1〜6>〜</h1〜6> …… 見出しを付ける
■ <header>〜</header> ……ヘッダーであることを示す【HTML5より】
■ <footer>〜</footer> …… フッターであることを示す【HTML5より】
■ <address>〜</address> …… 連絡先・問合せ先を表す

コンテンツの分類　Grouping content

■ <p>〜</p> …… ひとつの段落（パラグラフ）であることを表す
■ <hr> …… テーマや話題の区切りを表す
■ <pre>〜</pre> …… 半角スペースや改行をそのまま表示する
■ <blockquote>〜</blockquote> …… 引用・転載セクションであることを表す
■ <ol>〜</ol> …… 順序のあるリストを表示する
■ <ul>〜</ul> …… 順序のないリストを表示する
■ <li>〜</li> …… リストの項目を記述する
■ <dl>〜</dl> …… 定義・説明リストを表す
■ <dt>〜</dt> …… 定義・説明される言葉を表す
■ <dd>〜</dd> …… 定義用語や言葉の説明をする
■ <figure>〜</figure> …… 図表であることを示す【HTML5より】
■ <figcaption>〜</figcaption> …… 図表のキャプションを示す【HTML5より】
■ <div>〜</div> ……ひとかたまりの範囲として定義する
■ <main>〜</main> …… メインコンテンツであることを示す

テキストの意味　Text-level semantics

■ <a>〜</a> …… ハイパーリンクを指定する
■ <em>〜</em> …… 強勢する（アクセントを付ける）箇所を表す
■ <strong>〜</strong> …… 強い重要性を表す
■ <small>〜</small> …… 免責・警告・著作権などの注釈や細目を表す
■ <s>〜</s> …… すでに正確ではなくなった内容を表す
■ <cite>〜</cite> …… 作品のタイトルを表す
■ <q>〜</q> …… 引用句・引用文であることを表す
■ <dfn>〜</dfn> …… 用語が使用されていることを示す
■ <abbr>〜</abbr> …… 略語や頭字語であることを表す
■ <time>〜</time> …… 日付や時刻を正確に示す【HTML5より】
■ <code>〜</code> …… プログラムなどのコードであることを示す
■ <var>〜</var> …… 変数であることを示す
■ <samp>〜</samp> …… プログラムによる出力結果のサンプルであることを示す
■ <kbd>〜</kbd> …… ユーザーが入力する内容であることを示す
■ <sub>〜</sub> …… 下付き文字を表す
■ <sup>〜</sup> …… 上付き文字を表す
■ <i>〜</i> …… 声や心の中で思ったことなど、他と区別したいテキストを表す
■ <b>〜</b> …… 文書内のキーワードや製品名など、他と区別したいテキストを表す
■ <mark>〜</mark> …… 文書内の該当テキストを目立たせる【HTML5より】
■ <ruby>〜</ruby> …… ルビをふる【HTML5より】
■ <rt>〜</rt> …… ルビのテキストを指定する【HTML5より】
■ <rp>〜</rp> …… ルビを囲む記号を指定する【HTML5より】
■ <bdo>〜</bdo> …… 文字表記の方向を指定する
■ <span>〜</span> …… ひとつの範囲として定義する
■ <br> …… 改行する
■ <wbr> …… 改行しても良い位置を示す【HTML5より】

挿入と削除　Edits

■ <ins>〜</ins> …… 追加された部分であることを示す
■ <del>〜</del> …… 削除された部分であることを示す

コンテンツの埋め込み　Embedded content

■ <img> …… 画像を表示する
■ <iframe>〜</iframe> …… インラインフレームを作る
■ <embed> …… プラグインデータを埋め込む【HTML5より】
■ <object>〜</object> …… 文書に外部リソースを埋め込む
■ <param> …… プラグインのパラメータを指定する
■ <video>〜</video> …… 動画を再生する【HTML5より】
■ <audio>〜</audio> …… 音声を再生する【HTML5より】
■ <source> …… 動画や音声などのURLや種類を指定する【HTML5より】
■ <canvas>〜</canvas> …… 図形を描く【HTML5より】
■ <map>〜</map> …… イメージマップを作成する
■ <area>〜</area> …… イメージマップのハイパーリンク領域を設定する

テーブル（表）　Tabular data

■ <table>〜</table> …… テーブル（表）を作成する
■ <caption>〜</caption> …… テーブル（表）にキャプションをつける
■ <colgroup>〜</colgroup> …… 表の縦列をグループ化する
■ <col>〜</col> …… 表の縦列の属性やスタイルを指定する
■ <tbody>〜</tbody> …… テーブル（表）のボディ部分を定義する
■ <thead>〜</thead> …… テーブル（表）のヘッダ部分を定義する
■ <tfoot>〜</tfoot> …… テーブル（表）のフッタ部分を定義する
■ <tr>〜</tr> …… テーブル（表）の横一行を定義する
■ <td>〜</td> …… テーブル（表）のデータセルを作成する
■ <th></th> …… テーブル（表）の見出しセルを作成する

フォーム　Forms

■ <form>〜</form> …… 入力・送信フォームを作る
■ <fieldset>〜</fieldset> …… フォームの入力項目をグループ化する
■ <legend>〜</legend> …… フォームの入力項目グループにキャプションを付ける
■ <label>〜<label> …… フォーム部品と項目名（ラベル）を関連付ける
■ <input> …… フォームを構成する様々な入力部品を作成する
    <input type=”hidden”> …… 画面上は表示されない隠しデータを指定する
    <input type=”text”> …… 一行テキストボックスを作成する
    <input type=”search”> …… 検索テキストの入力欄を作成する【HTML5より】
    <input type=”tel”> …… 電話番号の入力欄を作成する【HTML5より】
    <input type=”url”> …… URLの入力欄を作成する【HTML5より】
    <input type=”email”> …… メールアドレスの入力欄を作成する【HTML5より】
    <input type=”password”> …… パスワード入力欄を作成する
    <input type=”datetime”> …… 協定世界時による日時の入力欄を作成する【HTML5より】
    <input type=”date”> …… 日付の入力欄を作成する【HTML5より】
    <input type=”month”> …… 月の入力欄を作成する【HTML5より】
    <input type=”week”> …… 週の入力欄を作成する【HTML5より】
    <input type=”time”> …… 時間の入力欄を作成する【HTML5より】
    <input type=”datetime-local”> …… ローカル日時の入力欄を作成する【HTML5より】
    <input type=”number”> …… 数値の入力欄を作成する【HTML5より】
    <input type=”range”> …… レンジ入力欄を作成する【HTML5より】
    <input type=”color”> …… 色の入力欄を作成する【HTML5より】
    <input type=”checkbox”> …… チェックボックスを作成する
    <input type=”radio”> …… ラジオボタンを作成する
    <input type=”file”> …… サーバーへファイルを送信する
    <input type=”submit”> …… 送信ボタンを作成する
    <input type=”image”> …… 画像ボタンを作成する
    <input type=”reset”> …… リセットボタンを作成する
    <input type=”button”> …… 汎用ボタンを作成する
    <input autofocus> …… 入力欄にカーソルを当てて自動フォーカスする【HTML5より】
    <input placeholder> …… 入力欄に初期表示する内容を指定する【HTML5より】
    <input required> …… 入力必須であることを示す【HTML5より】
    <input pattern> …… 正規表現で入力値のパターンを指定する【HTML5より】
    <input min max> …… 入力できる最小値と最大値を指定する【HTML5より】
    <input step> …… 入力欄で刻むステップ値を指定する【HTML5より】
    <input autocomplete> …… 入力候補を提示して入力内容を自動補完する【HTML5より】
    <input multiple> …… 複数の値を入力・選択できるようにする【HTML5より】
■ <button>〜</button> …… ボタンを作成する
■ <select>〜</select> …… セレクトボックスを作成する
■ <datalist>〜</datalist> …… 入力候補となるデータリストを定義する【HTML5より】
■ <optgroup>〜</optgroup> …… 選択肢をグループ化する
■ <option>〜</option> …… セレクトボックスや入力候補リストの選択肢を指定する
■ <textarea>〜</textarea> …… 複数行のテキスト入力欄を作成する
■ <keygen> …… フォーム送信時にキーを発行する【HTML5より】
■ <output></output> …… 計算結果を示す【HTML5より】
■ <progress>〜</progress> …… タスク完了までの進行状況を示す【HTML5より】
■ <meter>〜</meter> …… 規定範囲内の測定値を表す【HTML5より】

ユーザーによる操作　Interactive elements

■ <details>〜</details> …… 備考や操作手段などの詳細情報を示す【HTML5より】
■ <summary>〜</summary> …… <details>の内容の要約を示す【HTML5より】
■ <command> …… 操作メニューの各コマンドを指定する【HTML5より】
■ <menu>〜</menu> …… 操作メニューを作成する【HTML5より】

※ブラウザによっては未対応のものもございます。

  • このエントリーをはてなブックマークに追加

関連記事

BLOGカテゴリー

最近のBLOG

BLOGアーカイブ

ページ上部へ戻る