Fonctionnalités cachées du HTML

HTML étant le langage le plus largement utilisé (au moins en tant que langage de balisage) n'a pas obtenu son crédit.
Étant donné que cela existe depuis tant d'années, des éléments tels que les contrôles FORM / INPUT sont toujours restés les mêmes sans ajout de nouveaux contrôles.

Donc, au moins à partir des fonctionnalités existantes, connaissez-vous des fonctionnalités qui ne sont pas bien connues mais très utiles.

Bien sûr, cette question est du type:

Fonctionnalités cachées de JavaScript
Fonctionnalités cachées de CSS
Fonctionnalités cachées de C #
Fonctionnalités cachées de VB.NET
Fonctionnalités cachées de Java
Fonctionnalités cachées de ASP classique
Fonctionnalités cachées d'ASP.NET
Fonctionnalités cachées de Python
Fonctionnalités cachées de TextPad
Fonctionnalités cachées d'Eclipse

Ne mentionnez pas les fonctionnalités de HTML 5.0, car il est en cours de projet

Veuillez spécifier une caractéristique par réponse .

Utilisation d'un chemin absolu indépendant du protocole:

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

Si le navigateur affiche une page en SSL via HTTPS, il demandera cet actif avec le protocole https, sinon il le demandera avec HTTP.

Cela empêche ce terrible message d'erreur «Cette page contient des éléments sécurisés et non sécurisés» dans IE, en conservant toutes vos demandes d'actifs dans le même protocole.

Avertissement: Lorsqu'ils sont utilisés sur un <link> ou @import pour une feuille de style, IE7 et IE8 téléchargent le fichier deux fois . Toutes les autres utilisations, cependant, sont très bien.

La balise label lie logiquement l'étiquette à l'élément de formulaire en utilisant l'attribut "for". La plupart des navigateurs le transforment en un lien qui active l'élément de formulaire associé.

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

le propriété contentEditable pour (IE, Firefox et Safari)

<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>

Cela rendra les cellules modifiables! Allez-y, essayez-le si vous ne me croyez pas.

Je pense que le balise optgroup est une fonctionnalité que les gens n'utilisent pas très souvent. La plupart des gens à qui je parle n'ont pas tendance à se rendre compte que cela existe.

Exemple:

<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>

Mon élément préféré est la balise de base, qui vous sauve la vie si vous souhaitez utiliser le routage ou la réécriture d'URL ...

Disons que vous êtes situé à:

www.anypage.com/folder/subfolder/

Voici le code et les résultats des liens de cette page.

Ancre régulière:

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

Mène à

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

Maintenant, si vous ajoutez une balise de base

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

L'ancre mène désormais à:

www.anypage.com/test.html

<img onerror="{javascript}" />

onerror est un événement JavaScript qui sera déclenché juste avant l'affichage de la petite croix rouge (dans IE).

Vous pouvez l'utiliser pour écrire un script qui remplacera l'image cassée par un contenu alternatif valide, de sorte que l'utilisateur n'ait pas à gérer le problème de la croix rouge.

À première vue, cela peut être considéré comme complètement inutile, car ne sauriez-vous pas auparavant si l'image était disponible en premier lieu? Mais, si vous considérez, il existe des applications valides parfaites pour cette chose; Par exemple: supposons que vous diffusiez une image à partir d'une ressource tierce que vous ne contrôlez pas. Comme notre gravatar ici dans SO ... il est servi depuis http://www.gravatar.com/ , une ressource que l'équipe de stackoverflow ne contrôle pas du tout - bien qu'elle soit fiable. Si http://www.gravatar.com/ tombe en panne, stackoverflow pourrait contourner ce problème en utilisant onerror.

L' <kbd>élément de marquage pour la saisie au clavier

Ctrl+ Alt+Del

<blink>

Doit être utilisé pour tout ce qui est important sur le site. Les sites les plus importants enveloppent tout le contenu en un clin d'œil.

<marquee>

Crée un effet de défilement réaliste, idéal pour les livres électroniques, etc.

