HTML5 html要素

よーた


HTML5の要素について

HTML5では「ドキュメントを適切な要素でマークアップする」されていることが重要になる
HTML要素でスタイルを変更するのはCSSが無かった時代の名残だが、
良いやり方じゃない

・見出しを書くなら、見出し要素を使う
・日付は日付を表す要素を使う
・箇条書きなら箇条書きの要素を使う

HTML5の要素の7種類のカテゴリ

HTML5の要素は7種類のカテゴリ(コンテンツモデル)に分類される。
コンテンツモデルとは、各要素が内包できるコンテンツを定義したもの

1) メタデータコンテンツ

属する要素:
base
command
link
meta
noscript
script
style
title

2) フローコンテンツ

body要素内に記述するほとんどの要素が属する

フローコンテンツはドキュメントのアウトラインに影響を与えない

属する要素:
body要素内に記述するほとんどの要素

3) 区分コンテンツ(セクショニングコンテンツ)

属する要素:
article
aside
nav
section

4) 見出しコンテンツ(ヘディングコンテンツ)

属する要素:
h1~h6
hgroup

5) インタラクティブコンテンツ

ユーザとの対話に使う

属する要素:
input
textarea
select
a
button
label
details
audio
video
canvas
menu
iframe



6) 記述コンテンツ(フレージングコンテンツ)

文章をマークアップするのに使う要素

属する要素:
abbr
audio
b
br
....

7) 埋め込みコンテンツ

属する要素:
video
audio
img
iframe
embed
math
object
svg




リンクタイプ

現在のドキュメントとリンク先の外部ファイルの関連。

・リンクタイプ stylesheetは外部スタイルシートを示す

・リンクタイプalternateはhreflang属性と組み合わせることで、別言語のページを示す

・大文字と小文字のどちらでも指定できる

・link要素、a要素、area要素のrel属性に「半角スペース区切り」で「複数のリンクタイプ」を指定できる

例) stylesheetとiconの2つのリンクタイプを指定する

<link rel="stylesheet icon" href="styles.css" type="text/css" />


グローバル属性

全てのHTML要素に指定できる属性のこと。

relやtypeはグローバル属性じゃない。


グローバル属性一覧:
id
class
dir
hidden
lang
style
title
translate
accesskey
contenteditable
contextmenu
draggable
dropzone
spellcheck
tabindex


例) id、class、lang、style、title、tabindex、accesskey、contenteditable、spellcheck、draggable、dropzone

<div id="main-container" class="highlight" lang="en" style="font-size: 16px;" title="Main Container">
    <h1 id="main-heading" tabindex="0" accesskey="M">Global Attributes Example</h1>
    <p id="paragraph" contenteditable="true" spellcheck="true">
      This is an example paragraph with global attributes. It is editable and spell-checked.
    </p>
    <button onclick="showAlert()" draggable="true" dropzone="move">Click Me</button>
  </div>


id属性 / class属性

id属性:
・要素に固有の識別子を一意に指定するグローバル属性
・id属性の値に空白文字を含んではいけない

class属性:
・要素の種類・分類を指定するグローバル属性
・複数の要素に同じclass名を指定できる

要素名の組み合わせ

hr要素
　　段落レベルのテーマの変わり目を表す

　　hr要素は水平の区切り線

p要素
　　ドキュメント内の段落を表す
　　ただし、より限定的な使い方をする要素があればそちらを使う

blockquote要素
　　他の情報源から引用されたコンテンツを表す

pre要素
　　整形済のテキストを表す



main要素について

1) 理に適えばドキュメント内に複数のmain要素があっても良い
      HTML5.2からOKになった

2) フローコンテンツであり、ドキュメントのアウトラインに影響を与えない
3) main要素はドキュメントのメインコンテンツであることを示す
なので、著作権情報やバナー、ロゴなどは含まない
　　(main要素はページ固有のコンテンツを含む)

・main要素を含んではいけない要素
　article, aside, footer, header, nav
　　　(これらはmain要素を子要素に出来ない。
　　　　mainの中にこれらの要素を入れることが正しい)
　　　

正しいmainの構造の例)
articleとasideがmain要素の直下に配置されている

