web-dev-qa-db-ja.com

HTMLの隠された機能

最も広く使用されている言語（少なくともマークアップ言語として）であるHTMLは、当然の信用を得ていません。
長年にわたって存在してきたことを考えると、FORM/INPUTコントロールのようなものは、新しいコントロールが追加されずに同じままです。

少なくとも既存の機能から、あまり知られていないが非常に有用な機能を知っていますか？.

もちろん、この質問は次のようなものです。

JavaScriptの非表示機能
CSSの非表示機能
C＃の非表示機能
VB.NETの非表示機能
Javaの非表示機能
従来のASPの非表示機能
ASP.NETの非表示機能
Pythonの非表示機能
TextPadの非表示機能
Eclipseの非表示機能

working draft にあるため、HTML 5.0の機能については言及しないでください。

回答ごとに1つの機能を指定してください。

htmlxhtmllanguage-featureshidden-features
110
Binoj Antony

プロトコルに依存しない絶対パスの使用：

<img src="//domain.com/img/logo.png"/>

ブラウザがHTTPS経由でSSLでページを表示している場合、httpsプロトコルを使用してそのアセットを要求し、そうでない場合はHTTPを使用して要求します。

これにより、IEでの「このページにはセキュアアイテムと非セキュアアイテムの両方が含まれています」というエラーメッセージが表示されなくなり、すべてのアセットリクエストが同じプロトコル内に保持されます。

警告：スタイルシートの<link>または@importで使用される場合、IE7およびIE8 ファイルを2回ダウンロードする 。ただし、他の用途はすべて問題ありません。

244
Paul Irish

ラベルタグは、「for」属性を使用して、ラベルをフォーム要素に論理的にリンクします。ほとんどのブラウザはこれをリンクに変換し、関連するフォーム要素をアクティブにします。

<label for="fiscalYear">Fiscal Year</label>
<input name="fiscalYear" type="text" id="fiscalYear"/>
138
Brian Reiter

（IE、Firefox、およびSafari）のcontentEditableプロパティ

<table>
    <tr>
      <td><div contenteditable="true">This text can be edited<div></td>
      <td><div contenteditable="true">This text can be edited<div></td>
    </tr>
</table>

これにより、セルが編集可能になります！さあ、私を信じないなら 試してみてください .

136
aleemb

optgroupタグ は、人々があまり使用しない機能の1つだと思います。私が話すほとんどの人は、それが存在することに気付かない傾向があります。

例：

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>
102
RichardOD

私のお気に入りのビットはベースタグです。これは、ルーティングまたはURL書き換えを使用する場合に役立ちます。

あなたがいるとしましょう：

www.anypage.com/folder/subfolder/

以下は、このページのリンクのコードと結果です。

通常のアンカー：

<a href="test.html">Click here</a>

につながる

www.anypage.com/folder/subfolder/test.html

ベースタグを追加すると

<base href="http://www.anypage.com/" />
<a href="test.html">Click here</a>

アンカーは次のようになります。

www.anypage.com/test.html
100
Fenton
<img onerror="{javascript}" />

onerrorは、小さな赤い十字（IE）の画像が表示される直前に発生するJavaScriptイベントです。

これを使用して、破損した画像を有効な代替コンテンツに置き換えるスクリプトを作成し、ユーザーが赤十字の問題に対処する必要がないようにすることができます。

一見すると、これは完全に役に立たないものとみなすことができます。なぜなら、そもそも画像が利用可能だったのかどうか、あなたは以前に知りませんか？しかし、考慮すれば、このことには完璧で有効なアプリケーションがあります。たとえば、制御していないサードパーティのリソースから画像を提供しているとします。 SOのgravatarのように... http://www.gravatar.com/ から提供されます。これは、stackoverflowチームがまったく制御しないリソースですが、信頼できるものです。 http://www.gravatar.com/ がダウンした場合、stackoverflowはonerrorを使用してこれを回避できます。

99
Daniel Silveira

<kbd>キーボード入力用にマークアップするための要素

Ctrl+Alt+Del

96
Russ Cam
<blink>

サイトで重要なものに使用する必要があります。最も重要なサイトは、すべてのコンテンツを瞬く間にラップします。

<Marquee>

電子書籍などに最適な、リアルなスクロール効果を作成します。

編集：やさしい、これは単なるユーモアの試みでした

85
Mark Glorie

あまり知られていませんが、画像のlowsrcをロードするときにlowsrcを表示する画像にsrcを指定できます。

