HTML辞典 u要素、mark要素、small要素、s要素の解説

HTML辞典 HTML辞典
この記事は約9分で読めます。

テキストをラベル付けする<u>(ユー)タグ、注目すべき部分として目立たせる<mark>(マーク)タグ、細目や注釈のテキストを表す<small>(スモール)タグ、無効なテキストを表す<s>(エス)タグの使用方法を掲載。

HTML5

スポンサーリンク

対応ブラウザ

ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:chrome
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:firefox
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:safari
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms edge
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms ie
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:opera

カテゴリー・コンテンツモデル

要素 カテゴリー コンテンツモデル
u ・パルパブルコンテンツ
・フローコンテンツ
フレージングコンテンツ
mark
small
s

グローバル属性

u要素、mark要素、small要素、s要素共通

グローバル属性は、すべての要素に指定できる共通の属性のことです。

accesskey(アクセスキー)

要素にアクセスキーを割り当てます。いわゆるショートカットキーになります。

autocapitallze

入力/編集されたとき、入力文字列の先頭大文字化が自動的に行われるかどうかなどを指定します

内容
offまたはnone自動的な大文字化は指定しない
onまたはsentences最初の文字を大文字化する
words各語の最初の文字を大文字化する
charactersすべての文字を大文字化する

class(クラス)

要素に分類上の名前を指定します。CSSのセレクタで、特定の要素を選択できるようになります。

contenteditable(コンテント・エディタブル)

要素の内容が閲覧者による編集可能かどうか指定します。

内容
trueまたは、空閲覧者による編集可能。
false閲覧者による編集不可。

data-

カスタムデータ属性、JavaScriptで使用するための独自の属性を指定します。「data-*****=””」のような形式で開発者が自由に指定できます。JavaScriptを利用してデータ処理したり、独自のデータを入力したりするために使用します。

dir(ディレクショナリティ)

要素の内容の書字方向(文字を書き進める方向)を指定します。

内容
ltrテキストを左から右へ書き進める。「Left to Righ」の略
rtl要素は編集不可。「Right to Left」の略
autoユーザーエージェントによって自動的に書字方向を決める

draggable

Drag and Drop APIを使用して要素をドラッグすることができるか指定します。

内容
テキストを左から右へ書き進める。「Left to Righ」の略
autoユーザーエージェントによって自動的に書字方向を決める

hidden(ヒドゥン)

要素がその時点でのページの内容に関連がないことを表し、指定された要素は表示されません。用途としては、ページ内に表示したくないデータの値などをセットしておき、POSTなどで値を送信する場合などに使用したりします。(商品IDやユーザーID)

id(アイディー)

要素にユニークな識別IDを指定します。文章内で一意である必要があり、同じ値を複数のidに設定することはできません。CSSのセレクタで、特定の要素を選択できるようになります。また、リンクのフラグメント識別子としても利用できます。

空白文字は使用できません。

lang(ランゲージ)

要素の内容の言語を指定します。html要素や文書全体に対して指定することができます。また、一部の要素に対しても指定することができます。

例:lang=”ja”

spellcheck(スペルチェック)

要素の内容に対するスペルチェックの可否を指定します。

trueスペルチェックをします。
falseスペルチェックをしません。

style(スタイル)

要素に直接スタイルシートを指定します。

※style属性でスタイルを指定する方法はあまり推奨されていません。

tabindex(タブインデックス)

「TABキー」による移動順序を指定します。正の数値で指定すると、その順序にフォーカスが移動します。負の数値を指定すると選択することができますが、TABキーでの移動順序に含まれません。また、0を指定した要素は最後にフォーカスします。

title(タイトル)

要素に補足情報を加えます

translate(トランスレート)

翻訳対象にするかどうかを指定します。

内容
yes翻訳対象とする
no翻訳非対象とする

イベントハンドラ属性は、JavaScriptのコードを閲覧者の操作に合わせて実行する属性です。

onclick

要素をクリックしたときにスクリプトを実行します。

oninput

入力コントロールにデータを入力したときにスクリプトを実行します。

onsubmit

入力コントロールからデータを送信するときにスクリプトを実行します。

u要素 書式・概要

<u>~</u>

