Original article: The Best HTML Examples and HTML5 Examples

HTML proporciona la estructura de los sitios web. Estos son algunos ejemplos en cómo usar la sintaxis HTML para crear sitios web, incluidos algunos ejemplos de las características  HTML5 más recientes.

Ejemplo del atributo a href

El atributo <a href> se refiere a un destino provisto por un enlace. La etiqueta  a (anchor) está muerta sin el atributo <href>. A veces, en su flujo de trabajo, no desea un enlace en vivo o aún no sabrá el destino del enlace. En este caso, es útil establecer el atributo href a "#" para crear un enlace muerto. El atributo href puede ser utilizar para vincular los archivos locales o archivos en Internet.

Por ejemplo:

<html>
  <head>
    <title>Ejemplo de atributo Href</title>
  </head>
  <body>
    <h1>Ejemplo de atributo Href</h1>
    <p>
      <a href="https://www.freecodecamp.org/contribute/">La pagina de de contribucion de freeCodeCamp</a> te muestra como y donde puedes contribuir a la comunidad y al crecimiento de freeCodeCamp.
    </p>
  </body>
</html>

El atributo <a href> es compatible con todos los navegadores.

Más atributos:

hreflang : Especifica el idioma del recurso vinculado.

target : Especifica el contexto en el que se abrirá el recurso vinculado.

title : Define el título de un vínculo, que aparece al usuario como una información sobre herramientas.

Ejemplos:

<a href="#">This is a dead link</a>
<a href="https://www.freecodecamp.org">This is a live link to freeCodeCamp</a>
<a href="https://html.com/attributes/a-href/">more with a href attribute</a>

Anclajes en-página

También es posible establecer un ancla en un lugar determinado en la página. Para hacer esto, deberá colocar en primer lugar un tab en la ubicación de la página con la etiqueta y el atributo necesario "name" con cualquier descripción palabra-clave, como esta:

<a name="top"></a>

No se requiere ninguna descripción entre etiquetas. Después de eso, puede colocar un enlace que conduzca a esta ancla a cualquier otro lugar en la misma página. Para hacer esto deberías usar la etiqueta con el atributo necesario "href" con un simbolo # (sharp) y la descripción de la palabra-clave ancla, como esto:

<a href="#top">Go to Top</a>

Enlaces de imagen

El  <a href="#">  también puede ser aplicado a imágenes y otros elementos HTML

Ejemplo

<a href="#">
  <img itemprop="image" style="height: 90px;" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
</a>

Ejemplo

El a target ejemplo

El atributo <a target> específica dónde abrir el documento vinculado en una etiqueta  a  (ancla).

Ejemplos:

El atributo target con el valor de “_blank”  abre un documento vinculado en una nueva ventana o tab.

<a href="https://www.freecodecamp.org/" target="_blank">freeCodeCamp</a>

Un atributo target con el valor de “_self” abre el documento vinculado en el mismo marco en el que se hizo clic (este es el valor predeterminado y usualmente no necesita ser especificado).

<a href="https://www.freecodecamp.org/" target="_self">freeCodeCamp</a>
<a href="https://www.freecodecamp.org/">freeCodeCamp</a>

Un atributo target con el valor del “_parent” abre el documento vinculado en el marco principal.

<a href="https://www.freecodecamp.org/" target="_parent">freeCodeCamp</a>

A target attribute with the value of “_top” opens the linked document in the full body of the window.

En atributo target con el valor de   “_top” abre el documento vinculado en el cuerpo completo de la ventana.

<a href="https://www.freecodecamp.org/" target="_top">freeCodeCamp</a>

Un atributo target con el valor de “framename” abre el documento vinculado en un marco con un nombre especificado.

<a href="https://www.freecodecamp.org/" target="framename">freeCodeCamp</a>

El atributo body background ejemplo

Si desea agregar una imagen de fondo en lugar de un color, una solución es el atributo <body background>. Especifica una imagen de fondo por un documento HTML.

Sintaxis:

<body background="URL">