Edit: les gars faciles, ce n'était qu'une tentative d'humour

Pas très connu mais vous pouvez spécifier lowsrcpour les images qui afficheront le lowsrclors du chargement srcde l'image:

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

C'est une bonne option pour ceux qui n'aiment pas les images entrelacées .

Un petit détail: à un moment donné, cette propriété était suffisamment obscure pour être utilisée pour exploiter Hotmail , vers 2000.

DELet INSpour marquer le contenu supprimé et inséré:

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

La balise bouton est la nouvelle input submitbalise et beaucoup de gens ne la connaissent toujours pas. Le texte du bouton peut par exemple être stylisé à l'aide de la balise button.

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

Rendra un bouton avec deux lignes, le premier dit " Cliquez " en gras et le second dit "Moi!". Essayez-le ici .

Spécifiez le CSS pour l'impression

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

les éléments <dl> <dt>et <dd>sont souvent oubliés et ils représentent la liste de définitions, le terme de définition et la définition.

Ils fonctionnent de la même manière qu'une liste non ordonnée ( <ul>), mais au lieu d'entrées uniques, cela ressemble plus à une liste clé / valeur.

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

Pas exactement caché, mais (et c'est la faute d'IE) pas assez de gens connaissent la tête, le corps, le pied à mon goût. Et combien d'entre vous savaient que tfoot est censé apparaître au-dessus de tbody dans le balisage?

La balise de saut de motswbr ou . Depuis Quirksmode:

(saut de mot) signifie: "Le navigateur peut insérer un saut de ligne ici, s'il le souhaite." Si le navigateur ne pense pas qu'un saut de ligne soit nécessaire, rien ne se passe.

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

Je donne au navigateur la possibilité d'ajouter un saut de ligne. Cela ne sera pas nécessaire sur de très grandes résolutions, lorsque la table a beaucoup d'espace. Sur des résolutions plus petites, cependant, de tels sauts de ligne stratégiquement placés empêchent la table de devenir plus grande que la fenêtre, et provoquent ainsi des barres de défilement horizontales.

Il y a aussi l' ­entité HTML mentionnée sur la même page. C'est la même chose que wbrmais quand une pause est insérée un hypen (- ) est ajouté pour signifier une pause. Un peu comme la façon dont cela se fait sur papier.

Un exemple:

TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText

Une caractéristique très sous-utilisée est le fait que presque tous les éléments, qui fournissent un contenu visible sur la page, peuvent avoir un attribut «titre».

L'ajout d'un tel attribut provoque l'apparition d'une `` info-bulle '' lorsque la souris est `` survolée '' sur l'élément, et peut être utilisée pour fournir des informations non essentielles - mais utiles - d'une manière qui ne rend pas la page trop encombrée . (Ou cela peut être un moyen d'ajouter des informations à une page déjà bondée)

Application de plusieurs classes html / css à une balise. Même message ici

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

Nous connaissons tous les DTD ou les déclarations de type de document (ces choses qui font échouer votre page avec le validateur W3C). Cependant, il est possible d'étendre la DTD en déclarant une liste d'attributs pour les éléments personnalisés.

Par exemple, le validateur W3C échouera pour cette page en raison de l' behavior="mouseover"ajout au<p> balise. Cependant, vous pouvez le faire passer en faisant ceci:

<!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>
]>

En savoir plus sur les DTD personnalisés sur QuirksMode .

Nous pouvons attribuer une chaîne encodée en base 64 comme attribut source / href de l'image, JavaScript, iframe, lien

par exemple

<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>

Références

Comment puis-je créer des images à l'aide du balisage HTML?

Fichier binaire vers encodeur / traducteur Base64

J'ai récemment découvert les balises fieldset et label. Comme ci-dessus, non caché mais utile pour les formulaires.

<fieldset> explication

Exemple:

<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>

Vous pouvez utiliser la objectbalise au lieu d'un iframepour inclure un autre document dans la page:

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

<optgroup>est un excellent outil que les gens manquent souvent lorsqu'ils font des <select>listes segmentées .

<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>

