Funciones ocultas de HTML

HTML, siendo el lenguaje más utilizado (al menos como lenguaje de marcado), no ha recibido su merecido crédito.
Teniendo en cuenta que ha existido durante tantos años, cosas como los controles FORM / INPUT siguen siendo los mismos sin nuevos controles agregados.

Entonces, al menos de las características existentes, ¿conoce alguna característica que no sea muy conocida pero que sea muy útil?

Por supuesto, esta pregunta está en la línea de:

Funciones ocultas de JavaScript
Funciones ocultas de CSS
Funciones ocultas de C #
Funciones ocultas de VB.NET
Funciones ocultas de Java
Funciones ocultas de ASP clásico
Funciones ocultas de ASP.NET
Funciones ocultas de Python
Funciones ocultas de TextPad
Funciones ocultas de Eclipse

No mencione las características de HTML 5.0, ya que está en borrador de trabajo

Especifique una función por respuesta .

Usando una ruta absoluta independiente del protocolo:

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

Si el navegador está viendo una página en SSL a través de HTTPS, entonces solicitará ese activo con el protocolo https; de lo contrario, lo solicitará con HTTP.

Esto evita ese horrible mensaje de error "Esta página contiene elementos seguros y no seguros" en IE, manteniendo todas sus solicitudes de activos dentro del mismo protocolo.

Advertencia: cuando se usa en un <link> o @import para una hoja de estilo, IE7 e IE8 descargan el archivo dos veces . Todos los demás usos, sin embargo, están bien.

La etiqueta etiqueta enlaza lógicamente la etiqueta con el elemento de formulario utilizando el atributo "para". La mayoría de los navegadores convierten esto en un enlace que activa el elemento de formulario relacionado.

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