<body>
  <header>
    <!-- ヘッダーコンテンツ -->
  </header>

  <nav>
    <!-- ナビゲーションコンテンツ -->
  </nav>

  <main>
    <!-- メインコンテンツ -->
    <article>
      <!-- 記事コンテンツ -->
    </article>

    <aside>
      <!-- サイドバーコンテンツ -->
    </aside>
  </main>

  <footer>
    <!-- フッターコンテンツ -->
  </footer>
</body>



フローコンテンツ

HTML文書内でレイアウトの一部として表示される要素

通常は文書の主要なコンテンツを形成する。
フローコンテンツにはテキスト、リンク、画像、表、フォームなどが含まれる。

フローコンテンツの例) h1、p、ul、ol、a、img、table、form

<h1>Heading 1 - Flow Content Example</h1>
  <p>This is a paragraph of text, which is a flow content element.</p>
  
  <ul>
    <li>List item 1 - Unordered List</li>
    <li>List item 2 - Unordered List</li>
  </ul>
  
  <ol>
    <li>List item 1 - Ordered List</li>
    <li>List item 2 - Ordered List</li>
  </ol>
  
  <a href="https://www.example.com">Link to Example</a>
  
  <img src="example.jpg" alt="Example Image">
  
  <table>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
      </tr>
      <tr>
        <td>Row 2, Cell 1</td>
        <td>Row 2, Cell 2</td>
      </tr>
    </tbody>
  </table>
  
  <form>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username">
    
    <label for="password">Password:</label>
    <input type="password" id="password" name="password">
    
    <input type="submit" value="Submit">
  </form>

Section要素 セクションについて

セクションはドキュメントの章や節を表す。

以下で構成される。
・見出し　
・コンテンツ

セクションについて

・セクションはbody, section, article, aside, navタグで明示的に定義できる
・セクションは各々がそれ独自の見出し階層を持つことが出来る
・セクションを入れ子にした場合、内側のセクションはh1要素を持つことが出来る
　　セクション内の最初の見出しがそのセクションの見出しとなる
・header要素をドキュメントの冒頭、footer要素をドキュメントの最後に配置する必要はない
　　自由に配置できる
・section要素は意味を持つコンテンツのまとまりを表す
・aside要素は広告やサイドバーなど、メインコンテンツと関連性の低いコンテンツのセクションを表す。




暗黙的にセクションを定義できる要素

下記は意味的にまとまったコンテンツをセクションとして定義できる要素

h1~h6
body
section
article
aside
nav


セクションの要素について

・article要素
新聞の記事、ブログの投稿などドキュメント内で自己完結している
article要素を入れ子にした場合、内側と外側の要素は関連した記事を表す


・<header>および<footer>について
これらはそれぞれ、ドキュメントの冒頭、最後に配置しなくてもいい
必ず配置しないといけないルールはない

・section
節や章のような、コンテンツのまとまりを意味する

・aside
メインコンテンツと関連性が薄いコンテンツを配置する

・h1~h6
該当セクションの見出し
小見出しや副題のような「セクションの生成をしないものには使わない」

body要素のアウトラインについて


<h1>猫と歩む歴史の旅</h1>

<section>
 <h2>ペットとして</h2>
   <blockquote>
     <h1>バステト</h1>
   </blockquote>
 
 <h2>食性について</h2>
</section>

タグは以下のようになっている。

<h1>: 猫と歩む歴史の旅

  • <section>: ペットとして

    • <h2>: ペットとして

    • <blockquote>: バステト

      • <h1>: バステト

  • <h2>: 食性について


アウトライン:

  1. 猫と歩む歴史の旅

    1. ペットとして

      • バステト

    2. 食性について


blockquote, body, details, fieldset, figure, tdなどのセクショニングルートはそれ独自のアウトラインを持つ。
-> 内部のセクションは親要素のアウトラインに影響を与えない。




div要素について

div, nav, spanはドキュメントをグループ化するための要素で特定の目的を持たない

div要素は他に適切な要素がない時の最終手段にすること。
-> 章立てならsection、
    サイドバーや広告には、nav, aside,
   を使うこと。


用途:
・id名、クラス名を設定し、スタイルを書くことで特定の部分であることを示す
・lang属性を設定し、ドキュメント内で言語が異なる部分を表す

span要素について

span要素はdiv同様に特に目的がない要素
強調や他のテキストと区別するときは別の要素を使うこと


使い方の例)
・class, id, lang属性を指定して、スタイルやスクリプトの適用範囲を指定する。

