Nuevo en HTML5

Estas son las nuevas etiquetas en HTML5.

• Progress
• Meter
• Time
• Data
• Datalist
• Optgroup
• Output
• Legend
• Param
• Object
• Dialog
• Slot
• Var

1. Progress

Muestra una barra de progreso de una tarea. VALUE debe estar entre MIN y MAX.

<Progress VALUE=50 MIN=0 MAX=100></Progress>

Este texto se muestra si el navegador no soporta etiqueta

2. Meter

Muestra una barra horizontal de valores o rangos.

<Meter VALUE=20 MIN=0 LOW=20 OPTIMUN=50 HIGHT=80 MAX=100></Meter>

• Bajo:
• Optimo:
• Alto:

3. Time

Indica al navegador que es una hora. Se considera una etiqueta semántica.

<p>Tengo una cita a las <Time>8:00</Time> hrs</p>
<p>Tengo una cita <Time datetime="2020-02-14 18:00">por San Valentin</Time>.</p>

Tengo una cita a las 8:00 hrs

Tengo una cita por San Valentin.

La etiqueta <Time> no se muestra como algo especial en ninguno de los principales navegadores.

4. Data

Se usa para agregar una traducción legible por máquina de un contenido determinado. Este elemento proporciona un valor legible por máquina para procesadores de datos y un valor legible por humanos para renderizar en un navegador.

<UL>
<LI><data value=21053>Tomate</data></li>
<LI><data value=21054>Rabano</data></li>
<LI><data value=21055>Pepino</data></li>
</UL>

5. Datalist

Especifica una lista de opciones predefinidas para un elemento <input>. La etiqueta <datalist> se usa para proporcionar una función de "autocompletar" para elementos <input>. Los usuarios verán una lista desplegable de opciones predefinidas a medida que ingresan datos. El atributo id del elemento debe ser igual al atributo de lista del elemento <input> (esto los une).

<label for=browser>Elige tu navegador de la lista:</label>
<input list=nav name=nav id=nav>
<datalist id=nav>
  <option value=Chrome>
  <option value=Firefox>
  <option value=Opera>
  <option value=Safari>
  <option value=Edge>
</datalist>

6. Optgroup

se usa para agrupar opciones relacionadas en un elemento <SELECT> (lista desplegable). Si tiene una larga lista de opciones, los grupos de opciones relacionadas son más fáciles de manejar para un usuario.

<label for=cars>Choose a car:</label>
<select name=cars id=cars>
  <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>

7. Output

Se usa para representar el resultado de un cálculo (como uno realizado por un script).

<FORM onInput="x.value = parseInt(a.value)+parseInt(b.value)">
  <INPUT TYPE=range ID=a VALUE=50>
  +<INPUT TYPE=number ID=b VALUE=25>
  =<OUTPUT NAME=x FOR='a b'></OUTPUT>
</FORM>

8. Legend

Define un título para el elemento <fieldset>.

<form action=action.php>
   <fieldset>
      <legend>Personalia:</legend>
      <label for=fname>Nombre:</label>
      <input type=text id=nom name=nom><br><br>
      <label for=lname>Apellido:</label>
      <input type=text id=ape name=ape><br><br>
      <label for=email>Correo:</label>
      <input type=email id=email name=email><br><br>
      <label for=birthday>Cumpleaños:</label>
      <input type=date id=cumple name=cumple><br><br>
      <input type=submit value=Submit>
   </fieldset>
</form>

9. Param

se usa para definir parámetros para un elemento <objeto>.

<object data=himno.wav>
<param name=autoplay value=true>
</object>

10. Object

Define un contenedor para un recurso externo. El recurso externo puede ser una página web, una imagen, un reproductor multimedia o una aplicación de complemento.

Esta etiqueta fue diseñada originalmente para incrustar complementos del navegador. Los complementos son programas informáticos que amplían la funcionalidad estándar del navegador. Los complementos se han usado para muchos propósitos diferentes

• Ejecute applets de Java
• Ejecute controles ActiveX
• Mostrar películas Flash
• Mostrar mapas
• Analizar en busca de virus
• Verificar una identificación bancaria

<object data=logo.jpg width=300 height=200></object>

Para incrustar una imagen, es mejor usar la etiqueta <img>. Para incrustar HTML, es mejor usar la etiqueta <iframe>. Para incrustar audio o video, es mejor usar las etiquetas <audio> y <video>.

11. Dialog

Define un cuadro de diálogo o subventana. Facilita la creación de cuadros de diálogo y modales emergentes en una página web.

<dialog open>This is an open dialog window</dialog>

12. Slot

13. Ruby

Etiqueta especifica una anotación Rubí. Una anotación Ruby ​​es un pequeño texto adicional, adjunto al texto principal para indicar la pronunciación o el significado de los caracteres correspondientes. Este tipo de anotación se usa a menudo en publicaciones japonesas. Usar <ruby> junto con <rt> y <rp>: y la etiqueta <ruby> consta de uno o más caracteres que necesitan una explicación/pronunciación, y un elemento <rt> que proporciona esa información y un elemento opcional <rp> que define qué mostrar navegadores que no admiten anotaciones en rubí.

14. Var

Etiqueta se usa para definir una variable en la programación o en una expresión matemática. El contenido dentro generalmente se muestra en cursiva.

Esta etiqueta no está en desuso. Sin embargo, es posible lograr un efecto más rico usando CSS.