Atributo:

background - URL for background image

Ejemplo:

<html>
  <body background="https://assets.digitalocean.com/blog/static/hacktoberfest-is-back/hero.png">
  </body>
</html>

El atributo body-background es depreciado.

El atributo body-background a caido en deshuso en HTML5. La forma correcta de estilizar el tag <body> es con CSS.

Hay diferentes propiedades CSS usadas para poner el fondo de un elemento. Estas pueden ser usadas para colocar el fondo de una página completa.

El atributo body bgcolor ejemplo

El atributo <body bgcolor> asigna el color de fondo por un documento HTML.

Sintaxis:

<body bgcolor="color"> El valor del color puede ser el nombre de un color (como, morado) o un valor hex (like, #af0000).

Para añadir un color de fondo a una página web puedes usar el atributo <body bgcolor="######">. Especifica un color para que se muestre en el documento HTML

Por ejemplo:

<html>
  <head>
    <title>Body bgcolor Attribute example</title>
  </head>
  <body bgcolor="#afafaf">
    <h1>This webpage has colored background.</h1>
  </body>
</html>

Puedes cambiar de color reemplanzando ###### con un valor hexadecimal. Para colores simples también puedes usar la palabra, como es "red" o "black".

Todos los principales navegadores admiten el atributo <body bgcolor>.

Nota:

  • HTML5 no admite el atributo <body bgcolor>. Usa CSS para este propósito. ¿Cómo? Usando el siguiente código: <body style="background-color: color"> Por supuesto, también puedes hacerlo en un documento separado en lugar del método inline.
  • No uses el valor RGB en el atributo <body bgcolor> porque  rgb() es para CSS solamente, es decir,  no funcionará en HTML.

El atributo div align ejemplo

El atributo <div align=""> es usado para alinear el texto en una etiqueta div a left, right, center o justify.

Por ejemplo:

<html>
  <head>
    <title>Div Align Attribbute</title>
  </head>
  <body>
    <div align="left">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
      labore et dolore magna aliqua.
    </div>
    <div align="right">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
      labore et dolore magna aliqua.
    </div>
    <div align="center">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
      labore et dolore magna aliqua.
    </div>
    <div align="justify">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
      labore et dolore magna aliqua.
    </div>
  </body>
</html>

¡Importante!

Este atributo ya no se admite  en HTML5. CSS es el camino a seguir.

El atributo Div Align puede ser usado para alinear horizontalmente el contenido dentro de un div. En el siguiente ejemplo, el texto se centrará dentro del div.

<div align="center">
  This Text Will Be Centered
</div>

** Este atributo no es compatible con  HTML5  y  CSS Text Align debe ser usado en su lugar.

Ejemplo del atributo font color

Este atributo se utiliza para establecer un color para el texto encerrado en una etiqueta  <font>.

Importante:

Este atributo no es compatible con HTML5. En lugar, este artículo de freeCodeCamp específica un método CSS que se puede utilizar.

Nota:

Un color puede también ser especificado usando un 'código hex' o un 'código rgb', en lugar de usar un nombre.

Ejemplo:

  1. El Atributo de nombre de color
<html>
  <body>
    <font color="green">Font color example using color attribute</font>
  </body>
</html>

Atributo de código Hex

<html>
  <body>
    <font color="#00FF00">Font color example using color attribute</font>
  </body>
</html>

Atributo RGB

<html>
  <body>
    <font color="rgb(0,255,0)">Font color example using color attribute</font>
  </body>
</html>

Ejemplo del atributo font size

Este atributo especifica el tamaño de la fuente, ya sea como un valor numérico o relativo. Los valores numéricos van del 1 al 7, siendo 1 el más pequeño y 3 el predeterminado. También se puede  definir utilizando un valor relativo, como +2 o -3, que lo establece en relación con el valor del atributo de tamaño del elemento <basefont>, o en relación con 3, el valor predeterminado, si no existe ninguno.

Sintaxis:

<font size="number">

Ejemplo:

<html>
  <body>
    <font size="6">This is some text!</font>
  </body>
</html>

Nota:  El tamaño del atributo <font> no es compatible con HTML5. Utilice CSS en su lugar.

Ejemplo del atributo img align

El atributo align de una imagen específica dónde debe alinearse la imagen de acuerdo con el elemento circundante.

Valores de Atributo:

right- Alinea la imagen con la derecha

left - Alinea la imagen a la izquierda

top - Alinea la imagen en la parte superior

bottom - Alinea la imagen en el fondo

middle - Alinea la imagen en el medio.

Por ejemplo:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Img Align Attribute</title>
  </head>
  <body>
    <p>
      This is an example. <img src="image.png" alt="Image" align="middle" /> More text right here
      <img src="image.png" alt="Image" width="100" />
    </p>
  </body>
</html>

También podemos alinear a la derecha si queremos:

<p>This is another example<img src="image.png" alt="Image" align="right" /></p>

Por favor, tenga en cuenta que el atributo align no es compatible en HTML5, y debe usar CSS en su lugar. Sin embargo, todavía es compatible con todos los principales navegadores.

El atributo img width

El atributo HTML  'width' se refiere al ancho de una imagen. El valor en las comillas es la cantidad de píxeles.

Por ejemplo, si ya tiene un enlace a una imagen configurada a través del atributo src, puedes agregar el atributo width de la siguiente manera:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Img Width Attribute</title>
  </head>
  <body>
    <img src="image.png" alt="Image" width="100" />
  </body>
</html>

En el fragmento de código anterior hay una etiqueta de imagen y la imagen tiene un ancho de  100 píxeles. width="100".

Ejemplo del atributo img src

El atributo <img src> se refiere a la fuente de una imagen que desea mostrar. La etiqueta img no mostrará una imagen sin el atributo src. Sin embargo, si se establece la fuente en la ubicación de la imagen, puede mostrar cualquier imagen.

Hay una imagen del logotipo de freeCodeCamp ubicada en: https://avatars0.githubusercontent.com/u/9892522?v=4&s=400

Puede configurar eso como  la imagen usando el atributo src.

<html>
  <head>
    <title>Img Src Attribute Example</title>
  </head>
  <body>
    <img src="https://avatars0.githubusercontent.com/u/9892522?v=4&s=400" />
  </body>
</html>

El cógido de anterior se muestra así:

The freeCodeCamp Avatar

El atributo src es compatible con todos los navegadores.

También puede tener un archivo alojado localmente como su imagen.

Por ejemplo, <img src="images/freeCodeCamp.jpeg>  funcionaría si tuviera una carpeta llamada images que tuviera el freeCodeCamp.jpeg dentro, siempre que la carpeta 'images' estuviera en la misma ubicación que el archivo index.html.

../files/index.html

..files/images/freeCodeCamp.jpeg

Visión general

¿Qué son las entidades HTML?

Las entidades HTML son caracteres que se utilizan para remplazar  caracteres reservados en HTML o para caracteres que no aparecen en el teclado. Algunos caracteres están reservados en HTML. Si utiliza los signos menos que (<) o más que (>) en su texto, el navegador podría confundirlos con etiquetas.

¿Para qué se usan?

Como se mencionó acerca de las entidades HTML se utilizan para reemplazar los caracteres reservados que están reservados por HTML.

¿Cómo los utilizamos?

Un carácter entidad tiene un aspecto similar a esto:

<!-- format &[entity_name]; -->
<!-- example for a less-than sign (<) -->
&lt;

O

<!-- &#[entity_number]; -->
<!-- example for a less-than sign (<) -->
&#60;

Guía de referencia

Esto no es una lista exhaustiva, pero los enlaces a continuación podrán brindarle más entidades  si las que se encuentran a continuación no funcionan para sus necesidades. Happy Coding :bowtie:

Character	Entity Name	Entity Number	Description
&#32;	Space
!		&#33;	Exclamation mark
”		&#34;	Quotation mark
#		&#35;	Number sign
$		&#36;	Dollar sign
¢	&cent;	&#162;	Cent sign
€	&euro;	&#8364;	Euro sign
£	&pound;	&#163;	GBP sign
¥	&yen;	&#165;	Yen sign
%		&#37;	Percent sign
&	&amp;	&#38;	Ampersand
’		&#39;	Apostrophe
(		&#40;	Opening/Left Parenthesis
)		&#41;	Closing/Right Parenthesis
*		&#42;	Asterisk
+		&#43;	Plus sign
,		&#44;	Comma
-		&#45;	Hyphen
.		&#46;	Period
/		&#47;	Slash
©	&copy;	&#169;	Copyright
®	&reg;	&#174;	Registered Trademark
”	&quot;	&#34;	double quotation mark
>	&gt;	&#62;	Greater-than sign
<	&lt;	&#60;	Less-than sign
•	&bull;	&#8226	Bullet point

Ejemplo de formulario HTML

Básicamente, los formularios se utilizan para recolectar datos ingresados por un usuario, que luego se envían al servidor para su posterior procesamiento. Se pueden usar para diferentes tipos de entradas de usuario, como nombre, correo electrónico, etc.

El formulario contiene elementos de control que se envuelven alrededor de etiquetas <form></form>, como input, que puede tener tipos como:

  • text
  • email
  • password
  • checkbox
  • radio
  • submit
  • range
  • search
  • date
  • time
  • week
  • color
  • datalist

Ejemplo de código:

<form>
  <label for="username">Username:</label>
  <input type="text" name="username" id="username" />
  <label for="password">Password:</label>
  <input type="password" name="password" id="password" />
  <input type="radio" name="gender" value="male" />Male<br />
  <input type="radio" name="gender" value="female" />Female<br />
  <input type="radio" name="gender" value="other" />Other
  <input list="Options" />
  <datalist id="Options">
    <option value="Option1"></option>
    <option value="Option2"></option>
    <option value="Option3"></option>
  </datalist>

  <input type="submit" value="Submit" />
  <input type="color" />
  <input type="checkbox" name="correct" value="correct" />Correct
</form>

Otros elementos que el formulario puede contener:

  • textarea - Es un cuadro de varias líneas, se usa con mayor frecuencia para agregar texto, por ejemplo, comentario. El tamaño del área se define por el número de filas y columnas.
  • select - Junto con la etiqueta <option></option> crea un menú de selección desplegable.
  • button - El elemento botón se puede utilizar para definir un botón en el que se puede hacer clic.

MÁS INFORMACIÓN SOBRE FORMULARIOS HTML

Los formularios HTML son necesarios cuando deseas recolectar algunos datos del visitante del sitio. Por ejemplo, durante el registro del usuario, le gustaría recopilar  información como nombre, dirección de correo electrónico, tarjeta de crédito, etc.

Un formulario tomará la entrada de del visitante del sitio y luego la publicará en una aplicación de back-end como CGI, ASP Script o PHP script, etc. La aplicación back-end realizará el procesamiento requerido de los datos pasados en función de la lógica empresarial definida dentro de la aplicación.

Hay varios elementos de formulario disponibles, como campos de texto, campos de área de texto, menús desplegables, botones de radio, casillas de verificación, etc.

La etiqueta HTML <form> es usa para crear un formulario en HTML y tiene la siguiente sintaxis -

<form action="Script URL" method="GET|POST">form elements like input, textarea etc.</form>

Si el método form no está definido, por defecto será "GET".

La etiqueta form también puede tener un atributo llamado "target" que especifica dónde se abrirá el enlace. Se puede abrir en la pestaña del navegador, en un marco, o en la actual ventana.

El atributo action define la acción que se realizará cuando se envíe formulario. Normalmente, los datos del formulario se envían a una página web  en el URL del script cuando el usuario hace clic en el boton submit Enviar. Si se omite el atributo action, la acción se establece en la página actual.

Ejemplo de audio HTML5

Antes HTML5, los archivos de audio tenían que reproducirse en un navegador usando un complemento como Adobe Flash. El HTML

El siguiente fragmento de código agrega un archivo de audio con el nombre de archivo tutorial.ogg o tutorial.mp3. El elemento indica archivos de audio alternativos entre los que puede elegir el navegador. El navegador utilizará el primer formato reconocido.

Ejemplo 1

<audio controls>
  <source src="tutorial.ogg" type="audio/ogg" />
  <source src="tutorial.mp3" type="audio/mpeg" />
  Your browser does not support the audio element.
</audio>

Ejemplo 2

<audio src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3" controls loop autoplay></audio>

El atributo controls incluye controles de audio como reproducir, pausa y volumen. Si no utiliza este atributo, no se mostrará ningún control.

El elemento <source> permite indicar archivos de audio alternativos entre los que puede elegir el navegador. El navegador utilizará el primer formato que reconozca. El texto entre las etiquetas <audio> y </audio> puede mostrarse en el navegador que no admita el elemento   <audio> HTML5 .

El atributo autoplay reproducirá automáticamente su archivo de audio en segundo plano. Se considera mejor práctica permitir que los visitantes elijan reproducir un audio.

El atributo precarga indica lo que debe hacer el navegador si el reproductor no está configurado para reproducción automática.

El atributo loop reproducirá el archivo de audio en un bucle continuo si se menciona.

Como se trata de html5, algunos navegadores no lo admiten. Puedes comprobarlo en https://caniuse.com/#search=audio

Ejemplo de elementos semánticos HTML5

Los elementos semánticos de HTML describen claramente su significado de una manera legible por humanos y máquinas. Elementos como <header>, <footer> y <article> todos se consideran semánticos porque describen con precisión el propósito del elemento y el tipo de contenido que hay dentro de ellos.

Una historia rápida

HTML fue originalmente creado como un lenguaje de marcado para describir documentos en los inicios de Internet. A medida que el Internet creció y fue adoptado por más personas, sus necesidades cambiaron. Donde el internet originalmente fue destinado para compartir documentos cinetificos, ahora las personas también quería compartir otras cosas. Muy rápidamente, la gente empezó a querer hacer que la web se viera mejor. Debido a que la web no se creo inicialmente para ser diseñada, los programadores utilizaron diferentes trucos para diseñar las cosas de diferentes maneras. En lugar de usar  el <table></table>  para describir información usando una tabla, los programadores las usarían para colocar otros elementos en la página. A medida que avanzaba el uso de diseños diseñados visualmente , los programadores comenzaron a usar una etiqueta genérica "no semántica" como <div>. A menudo darían a estos elementos un atributo de  class o id para describir su propósito. Por ejemplo, en lugar de  <header>  a menudo se escribía como  <div class="header">. Como HTML5 es todavía relativamente nuevo, este uso de elementos no semánticos sigue siendo muy común en los sitios web de hoy.

Lista de nuevos elementos semánticos

Los elementos semánticos agregados en HTML5 son:

  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>

Elementos como <header>, <nav>, <section>, <article>, <aside>, y<footer> actúan más o menos como elementos  <div>. Agrupan otros elementos  en secciones de página. Sin embargo, cuando una etiqueta <div> puede contener cualquier tipo de información, es fácil identificar que tipo de información iría en una región semántica.

Un ejemplo de diseño de elementos semánticos por w3schools.

Semantic elements laying out a page by w3schools

Beneficios de elementos semánticos

Para ver los beneficios de los elementos semánticos, aquí hay dos piezas de código HTML. El primer bloque de código utiliza elementos semánticos.

<header></header>
<section>
  <article>
    <figure>
      <img />
      <figcaption></figcaption>
    </figure>
  </article>
</section>
<footer></footer>

Mientras que este segundo bloque de código utiliza elementos no semánticos:

<div id="header"></div>
<div class="section">
  <div class="article">
    <div class="figure">
      <img />
      <div class="figcaption"></div>
    </div>
  </div>
</div>
<div id="footer"></div>

En primer lugar, es mucho más fácil de leer. Esto es probablemente la primera cosa que notará al mirar el primer bloque de código usando elementos semánticos. Este es un pequeño ejemplo, pero como programador puedes estar leyendo cientos o miles de líneas de código. Cuanto más fácil sea de leer y entender ese código, más fácil será su trabajo.

Tiene mayor accesibilidad. No eres el único que encuentra  los elementos semánticos más fáciles de entender. Los motores de búsqueda y las tecnologías de asistencia (como los lectores de pantalla para usuarios con discapacidad visual) también pueden comprender el contexto y contenido de su sitio web, lo que significa una mejor experiencia para sus usuarios.

En general, los elementos semánticos también conducen a un código más consistente. Al crear un encabezado usando elementos no semánticos, diferentes programadores pueden escribirlo  como <div class="header">, <div id="header">, <div class="head">, o simplemente <div>. Hay muchas formas en las que puedes crear un elemento header, y todas dependen de la preferencia personal del programador. Al crear un elemento semántico estándar, lo hace más fácil para todos.

Desde octubre 2014; HTML4 se actualizó a HTML5, junto con algunos "nuevos" elementos "semánticos". Hasta el día hoy, puede que algunos de nosotros todavía podríamos estar confundidos en cuanto a porque tantos elementos diferentes que no parecen mostrar cambios importantes.

<section> y <article>

¿Cuál es la diferencia?, te preguntarás. Ambos elementos se utilizan para seccionar un contenido, y sí,  definitivamente se pueden usar indistintamente. Es una cuestión de en qué situación. HTML4 ofrecía solo un tipo de elemento contenedor, que es <div>. Si bien esto todavía se usa en HTML5, HTML5 nos proporcionó con <section> y  <article> y de cierta forma remplazar <div>.

Los elementos <section> y  <article>  son conceptualmente similares e intercambiables. Para decidir cuál de estos se deben elegir, tome nota de lo siguiente:

  1. Se pretende que un artículo sea distribuible o reutilizable de forma independiente.
  2. Una sección es una agrupación temática de contenido.
<section>
  <p>Top Stories</p>
  <section>
    <p>News</p>
    <article>Story 1</article>
    <article>Story 2</article>
    <article>Story 3</article>
  </section>
  <section>
    <p>Sport</p>
    <article>Story 1</article>
    <article>Story 2</article>
    <article>Story 3</article>
  </section>
</section>

<header> y <hgroup>

El elemento <header>  generalmente se encuentra en la parte superior de un documento, una sección o un artículo y generalmente contiene el encabezado principal y algunas herramientas de navegación y de búsqueda.

<header>
  <h1>Company A</h1>
  <ul>
    <li><a href="/home">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact us</a></li>
  </ul>
  <form target="/search">
    <input name="q" type="search" />
    <input type="submit" />
  </form>
</header>

El elemento <hgroup> debe usarse donde desee un encabezado principal con uno o más subtítulos.

<hgroup>
  <h1>Heading 1</h1>
  <h2>Subheading 1</h2>
  <h2>Subheading 2</h2>
</hgroup>

RECUERDA, que el elemento <header> puede contener cualquier contenido, pero el elemento <hgroup> solo puede contener otros encabezados, es decir <h1>  a  <h6>  e incluido <hgroup>.

<aside>

El elemento <aside> está diseñado a contenido que no es parte del flujo del texto en el cual aparece, sin embargo, todavía está relacionado de alguna manera.  Esto de <aside> como una barra lateral de su contenido principal.

<aside>
  <p>
    This is a sidebar, for example a terminology definition or a short background to a historical
    figure.
  </p>
</aside>

Antes de HTML5, nuestros menús eran creados con <ul> y <li>. Ahora, junto con estos, podemos separar los elementos de nuestro menú con un <nav>, para navegar entre sus páginas. Puede tener cualquier cantidad de elementos <nav> en una página, por ejemplo, es común tener una navegador global en la parte superior (en el <header>) y un navegación local como barra lateral(en un elemento <aside>).

<nav>
  <ul>
    <li><a href="/home">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact us</a></li>
  </ul>
</nav>

Si hay un <header>  debe de haber un <footer>. Un <footer> es genralmente encontrado en el fondo de un  documento, una sección, o un artículo. Al igual que el <header> el contenido es generalmente metainfromación, como detalles del autor, información legal, y /o links a infromación relacionada. También es válido incluir elementos <section> dentro de un pie de página.

<footer>&copy;Company A</footer>

<small>

El elemento <small> a menudo aparece dentro de un elemento  <footer> o <aside> que normalmente contiene información de derechos de autor o de avisos legales, y otras letras pequeñas similares.  Sin embargo, esto no pretende hacer el texto más pequeño. Simplemente, describe su contenido, no prescribir la presentación.

<footer><small>&copy;Company A</small> Date</footer>

<time>

El elemento <time> permite adjuntar una fecha  ISO 8601 inequívoca a una versión legible por humanos de esa fecha.

<time datetime="2017-10-31T11:21:00+02:00">Tuesday, 31 October 2017</time>

¿Por qué molestarnos con <time>? Mientras los humanos pueden leer la hora que puede eliminar la ambigüedad a través del contexto de manera normal, las computadoras pueden leer la fecha ISO 8601 y ver la fecha, la hora, y la zona horaria.

<figure> y <figcaption>

<figure> es para envolver el contenido de su imagen a su alrededor, y <figcaption> es para subtitular su imagen.

<figure>
  <img src="https://en.wikipedia.org/wiki/File:Shadow_of_Mordor_cover_art.jpg" alt="Shadow of Mordor" />
  <figcaption>Cover art for Middle-earth: Shadow of Mordor</figcaption>
</figure>

Ejemplo de vídeo HTML5

Antes de HTML5, para reproducir un video en una página web, se necesitaba usar un complemento, como Adobe Flash Player. Con la introducción de HTML5, ahora puede colocarlo directamente en la  página misma. El HTML.

Para colocar el archivo de video en la página web, simplemente agregue este fragmento de código y cambie el src de archivo de audio.

<video controls>
  <source src="tutorial.ogg" type="video /ogg" />
  <source src="tutorial.mp4" type="video /mpeg" />
  Your browser does not support the video element. Kindly,update it to latest version.
</video>

El atributo controles incluye los controles de vídeo, similares a la reproducción, la pausar, y el volumen.

Esta función es compatible con todos los navegadores modernos/actualizados. Sin embargo, no todos admiten el mismo formato de video. Mi recomendación para una amplia gama de compatibilidad es MP4, ya que es el formato más ampliamente aceptado. También hay otros dos formatos (WebM y Ogg) que son compatibles con Chrome, Firefox, y Opera.

El elemento permite indicar los archivos de video alternativos entre los cuales el navegador puede elegir. El navegador utilizará el primer formato que reconozca. En HTML5, hay tres formatos de videos compatibles: MP4, WebM, y Ogg.

El texto entre etiquetas solo se mostrará en los navegadores que no lo admitan.

Hay varios elementos diferentes de etiquetas de video, muchas de estas explicaciones son basan en los documentos web de Mozilla(enlace a continuación). Hay aún más si hace clic en el enlace a continuación.

autoplay

"autoplay" se puede establecer true o false. Para establecerlo en true agrégualo a la etiqueta, si no está presente en la etiqueta, se establece en false. Si se establece true el video comenzará a reproducirse tan pronto como se haya almacenado en búfer lo suficiente para que pueda reproducirse. Muchas personas encuentran que la reproducción automática de videos es pertubadora o molesta, así que use esta función con moderación. También tenga en cuenta que algunos navegadores móviles, como Safari para iOS, ignoran este atributo.

<video autoplay>
  <source src="video.mp4" type="video/mp4" />
</video>

poster

El atributo "poster" es la imagen que se muestra en el vídeo hasta que el usuario hace clic para reproducirlo.

<video poster="poster.png">
  <source src="video.mp4" type="video/mp4" />
</video>

controls

El atributo "controls" se puede establecer true o false y contralara si aparecen controles  como el botón de reproducir/pausa o el control deslizante de volumen. Para establecerlo en true, agréguelo a la etiqueta, si no está presente en la etiqueta, se establece en false.

<video controls>
  <source src="video.mp4" type="video/mp4" />
</video>

Hay muchos más atributos que se pueden agregar que son opcionales para personalizar el reproductor de video en la página. Para obtener más información, haga clic en los enlaces a continuación.

Ejemplo de almacenamiento Web HTML5

El almacenacmiento Web permite a las aplicaciones web almacenar hasta 5MB de información en el almacenamiento del navegador por origen (por dominio y protocolo).

Tipos de Almacenamiento Web

Hay dos objetos para almacenar datos en el cliente:

window.localStorage: almacena datos sin fecha de caducidad y dura hasta que se eliminan.

// Store Item
localStorage.setItem("foo", "bar");

// Get Item
localStorage.getItem("foo"); //returns "bar"

window.sessionStorage:  almacena datos para una sesión, donde los datos se pierden cuando se cierra el navegador/pestaña del navegador.

// Store Item
sessionStorage.setItem("foo", "bar");

// Get Item
sessionStorage.getItem("foo"); //returns "bar"

Dado que la  implementación actual solo admite asignaciones de cadena a cadena, debe serializar y des serializar otras estructuras de datos.

Puede hacerlo usando JSON.stringify() and JSON.parse().

Por ejemplo, para el JSON dado

var jsonObject = { 'one': 1, 'two': 2, 'three': 3 };

Primero convertimos el objeto JSON en cadena y lo guardamos en el almacenamiento local:

localStorage.setItem('jsonObjectString', JSON.stringify(jsonObject));

Para obtener el objeto JSON de la cadena guardada en el almacenamiento local:

var jsonObject = JSON.parse(localStorage.getItem('jsonObjectString'));

Ejemplo de enlaces mailto

En enlace mailto es un tipo de hipervínculo (<a href=""></a>) con parámetros especiales que permite especificar destinatarios adicionales, una línea de asunto y/o un texto de cuerpo.

La sintaxis básica con un destinatario es:

<a href="mailto:friend@something.com">Some text</a>

¡Más perzonalización!

Agregar un asunto a ese correo

Si desea agregar un asunto específico a ese correo, tenga cuidado de agregar %20 o + en todas partes donde haya un espacio en la línea de asunto. Una manera fácil de asegurarse de que está correctamente formateado es utilizar un decodificador / codificador de URL.

Agregando el cuerpo de texto:

Del mismo modo, puedes agregar un mensaje específico en la parte del cuerpo del correo electrónico: Nuevamente, los espacios deben remplazarse por   %20 o + . Después el parámetro del sujeto, cualquier parámetro adicional debe ser precedido de &.

Ejemplo: Supongamos que quieres que los usuarios envíen un correo electrónico a sus amigos sobre su progreso en Free Code Camp:

Dirección: vacía

Sujeto:  Grandes noticias

Cuerpo: Me estoy convirtiendo en desarrollador

Tu enlace html ahora:

<a href="mailto:?subject=Great%20news&body=I%20am%20becoming%20a%20developer">Send mail!</a>

Aquí, hemos dejado mailto vacío (mailto:?). Esto abrirá el cliente de correo electrónico del usuario y el usuario agregará la dirección del destinatario ellos mismos.

Agregar más destinatarios:

De la misma manera, puede agregar parámetros CC y bcc. ¡Separa cada dirección por una coma!

Los parámetros adicionales deben ir precedidos de &.

<a href="mailto:firstfriend@something.com?subject=Great%20news&cc=secondfriend@something.com,thirdfriend@something.com&bcc=fourthfriend@something.com">Send mail!</a>

Gracias por usar esta referencia HTML