・lang属性と組み合わせ、他の言語で書かれた範囲であることを示す

テーブル要素

table要素内で要素を配置する順番
1) caption要素　
　表のタイトル
2) colgroup要素　
　列のグループ化(spanやcolでスタイルを適用する)
3) thead要素
　ヘッダー
4) tbody要素　　　
　表の中身
5) tfoot要素　　　
　フッター

使い方

・レイアウト目的にtableを使うべきでない
　歴史的にwebページはレイアウトにtableが使われてきた
　しかし、現在はレイアウト目的にtableを使うべきでないとされている
　(ソースコードが複雑になる、音声読み上げが上手くいかない、
　　などが理由)


・テーブルがレイアウト目的でないなら、
-> border属性に、空文字か「1」と指定

・テーブルがレイアウト目的なら、
-> role="presentation"と指定
　

・テーブル要素内には、scriptやtemplate要素を配置できる


基本構文:
table
      tr
          th
          th
       tr
           td
           td


テーブルの例)

<table>
  <caption>Example Table</caption>

  <colgroup>
    <col span="2" style="background-color: lightblue;">
    <col style="background-color: lightgreen;">
  </colgroup>

  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Data 1-1</td>
      <td>Data 1-2</td>
      <td>Data 1-3</td>
    </tr>
    <tr>
      <td>Data 2-1</td>
      <td>Data 2-2</td>
      <td>Data 2-3</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td>Footer 1</td>
      <td>Footer 2</td>
      <td>Footer 3</td>
    </tr>
  </tfoot>

</table>

colgroupによる、列のグループ分けの例

span属性で列数を指定する
<colgroup span="1"></colgroup>
<colgroup span="2"></colgroup>
<colgroup span="3"></colgroup>




colgroup要素内にcol要素を配置
<colgroup>
<col span="1">
<col span="2">
<col span="3">
</colgroup>



トランスペアレント / セクショニングルート

トランスペアレント（Transparent）:
親要素のコンテンツモデルを子・孫要素が受け継ぐこと。
トランスペアレントな要素の例:
　　a, audio, canvas, del, ins, map, noscript, video, objectなど



セクショニング・ルート（Sectioning Root）:
新しいセクションの境界を形成する要素
セクショニング・ルートの例:
<blockquote>、<body>、<details>、<fieldset>、<figure>、<td>など


トランスペアレントを使用した例

  <style>
    .link-container {
      background-color: #eee ;
      padding: 10px;
    }

    /* スタイリングが親要素にも適用される */
    .link-container a {
      color: blue;
      text-decoration: underline;
    }
  </style>


<body>
  <div class="link-container">
    <p>This is a <a href="https://www.example.com">link</a> inside a transparent container.</p>
  </div>
</body>


セクショニングルートを使用した例

<h1>aaaaa</h1>
<section>
    <h2>bbbb</h2>
    <blockquote>
        <h1>cccc</h1>
    </blockquote>
    <h2>dddddddd</h2>
</section>



  <style>
    /* セクショニング・ルートごとに異なるスタイリング */
    section {
      border: 1px solid #ccc ;
      margin: 10px;
      padding: 10px;
    }
  </style>



  <section>
    <h2>Section 1</h2>
    <p>This is content inside the first section.</p>
  </section>

  <section>
    <h2>Section 2</h2>
    <p>This is content inside the second section.</p>
  </section>


振り仮名


使用する要素:
ruby
rb
rt

<ruby>
     <rb>漢字</rb>
　 <rt>かんじ</rt>
</ruby>


<ruby>
  <rb>漢字</rb>
  <rt>かんじ</rt>
 
 <rb>漢字</rb>
  <rp>(</rp>かんじ<rp>)</rp> 
</ruby>


こんな書き方もできる
・rbを省略してrtを定義
・rtの前後をrp(代替テキストを指定)で囲む
・rtcで別の振り仮名を記載

<ruby>
  大熊猫
  <rt>ジャイアントパンダ</rt>
</ruby>