<img lowsrc="monkey_preview.png" src="monkey.png" />

これは、 interlaced imagesが気に入らない人に適したオプションです。

ちょっとした雑学：ある時点で、このプロパティは exploit Hotmail 、2000年頃に使用されるほどにあいまいでした。

84
aleemb

DEL および INS は、削除および挿入されたコンテンツをマークします。

HTML <del>sucks</del> <ins>rocks</ins>!
67
Gumbo

ボタンタグは新しいinput submitタグと多くの人々はまだそれに慣れていません。たとえば、ボタンのテキストは、buttonタグを使用してスタイル設定できます。

<button>
    <b>Click</b><br />
    Me!
</button>

ボタンを2行でレンダリングします。最初の行は「Click」と太字で表示され、2行目は「Me！」と表示されます。試してみてください こちら 。

58
aleemb

印刷するCSSを指定する

<link type="text/css" rel="stylesheet" href="screen.css" media="screen" />
<link type="text/css" rel="stylesheet" href="print.css"  media="print" />
56
Binoj Antony

<dl><dt>および<dd>アイテムはしばしば忘れられ、定義リスト、定義用語、および定義を表します。

順序付けられていないリスト（<ul>）しかし、単一のエントリではなく、キー/値リストのようなものです。

<dl>
  <dt>What</dt><dd>An Example</dd>
  <dt>Why</dt><dd>Examples are good</dd>
</dl>
54
Jehiah

正確に隠されていませんが（これはIEのせいです）、私の好みでは thead、tbody、tfoot について十分な人が知っていません。そして、tfootがマークアップでtbodyの上の上に表示されるはずだと知っている人はどれくらいいますか？

52
annakata

wbrまたは Word-break タグ。 Quirksmodeから：

（ワードブレーク）は、「必要に応じて、ブラウザがここに改行を挿入する場合がある」ことを意味します。ブラウザが改行を必要としないと考えている場合、何も起こりません。

<div class="name">getElements<wbr>ByTagName()</div>

ブラウザに改行を追加するオプションを提供します。テーブルに十分なスペースがある場合、これは非常に大きな解像度では必要ありません。ただし、解像度が小さい場合、戦略的に配置されたこのような改行により、テーブルがウィンドウより大きくなり、水平スクロールバーが発生しなくなります。

また、&shy;同じページに記載されているHTMLエンティティ。これはwbrと同じですが、ブレークが挿入されるとハイペン（-）は、ブレークを示すために追加されます。印刷物で行われる方法のようなもの。

例：

Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text­Text

50
aleemb

あまり使用されていない機能は、ページ上の表示コンテンツを提供するほぼすべての要素が「title」属性を持つことができるという事実です。

そのような属性を追加すると、マウスを要素の上に置いたときに「ツールチップ」が表示され、ページを過度に混雑させない方法で重要ではないが有用な情報を提供するために使用できます。 （または、すでに混雑しているページに情報を追加する方法になる場合があります）

43
belugabob

1つのタグに複数のhtml/cssクラスを適用します。同じ投稿 ここ

<p class="Foo Bar BlackBg"> Foo, Bar and BlackBg are css classes</p>
38
Binoj Antony

DTDまたはドキュメントタイプ宣言（W3Cバリデーターでページが失敗する原因）については誰もが知っています。ただし、カスタム要素の属性リストを宣言することにより、[〜＃〜] dtd [〜＃〜]sを拡張することができます。

たとえば、W3Cバリデーターは このページで失敗しますbehavior="mouseover"に追加<p>タグ。ただし、これを行うことでパスさせることができます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
[
<!ATTLIST p behavior CDATA #IMPLIED>
]>

詳しくは QuirksModeのカスタムDTD をご覧ください。

34
aleemb

Base 64エンコードされた文字列を、image、JavaScript、iframe、linkのsource/href属性として割り当てることができます。

例えば.

<img alt="Embedded Image" width="297" height="246" 
  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASkA..." />

div.image {
  width:297px;
  height:246px;
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASkA...);
}

<image>
  <title>An Image</title>
  <link>http://www.your.domain</link>
  <url>data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASkA...</url>
</image>

<link rel="stylesheet" type="text/css"
  href="data:text/css;base64,LyogKioqKiogVGVtcGxhdGUgKioq..." />

<script type="text/javascript"
  href="data:text/javascript;base64,dmFyIHNjT2JqMSA9IG5ldyBzY3Jv..."></script>