est ce que vous devriez utiliser au lieu de

<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>

La plupart ne sont pas non plus conscients du fait que vous pouvez distinguer le bouton de formulaire enfoncé en leur donnant simplement une paire nom / valeur. Par exemple

<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>

Côté serveur, le bouton réel enfoncé peut alors être obtenu en vérifiant simplement la présence du paramètre de requête associé au nom du bouton. Si ce n'est pas le cas null, le bouton a été enfoncé.

J'ai vu beaucoup de choses inutiles hacks / solutions de contournement JS pour cela, par exemple en changeant l'action du formulaire ou en changeant une valeur d'entrée cachée au préalable en fonction du bouton enfoncé. C'est tout simplement étonnant.

De plus, j'ai vu presque autant de hacks / solutions de contournement JS pour rassembler les cases cochées de plusieurs cases à cocher comme dans les lignes de tableau. À chaque sélection / vérification d'une ligne de table, le JS ajoutait l'index de ligne à une valeur séparée par des virgules dans un élément d'entrée caché qui serait ensuite fractionné / analysé plus loin du côté serveur. C'est le résultat de l'inconscience que vous pouvez donner à plusieurs éléments d'entrée le même nom mais une valeur différente et que vous pouvez toujours y accéder en tant que tableau côté serveur. Par exemple

<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>
...

L'inconscience donnerait à chaque case à cocher un nom différent et omettrait l'attribut de valeur entière. Dans certaines situations sans JS-hack / contournement, j'ai également vu une magie inutilement écrasante dans le code côté serveur pour distinguer les éléments cochés.

Balise 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>

Si l' forattribut d'une <label>balise n'est pas spécifié, il est implicitement défini comme le premier enfant <input>, c'est-à-dire

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

est équivalent à

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

Bouton comme lien, pas de JavaScript :

Vous pouvez mettre tout type de fichier sous la forme action de , et vous avez un bouton qui agit comme un lien. Pas besoin d'utiliser des événements onclick ou autres. Vous pouvez même ouvrir le fichier dans une nouvelle fenêtre en collant une "cible" dans le formulaire. Je n'ai pas beaucoup vu cette technique en application.

Remplacez ceci

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

avec ça:

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

Le moyen le plus simple de rafraîchir la page en X secondes - META Refresh

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

La valeur dans le contenu signifie les secondes après lesquelles vous souhaitez que la page s'actualise.
[Éditer]

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

Pour faire une simple redirection!
(Merci @rlb)

<html>, <head>Et les <body>balises sont facultatives. Si vous les omettez, ils seront insérés en silence par l'analyseur aux endroits appropriés. Il est parfaitement valable de le faire en HTML (tout comme implicite<tbody> ).

HTML dans théorie est une application SGML. Il s'agit probablement du document HTML 4 valide le plus court :

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

Ce qui précède ne fonctionne nulle part sauf W3C Validator. Cependant, le text/htmldocument HTML5 valide le plus court fonctionne partout:

<!DOCTYPE html><title></title>

le lang attribut n'est pas très connu mais très utile. L'attribut est utilisé pour identifier la langue du contenu dans l'ensemble du document ou dans un seul élément. Les codes de langue sont donnés en code de langue ISO à 2 lettres (c'est-à-dire «en» pour l'anglais, «fr» pour le français).

C'est utile pour les navigateurs qui peuvent ajuster leur affichage des guillemets, etc. Les lecteurs d'écran bénéficient également de l' lang attribut ainsi que des moteurs de recherche.

Sitepoint a une bonne explication de lalang attribut.

Exemples

Spécifiez la langue pour être l'anglais pour l'ensemble du document, sauf si remplacé par un autre langattribut à un niveau inférieur dans le DOM.

<html lang="en">

Dans le paragraphe suivant, spécifiez la langue suédoise.

<p lang="sv">Ät din morgongröt och bli stor och stark!</p>

La déclaration "! DOCTYPE" . Ne pensez pas que c'est une fonctionnalité cachée, mais il semble que ce ne soit pas bien connu mais très utile.

par exemple

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