<ruby>
  大熊猫
  <rp>(</rp>
  <rt>ジャイアントパンダ</rt>
  <rp></rp>
</ruby>

<ruby>
  大熊猫
  <rt>ジャイアントパンダ</rt>
  <rtc>idiom</rtc>
</ruby>


以下はrbを省略している個所があるものの、
「対象の文字列」と「振り仮名」の数が合っているため正常になる

<ruby>
  合言葉
  <rt>あいことば
</ruby>

<ruby>
  合
   <rb>言</rb>
  <rb>葉</rb>
  <rt>あい</rt>
  <rt>こと</rt>
  <rt>ば</rt>
</ruby>

<ruby>
  合
  <rb>言
  <rb>葉
  <rt>あい
  <rt>こと
  <rt>ば
</ruby>

間違っている例

・rpで振り仮名の文字を記載する
-> 何も表示されない
<rp>ジャイアントパンダ</rp>

・rtで代替テキストの記載
-> 何も表示されない
<ruby>
    合<rt>あい言<rt>こと葉<rt>ば
</ruby>

・1つの文字列に対して複数のrtを指定しるため誤り
振り仮名が間違って表示される

<ruby>
合言葉
<rt>あい
<rt>こと
<rt>ば
</ruby>

<ruby>
合
<rt>あい言
<rt>こと葉
<rt>ば
</ruby>

del / ins (中央取り消し線と下線)

del
　文の中央に取り消し線を引く

ins　
　下線を引く



メモ: ただし、線を引くだけならCSSのtext-decorationを使うこと
　　　insはドキュメントに後から挿入された、
　　　delはドキュメントから削除されたテキスト
ということを示す。
結果として下線と取り消し線が引かれているだけ


<p>
  <ins>aaaaaaaa</ins>
  <del>aaaaaaaaaaa</del>
</p>



a要素

webページや指定した要素に移動するためのハイパーリンクを作成する

・target属性には、リンク先のwebページを表示する場所を指定する
・img要素で表示した画像に複数のハイパーリンク(イメージマップと呼ぶ)を指定できる


例

<h1 id="top">沿革</h1>

<a href="#top">沿革に戻る</a>


target属性を使用した例
リンク先のwebページを表示する場所を指定する

<p><a href="https://www.example.com" target="_blank">Visit Example Website in a new tab</a></p>
    
<p><a href="https://www.example2.com" target="_self">Visit Another Example Website in the same tab</a></p>



img要素に複数のハイパーリンクをつけた例

img要素内に包まれた画像に対して、親のa要素とテキストリンクを追加する

画像をクリックすると最初のリンクが開き、テキストリンクをクリックすると別のリンクが開く

<a href="https://www.example.com">
      <img src="example-image.jpg" alt="Example Image">
    </a>
    <p>Click the image or <a href="https://www.example2.com">visit another example website</a>.</p>



img要素


webページに画像を埋め込む適切な記述



img要素の属性は、
・src属性は必須。
　省略不可能
・alt属性は省略可能
　しかし、音声読み上げブラウザで閲覧するときのために付けたほうがいい。

<img src="test.jpg" alt="サンプル画像">


picture要素

その要素内のimg要素に対して複数のリソースを指定する

注意: img要素をsource要素の前に配置すると、画像の切り替えが行われない


基本構文: picture要素内にimgを入れる
<picture>
     <img src=" xxx" alt="xxx">
     <img src=" xxx" alt="xxx">
</picture>


・ブラウザがpicture要素に対応している
　-> media属性の条件に応じて表示される画像が切り替わる 　
　　　source要素で指定した画像が表示される

・ブラウザがpicture要素に対応してない
　-> img要素のみが表示される 　




<picture>
  <source srcset="sample1.png" media="(min-width: 600px)">
  <source srcset="sample2.png" media="(min-width: 300px)">

  <img src="sample3.jpg" alt="picture要素未対応のブラウザで表示する説明">
</picture>



figure / figcaption要素

figure要素:
　自己完結型の図表
　figure要素内のアウトラインは、祖先のアウトラインに影響を与えない

figcaption要素:
　図表のキャプション


書き方:
・figcaptionをfigure内に記述することで
　　キャプションを持たせることが可能
・figcaptionは必須じゃない
・figcaptionは「figure要素内」ならでこでも配置できる

<figure>
  <img src="test.jpg" alt="写真の説明文">
  <figcaption>画像のキャプション</figcaption>
</figure>



video要素

video要素の特徴:
・HTML5で追加された要素
・width, height属性を指定できる
・controls, autoplay, loop属性を指定できる

・track要素をを書けば字幕や説明、キャプションなどが付けられる
・source要素を書けば、複数の動画ファイルを指定できる
　-> 複数のファイルを指定すると、ブラウザの対応状況を判断し、
　　　最も適切な動画を「1つ」再生する

・対応する形式のファイルがない場合、「poster属性」に指定した画像ファイルが表示される

・ブラウザがvideo要素に対応してない場合、「要素内の文字列が表示」される




ファイル形式とMIMEタイプ
.mp4        video/mp4
.ogv         video/ogg
.webm     video/webm
.mov         video/quicktime

<video width="300" height="300" poster="images/fail.png" controls autoplay>
  <source src="example.mp4" type="video/mp4">
  <source src="example.webm" type="video/webm">
    お使いのブラウザに対応していません
</video>



audio要素


audio要素の特徴:
・HTML5で追加された要素
・video要素同様に、controls, autoplay, loop属性を指定できる
・muted属性を指定できる

・video要素同様にsource要素で再生候補を複数指定できる 　
　　後はブラウザの状況に最も適しているファイルが再生される

・ブラウザがaudio要素に対応してない場合、「要素内の文字列が表示」される

video要素とaudio要素の共通点

・autoplay, loop, controls属性を指定できる
・source要素で再生候補を複数指定できる
　後はブラウザの状況に最も適しているファイルが「1つ」再生される
　(複数再生されることはない)
・ブラウザが要素に対応してない場合、「要素内の文字列が表示」される

form要素

主な属性:
action
　送信先のURL
method
　GETまたはPOSTを指定する
　それ以外のメソッドは指定できない
enctype
　送信データの形式をMIMEタイプで設定
novalidate
　バリデーション機能を無効化する


例)
enctype: フォームデータのエンコードタイプを指定する
(multipart/form-dataを使用、主にファイルアップロードに使用される)