参照資料

HTMLマークアップを使用して画像を作成するにはどうすればよいですか

バイナリファイルからBase64エンコーダー/トランスレーターへ

28
Xinus

最近、フィールドセットとラベルタグについて知りました。上記のように、非表示ではありませんが、フォームに役立ちます。

<fieldset>の説明

例：

<form>
  <fieldset>
    <legend>Personalia:</legend>
    Name: <input type="text" size="30" /><br />
    Email: <input type="text" size="30" /><br />
    Date of birth: <input type="text" size="10" />
  </fieldset>
</form>
26
Michael Sharek

objectの代わりに iframe タグを使用して、ページに別のドキュメントを含めることができます。

<object data="data/test.html" type="text/html" width="300" height="200">
  alt : <a href="data/test.html">test.html</a>
</object>
25
Zach

また、ほとんどは、名前/値のペアを与えるだけで、押されたフォームボタンを区別できるという事実を認識していません。例えば。

<form action="process" method="post">
     ...
     <input type="submit" name="edit" value="Edit">
     <input type="submit" name="delete" value="Delete">
     <input type="submit" name="move_up" value="Move up">
     <input type="submit" name="move_up" value="Move down">
</form>

サーバー側では、ボタン名に関連付けられた要求パラメーターの存在を確認するだけで、実際に押されたボタンを取得できます。 nullでない場合、ボタンが押されました。

私はたくさん of不必要なを見ました。JSハッキング/回避策、例えば。押されたボタンに応じて、事前にフォームアクションを変更するか、非表示の入力値を変更します。それは単に驚くべきことです。

また、表の行のように、複数のチェックボックスのチェックされたものを収集するためのJSハッキング/回避策がほぼ同じくらい見られました。テーブルの行を選択/チェックするたびに、JSは非表示の入力要素のコンマ区切り値に行インデックスを追加し、サーバー側でさらに分割/解析されます。これは、複数の入力要素にsame名前を与えることができるが、different値であり、サーバー側の配列として引き続きアクセスできること。例えば。

<tr><td><input type="checkbox" name="rowid" value="1"></td><td> ... </td></tr>
<tr><td><input type="checkbox" name="rowid" value="2"></td><td> ... </td></tr>
<tr><td><input type="checkbox" name="rowid" value="3"></td><td> ... </td></tr>
...

気づかないと、各チェックボックスに異なる名前が付けられ、値属性全体が省略されます。いくつかのJSハック/回避策のない状況では、チェックされたアイテムを区別するために、サーバー側のコードで不必要に圧倒的なmagicも見ました。

25
BalusC

<optgroup> は、セグメント化された<select>リスト。

<select>
  <optgroup label="North America">
    <option value='us'>United States</option>
    <option value='ca'>Canada</option>
  </optgroup>
  <optgroup label="Europe">
    <option value='fr'>France</option>
    <option value='ir'>Ireland</option>
  </optgroup>
</select>

代わりに使用すべきものです

<select>
  <option value=''>----North America----</option>
  <option value='us'>United States</option>
  <option value='ca'>Canada</option>
  <option value=''>----Europe----</option>
  <option value='fr'>France</option>
  <option value='ir'>Ireland</option>
</select>
25
Justin Johnson

Colgroupタグ 。

<table width="100%">
    <colgroup>
        <col style="width:40%;" />
        <col style="width:60%;" />
    </colgroup>
    <thead>
        <tr>
            <td>Column 1<!--This column will have 40% width--></td>
            <td>Column 2<!--This column ill have 60% width--></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
        </tr>
    </tbody>
</table>
22
Çağdaş Tekin

<label>タグのfor属性が指定されていない場合、最初の子<input>として暗黙的に設定されます。

<label>Alias: <input name="alias" id="alias"></label>

に等しい

<label for="alias">Alias:</label> <input name="alias" id="alias">
18
moo

リンクとしてのボタン、JavaScriptなし：

formアクションにはあらゆる種類のファイルを配置でき、リンクとして機能するボタンがあります。 onclickイベントなどを使用する必要はありません。フォームに「ターゲット」を貼り付けることで、新しいウィンドウでファイルを開くこともできます。私はアプリケーションでそのテクニックをあまり見ませんでした。

これを交換してください

<a href="myfile.pdf" target="_blank">Download file</a>

これとともに：

<form method="get" action="myfile.pdf" target="_blank">
    <input type="submit" value="Download file">