La propiedad contentEditable para (IE, Firefox y 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>

¡Esto hará que las celdas sean editables! Adelante, pruébalo si no me crees.

Creo que la etiqueta optgroup es una característica que la gente no usa con mucha frecuencia. La mayoría de las personas con las que hablo no suelen darse cuenta de que existe.

Ejemplo:

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

Mi parte favorita es la etiqueta base, que es un salvavidas si desea utilizar el enrutamiento o la reescritura de URL ...

Digamos que se encuentra en:

www.anypage.com/folder/subfolder/

El siguiente es el código y los resultados de los enlaces de esta página.

Ancla regular:

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

Lleva a

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

Ahora, si agrega una etiqueta base

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

El ancla ahora conduce a:

www.anypage.com/test.html

<img onerror="{javascript}" />

onerror es un evento de JavaScript que se activará justo antes de que se muestre la imagen de la pequeña cruz roja (en IE).

Puede usar esto para escribir un script que reemplace la imagen rota con algún contenido alternativo válido, para que el usuario no tenga que lidiar con el problema de la cruz roja.

A primera vista, esto puede verse como completamente inútil, porque, ¿no sabría previamente si la imagen estaba disponible en primer lugar? Pero, si lo considera, hay aplicaciones válidas perfectas para esto; Por ejemplo: suponga que está sirviendo una imagen de un recurso de terceros que no controla. Como nuestro gravatar aquí en SO ... se sirve desde http://www.gravatar.com/ , un recurso que el equipo de stackoverflow no controla en absoluto, aunque es confiable. Si http://www.gravatar.com/ se cae, stackoverflow podría solucionar esto usando onerror.

El <kbd>elemento para marcar para entrada de teclado

Ctrl+ Alt+Del

<blink>

Debe usarse para cualquier cosa importante en el sitio. Los sitios más importantes envuelven todo el contenido en un abrir y cerrar de ojos.

<marquee>

Crea un efecto de desplazamiento realista, ideal para libros electrónicos, etc.

Editar: muchachos fáciles, esto fue solo un intento de humor

No muy conocido, pero puede especificar lowsrcimágenes que mostrarán lowsrcmientras se carga srcla imagen:

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

Esta es una buena opción para aquellos a quienes no les gustan las imágenes entrelazadas .

Un poco de trivia: en un momento, esta propiedad era lo suficientemente oscura como para que se usara para explotar Hotmail , alrededor del año 2000.

DELy INSpara marcar contenidos eliminados e insertados:

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

La etiqueta del botón es la nueva input submitetiqueta y mucha gente todavía no está familiarizada con ella. El texto del botón puede, por ejemplo, modificarse con la etiqueta del botón.

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

Representará un botón con dos líneas, la primera dice " Haga clic " en negrita y la segunda dice "¡Yo!". Pruébelo aquí .

Especifique el css para imprimir

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

los elementos <dl> <dt>y a <dd>menudo se olvidan y representan Lista de definiciones, Término de definición y Definición.

Funcionan de manera similar a una lista desordenada ( <ul>) pero en lugar de entradas individuales es más como una lista de clave / valor.

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

No exactamente oculto, pero (y esto es culpa de IE) no hay suficiente gente que sepa acerca de thead, tbody, tfoot para mi gusto. ¿Y cuántos de ustedes sabían que se supone que tfoot debe aparecer sobre tbody en el marcado?

La etiqueta de salto de palabrawbr o . Desde Quirksmode:

(salto de palabra) significa: "El navegador puede insertar un salto de línea aquí, si lo desea". Si el navegador no considera necesario un salto de línea, no pasa nada.

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

Le doy al navegador la opción de agregar un salto de línea. Esto no será necesario en resoluciones muy grandes, cuando la mesa tiene mucho espacio. Sin embargo, en resoluciones más pequeñas, estos saltos de línea colocados estratégicamente evitan que la tabla crezca más que la ventana y, por lo tanto, provoque barras de desplazamiento horizontales.

También existe la ­entidad HTML mencionada en la misma página. Esto es lo mismo que, wbrpero cuando se inserta una ruptura, se agrega un guión ( -) para indicar una ruptura. Algo así como se hace en forma impresa.

Un ejemplo:

TextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTexto

Una característica muy infrautilizada es el hecho de que casi todos los elementos que proporcionan contenido visible en la página pueden tener un atributo de 'título'.

Agregar un atributo de este tipo hace que aparezca una 'información sobre herramientas' cuando el mouse se 'desplaza' sobre el elemento, y puede usarse para proporcionar información no esencial, pero útil, de una manera que no cause que la página se llene demasiado . (O puede ser una forma de agregar información a una página que ya está llena)

Aplicar varias clases html / css a una etiqueta. Misma publicación aquí

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

Todos conocemos las DTD o las declaraciones de tipo de documento (esas cosas que hacen que su página falle con el validador W3C). Sin embargo, es posible ampliar las DTD declarando una lista de atributos para elementos personalizados.

Por ejemplo, el validador W3C fallará para esta página debido a que se behavior="mouseover"agregó a la <p>etiqueta. Sin embargo, puede hacerlo pasar haciendo esto:

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

Obtenga más información en sobre DTD personalizadas en QuirksMode .

Podemos asignar una cadena codificada en base 64 como atributo fuente / href de imagen, JavaScript, iframe, enlace

p.ej

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

Referencias

¿Cómo puedo construir imágenes usando marcado HTML?

Archivo binario a codificador / traductor Base64

Recientemente me enteré de las etiquetas fieldset y label. Como arriba, no oculto pero útil para formularios.

<fieldset> explicación

Ejemplo:

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

Puede utilizar la objectetiqueta en lugar de una iframepara incluir otro documento en la página:

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

<optgroup>es uno excelente que la gente a menudo se pierde cuando hace <select>listas segmentadas .

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

es lo que deberías usar en lugar 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 mayoría tampoco es consciente del hecho de que puede distinguir el botón de formulario presionado simplemente dándoles un par de nombre / valor. P.ej

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

En el lado del servidor, el botón real presionado se puede obtener simplemente verificando la presencia del parámetro de solicitud asociado con el nombre del botón. Si no es así null, entonces se presionó el botón.

He visto un montón de innecesarios JS hacks / soluciones para que, por ejemplo, cambiando la forma de acción o cambiar un valor de entrada oculta de antemano en función de pulsar el botón. Es simplemente asombroso.

Además, he visto casi tantos trucos / soluciones alternativas de JS para recopilar los marcados de múltiples casillas de verificación como en las filas de la tabla. En cada selección / verificación de una fila de la tabla, JS agregaría el índice de la fila a algún valor separado por comas en un elemento de entrada oculto que luego se dividiría / analizaría más en el lado del servidor. Eso es el resultado de no saber que puede dar a varios elementos de entrada el mismo nombre pero un valor diferente y que aún puede acceder a ellos como una matriz en el lado del servidor. P.ej

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

El desconocimiento daría a cada casilla de verificación un nombre diferente y omitiría el atributo de valor completo. En algunas situaciones de JS-hack / workaround-free también he visto algo de magia innecesariamente abrumadora en el código del lado del servidor para distinguir los elementos marcados.

Etiqueta 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 no se especifica el foratributo de una <label>etiqueta, se establece implícitamente como el primer hijo <input>, es decir

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

es equivalente a

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

Botón como enlace, sin JavaScript :

Puedes poner cualquier tipo de archivo en la acción del formulario y tienes un botón que actúa como enlace. No es necesario utilizar eventos onclick o similares. Incluso puede abrir el archivo en una nueva ventana pegando un "objetivo" en el formulario. No vi mucho esa técnica en aplicación.

Reemplazar esto

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

con este:

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

La forma más sencilla de actualizar la página en X segundos - META Refresh

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

El valor en el contenido significa los segundos después de los cuales desea que se actualice la página.
[Editar]

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

¡Para hacer una simple redirección!
(Gracias @rlb)

<html>, <head>y<body> las etiquetas son opcionales. Si los omite, el analizador los insertará silenciosamente en los lugares apropiados. Es perfectamente válido hacerlo en HTML (como está implícito <tbody>).

HTML en teoría es una aplicación SGML. Este es probablemente el más corto documento HTML 4 válido :

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

Lo anterior no funciona en ningún lugar excepto en el Validador W3C. Sin embargo, el text/htmldocumento HTML5 válido más corto funciona en todas partes:

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

El langatributo no es muy conocido pero muy útil. El atributo se utiliza para identificar el idioma del contenido en todo el documento o en un solo elemento. Los códigos de idioma se dan en código de idioma ISO de 2 letras (es decir, 'en' para inglés, 'fr' para francés).

Es útil para los navegadores que pueden ajustar la visualización de las comillas, etc. Los lectores de pantalla también se benefician de la lang atributo, así como de los motores de búsqueda.

Sitepoint tiene una buena explicación del langatributo.

Ejemplos

Especifique el idioma en inglés para todo el documento, a menos que otro langatributo en un nivel inferior del DOM lo invalide.

<html lang="en">

Especifique que el idioma en el siguiente párrafo sea sueco.

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

La declaración "! DOCTYPE" . No creo que sea una característica oculta, pero parece que no es muy conocida pero muy útil.

p.ej

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