<form action="submit.php" method="post" enctype="multipart/form-data" novalidate>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required><br><br>
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required><br><br>
    
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" required><br><br>
    
    <label for="avatar">Choose avatar:</label>
    <input type="file" id="avatar" name="avatar" accept="image/*"><br><br>
    
    <button type="submit">Register</button>
  </form>


label要素は入力部品(inputなど)に対してキャプションを付ける



input要素

input要素の主な属性

type
max
min
maxlength
value
checked
disabled
readonly
required
autofocus
placeholder
pattern
form
name

HTML5で新たに追加されたtype属性

HTML5のtypeのinputは、HTML5に対応していないブラウザでは、テキストボックスとして表示される

number
email
tel
url


<!-- type: テキスト入力 -->
<input type="text">

<!-- max: 最大値 -->
<input type="number" max="100">

<!-- min: 最小値 -->
<input type="number" min="0">

<!-- maxlength: 入力可能な最大文字数 -->
<input type="text" maxlength="50">

<!-- value: デフォルト値 -->
<input type="text" value="Default Value">

<!-- checked: チェックされた状態 -->
<input type="checkbox" checked>

<!-- disabled: 無効化 -->
<input type="text" disabled>

<!-- readonly: 読み取り専用 -->
<input type="text" readonly>

<!-- required: 入力必須 -->
<input type="text" required>

<!-- autofocus: 自動フォーカス -->
<input type="text" autofocus>

<!-- placeholder: プレースホルダー -->
<input type="text" placeholder="Enter your name">

<!-- pattern: 入力パターン -->
<input type="text" pattern="[A-Za-z]{3}" title="3 characters required">

<!-- form: 所属するフォーム -->
<form id="myForm">
  <input type="text" form="myForm">
</form>

<!-- name: フォームの名前 -->
<input type="text" name="username">


number:

<input type="number" name="quantity" min="1" max="10" value="5" required>

email:

<input type="email" name="email" required>

tel:

<input type="tel" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="123-456-7890" required>

url:

<input type="url" name="website" pattern="https?://.+" placeholder="https://www.example.com" required>

select要素

これは同時に表示される選択項目が3つということ

<select size="3">

textarea要素

これは1行当たり、半角で50文字入力可能

<textarea cols="50">


fieldset要素 / legend要素

フォームの入力部品をグループ化してキャプションを設定する

これを使えば枠線で囲まれる

<fieldset>
    <legend>Contact Information</legend>

    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>

    <label for="message">Message:</label>
    <textarea id="message" name="message" rows="4" required></textarea>