</form>
15
Wadih M.

X秒でページを更新する最も簡単な方法- META Refresh

<meta http-equiv="refresh" content="600">

Contentの値は、ページを更新するまでの秒数を示します。
[編集]

<meta http-equiv="refresh" content="0; url=foobar.com/index.html">

簡単なリダイレクトを行うには！
（@ rlbに感謝）

13
Binoj Antony

<html>、<head>および<body>タグはオプションです。これらを省略すると、パーサーによって適切な場所に静かに挿入されます。 HTMLで完全に有効です（暗黙の<tbody>）。

theoryのHTMLはSGMLアプリケーションです。これはおそらく最短です有効 HTML 4ドキュメント：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<title//<p/

上記はW3C Validator以外では機能しません。ただし、最短の有効なHTML5 text/htmlドキュメントはどこでも動作します：

<!DOCTYPE html><title></title>
12
Kornel

lang属性はあまり知られていませんが、非常に便利です。この属性は、ドキュメント全体または単一の要素のいずれかでコンテンツの言語を識別するために使用されます。言語コードはISO 2文字の言語コード（つまり、英語の場合は「en」、フランス語の場合は「fr」）で指定されます。

引用符などの表示を調整できるブラウザに役立ちます。スクリーンリーダーは、検索エンジンだけでなくlang属性も利用できます。

Sitepointにはいい説明がありますlang属性。

例

DOMの下位レベルにある別のlang属性によって上書きされない限り、ドキュメント全体に対して言語を英語に指定します。

<html lang="en">

次の段落の言語をスウェーデン語に指定します。

<p lang="sv">Ät din morgongröt och bli stor och stark!</p>
11
Erik Töyrä Silfverswärd

"！DOCTYPE"宣言 。隠された機能だとは思わないでください。しかし、あまり知られていないようですが、非常に便利です。

例えば.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">
10
Xn0vv3r

それはHTMLとはあまり関係がありませんが、それを知っている人はほとんどいません。

人々は<meta>タグとhttp-equiv属性：

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="Refresh" content="5; url=somewhere/"/>

しかし、多くの開発者はこれが何をするのかさえ知りません。 http-equiv属性は、タグがそれらを制御していない場合はHTTPヘッダーを置き換えるを意味することを意味します。したがって、ほとんどの作業はhttp-equivはサーバー側で実行する必要があります。

その上、それほど強力ではありません。ドキュメントのいくつかのプロパティは、<meta>タグ。 Content-Typeの<meta>タグは、ブラウザに特定の文字セットを使用するように指示できますが、ほとんどの場合、ドキュメントのMIMEタイプへの変更は無視されます（したがって、text/html文書化application/xhtml+xml 1つの方法）。

例の両方のタグは、次の単純な呼び出しで置き換える必要があります。

<?php
header('Content-Type: text/html; charset=UTF-8');
header('Refresh: 5; url=somewhere/');
?>

HTTP準拠のブラウザー（つまり、ほぼすべてのブラウザー）で動作するようにバインドされています。

6
zneak

<sup> x </sup>付きの上付き文字

5
Andrea

フォームに送信ボタンがある場合にのみ、テキスト入力でEnterキーを押したときにフォームを送信できます。試してみてください こちら 。ボタンのタイプを「送信」に変更しないと機能しません。

3
Fabien Ménager

私のお気に入りの隠された機能はすでに言及されており、これは「ベース」タグです。相対URLを持つコードのチャンクがあり、突然すべてが移動するが、ページは移動しない場合に非常に便利です。

ただし、言及されていないのはリストヘッダータグ<lh>。 「減価償却」とみなされるため、おそらく言及されていませんでしたが、ほとんどのブラウザーはまだサポートしています。私はそれが段階的に廃止された理由を知りません、私が作るほとんどすべての順序付けられていないリストはヘッダーを使用することができ、h3タグをドロップするだけで気分が悪くなり、最初のリストアイテムをリストのタイトルにするのは間違っています。

3
Anthony

特殊文字 数学、ギリシャ語、...あまり知られていない

2
Xn0vv3r

定義リスト：

<dl>
  <dt>Some Term</dt>
  <dd>Some description</dd>
  <dd>Some other description</dd>

  <dt>Another Word/Phrase</dt>
  <dd>Some description</dd>
</dl>

また、さまざまなサイトのフォームレイアウトとナビゲーションメニューのためにこれを再タスクしました。

0
HorusKol