u要素はテキストをラベル付けします。文章中のスペルミスを表す箇所や、外国固有名詞などに使います。従来のHTMLではu要素は下線が引かれたテキストを表していましたが、HTML5では、用途が変更されています。また、多くのブラウザでは下線が引かれたテキストとして表示されます。

基本的な使用方法

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>サンプルページ</title>
    <meta charset="uft-8">    
  </head>
  <body>
      <h1>誤字の修正</h1>
      <p>P.200 <u>Apach</u> HTTP Server</p>
      <h1>本来の意味と異なる使用方法</h1>
      <p>爽やかな<u>オレンジ</u>色のマスクが今は人気です。</p>
  </body>
</html>

chrome 実行サンプル

基本的なサンプル u要素 chrome実行サンプル

Firefox 実行サンプル

基本的なサンプル u要素 firefox実行サンプル

edge 実行サンプル

基本的なサンプル u要素 edge実行サンプル

opera 実行サンプル

基本的なサンプル u要素 opera実行サンプル

mark要素 書式・概要

<mark>~</mark>

テキストを<mark>~</mark>で囲うと、一般的なブラウザでは黄色の蛍光ペン(ハイライト)で線を引いたように表示されます。mark要素は文章中で特に目立たせたいテキスト部分を示す要素です。例えば検索結果でユーザーが検索したワードをハイライトさせたいときなどに使用します。あくまでユーザー操作に関連している箇所に使います。重要さなどを示したい場合は、<em>タグや<strong>タグを使用します。

※蛍光ペンで線を引いたように表示すると仕様で決められているわけではありません。

基本的な使用方法

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>サンプルページ</title>
    <meta charset="uft-8">
  </head>
  <body>
      <p>
         銀の皿がおいてあり<mark>大きな肉汁たっぷりの肉</mark>が盛り付けされていました。
      </p>
  </body>
</html>

chrome 実行サンプル

基本的なサンプル mark要素 chrome実行サンプル

Firefox 実行サンプル

基本的なサンプル mark要素 firefox実行サンプル

edge 実行サンプル

基本的なサンプル mark要素 edge実行サンプル

opera 実行サンプル

基本的なサンプル mark要素 opera実行サンプル

small要素 書式・概要

<small>~</small>

small要素は、印刷物において一般的に小さな文字で欄外に記されている注記のようなものを表すために使用します。一般的なページの最下部付近にあるCopyright表記の部分で使用されるほか、警告・免責事項・帰属・法的規制などを表記する際にも使用されます。

小さくする目的では使用しないほうがよいでしょう。

すなりん
すなりん

細目とは、細かい点について規定してある項目のこと。

基本的な使用方法

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>small要素 サンプルページ</title>
    <meta charset="uft-8">
  </head>
  <body>
      <p>通常サイズ</p>
      <p>Copyright © 2021 すなりん All Rights Reserved</p>
      <p>smallサイズ</p>
      <footer>
      <p><small>Copyright © 2021 すなりん All Rights Reserved.</small></p>
      </footer>
  </body>
</html>

chrome 実行サンプル

基本的なサンプル small要素 chrome実行サンプル

Firefox 実行サンプル

基本的なサンプル small要素 firefox実行サンプル

edge 実行サンプル

基本的なサンプル small要素 edge実行サンプル

opera 実行サンプル

基本的なサンプル small要素 opera実行サンプル

s要素 書式・概要

<s>~</s>

s要素は「すでに正しい情報ではなくなった部分」または「すでに関係のない情報になってしまった部分」を表します。ただし、内容を削除することではないため、削除すること表すには「del要素」を使用します。

一般的なブラウザでは取消線つきで表示されます。

基本的な使用方法

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>s要素 サンプルページ</title>
    <meta charset="uft-8">
  </head>
  <body>
      <p><s>u要素は、テキストに下線を引くものです</s></p>
      <p>HTML5では、u要素はテキストをラベル付けするものです。</p>
  </body>
</html>

chrome 実行サンプル

基本的なサンプル s要素 chrome実行サンプル

Firefox 実行サンプル

基本的なサンプル s要素 firefox実行サンプル

edge 実行サンプル

基本的なサンプル s要素 edge実行サンプル

opera 実行サンプル

基本的なサンプル s要素 opera実行サンプル

コメント

タイトルとURLをコピーしました