</fieldset>



iframe要素

HTML5では、以下の要素は廃止されているがiframe要素は残っている
　frame
　frameset
　noframes
　center


iframe要素の特徴:
・別のwebページの内容を挿入して表示できる
・body要素内で使用できる
・sandbox属性は、ファイルの挿入に対して「制限を解除する」項目を指定する

リストの書き方

ulとolの入れ子構造

<ul>
    <li>webページの構成要素
        <ol>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
            <li>その他</li>
        </ol>
    <li>
</ul>

説明リスト dl dt dd
dl Definition List
dt Definition Term
dd Definition Description

<dl>
    <dt>HTML</dt>
    <dd>Webページの文書構造</dd>

    <dt>CSS</dt>
    <dd>Webページのデザイン</dd>
</dl>



適切なマークアップの例

strong要素: 重要なテキスト

del要素: 取り消された用語

small要素: ライセンス要件

s要素: 取り消された内容

i要素: 技術用語
　　i要素は、他の箇所とは質の異なるテキストを表す
　　技術用語や別の言語のフレーズに使う

strong要素 と em要素 と b要素 の違い

他に適切な要素があればそちらを使うこと。-> 他のように当てはまらない「最終手段として」b要素を使うこと

文字を太字にしたいなら、font-weightを使うこと

strong要素　
　重要性を表す
　文字列が「重要」「申告」「緊急」であることを示す

em要素
　文字列の「強調」に使う

b要素
　「特に重要性」がない。　
　注意だけを引きたいテキストに使う





<em>文字列</em>


<strong>文字列</strong>


s要素　

正しくない情報や、関連性のない情報を示す
情報の訂正のために削除されたことを示すにはdel要素を使う

<s>今なら1000円です</s>


small要素

以下のような小さい文字で表記されることを表す
・Copyright
・免責事項
・警告
・法的規則
・帰属
・ライセンス要件



引用 blockquote / q / cite

blokquote要素
　改行が必要な長い文を引用

q要素
　短い文を引用

cite要素
　出典

<blockquote>
    <q>引用</q>
    <cite>引用元</cite>
</blockquote>



<blockquote>
    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
    aaaaaaaaaaaaaaaaaaaaa<br>
    aaaaaaaaaaaaaaaaaaaaaaaa
</blockquote>



文のハイライトについて mark / span / u

mark要素


配置した文の個所にマーカーを引く
目立たせたいテキストに使用する

使用例)
検索キーワードのハイライト
文章内の重要な個所を目立たせる



メモ: ソースコードなどの構文のハイライトは、span要素の方が適切
spanはスタイルやスクリプトの適用対象を指定するために使う





span要素

スタイルやスクリプトの適用対象の文を指定する

使用例) ソースコードのハイライト


u要素

下線を引く

ドキュメント内の伝わりにくいテキスト、本来とは異なる表記に使う
なので、ミスのマークアップや外国語の単語に対して使う

使用例)
スペルミスのマークアップ
外国語の固有名詞(多くの人がなじみのない単語)

data要素

機械が識別可能なデータを加える

特徴:
・value属性が必須
・終了タグは省略できない

<data value="122">あいうえお</data>


time要素

日時を表す

time要素内かdatatime属性に日時を指定する

・年月日は「ハイフン」で区切るのが一般的
　　(ISO 8601形式では、
　　　日付と時刻の間にハイフンを使用することが標準的であるため)
・年月日と時刻は「T」か「半角スペース」で区切る
・それと、<time>正月</time> とだけ書くのもダメ
・年月日の表記
　OK 　2023-01-01
　NG 　2023/01/01

例)

<time>2023-01-01</time>
<time datetime="2023-01-01">正月</time>



abbr / dfn　略語

<abbr>要素と<dfn>要素は、HTMLで用語の略語と定義をマークアップするために使用される

abbr要素
　略語や頭字語を定義します。
　title属性に正式名称を書く

　マウスを要素の上に移動するとtitle属性の内容を表示する。
　正式名称が表示される。
<abbr title="略語の正式名称">略語</abbr>
　

dfn要素
　用語の定義を示す。
  その内容が定義の対象となることを示す

dfn要素で定義の対象となる用語は、
・dfn要素がtitle属性を持つ場合、その値が定義の対象となる
   <dfn title="定義の対象"></dfn>
・dfn要素が子要素にtitle属性を持つabbr要素を含む場合、
　その属性の値が定義の対象となる





下記はabbrの正式名称である「HyperText Markup Language」が
定義対象となる

<dfn>
　　　<abbr title="HyperText Markup Language">HTML</abbr>
</dfn>
・上記以外は、dfn要素の内容が定義の対象となる

例)

<abbr title="HyperText Markup Language">HTML</abbr>


<dfn title="HyperText Markup Language">HTML</dfn>


<dfn>
	<abbr title="HyperText Markup Language">HTML</abbr>
</dfn>


<dfn>HTML</dfn>



code要素

プログラミング言語のスニペット(断片)を示す

samp要素

他のプログラムやコンピューティングシステムからの出力を表す

kbd要素

ユーザの入力を表す

以下の入力を扱える
・キーボード入力
・音声入力
・メニュー選択

kbd要素を入れ子にして実際のキー入力を表す
<p><kbd><kbd>F12</kbd></kbd>キーで指導する</p>

例)

<kbd>入力方法</kbd>



kbd要素を入れ子にして実際のキー入力を表す
<p><kbd><kbd>F12</kbd></kbd>キーで指導する</p>



sampを入れ子にすることでシステムの出力に基づいた入力を意味する
<kbd><samp>契約詳細</samp></kbd>



br要素 / wbr要素

br要素

改行を表す。

改行がコンテンツの一部となっているテキスト(詩など)で使う

意味的に段落として分割するならp要素を使う
また、行間の調整としてbr要素を使うのはよくない

wbr要素

改行しても良い箇所を示す

英単語で使う(日本語、中国語、韓国語は英語の改行ルールと違うのでwbr要素で改行されない)

br要素との違い:
・brは改行を表す
　改行がコンテンツの一部なら使用することが可能
　他の要素でもそうだけどデザインの調整はCSSで行うこと


注意点:
・wbr要素は指定した個所で必ず改行されるわけじゃない
　テキストの長さや表示領域の幅によって、改行されないことがある。

script要素 / noscript要素

script要素:

・ドキュメント内にスクリプトを埋め込む
　   head要素、body要素どちらでも配置できる

・JavaScriptを使用する場合はtype属性は省略可能

・スクリプト実行タイミングも制御できる
　      async属性、defer属性を指定する

noscript要素:

・スクリプトが無効の環境で実行する内容を指定

・HTMLのみで有効
    XHTMLでは使えない

details要素 / summary要素

HTML5で追加された要素。

・ディスクロージャーウィジェットを作成する。
ユーザの操作によってウィジェットを開いたり閉じたりする。

・detailsがディスクロージャーウィジェットを表す

・summaryは開示ウィジェットの見出しを表す

・summary(見出し)はウィジェットを閉じていても表示される

・open属性をdetailsに指定すると開いたままになる
　デフォルトでは閉じている

<details>
   <summary>Click to show/hide details</summary>
   <p>This is some detailed content that can be toggled.</p>
</details>

canvas要素

WebGL API, Canvas APIでアニメーションやグラフィックスを表示する。

・Canvas要素だけでは何も表示されない。
・<script>で設定する必要がある。
・width, heightを指定できる
・src属性はない

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #000  ;"></canvas>

<script>
    // Get the canvas element
    var canvas = document.getElementById("myCanvas");

    // Get the drawing context
    var ctx = canvas.getContext("2d");

    // Draw a red rectangle
    ctx.fillStyle = "red";
    ctx.fillRect(20, 20, 100, 50);

    // Draw a blue circle
    ctx.beginPath();
    ctx.arc(200, 75, 50, 0, 2 * Math.PI);
    ctx.fillStyle = "blue";
    ctx.fill();
    ctx.closePath();
</script>

Flashコンテンツの読み込みについて

外部リソースの埋め込みは、object要素、embed要素を使う。

Flashコンテンツもobjectやembedを使う

object要素による埋め込みの例) data属性を使う

<object data="example.pdf" type="application/pdf" width="600" height="400">
    <p>PDF cannot be displayed. <a href="example.pdf">Download PDF</a> instead.</p>
</object>

embed要素による埋め込みの例) src属性を使う

<embed src="example.swf" type="application/x-shockwave-flash" width="400" height="300">

この記事が気に入ったらサポートをしてみませんか？