Anuncio

HTML5 es el último y mejor ¿Qué es HTML5 y cómo cambia la forma en que navego? [MakeUseOf explica]En los últimos años, es posible que haya escuchado el término HTML5 de vez en cuando. Ya sea que sepa algo sobre desarrollo web o no, el concepto puede ser algo nebuloso y confuso. Obviamente,... Lee mas versión del lenguaje de marcado más utilizado en la web. Hay algunos cambios importantes con respecto a la última versión del idioma, y ​​si no los está utilizando, se está perdiendo alguna funcionalidad realmente genial.

No tenemos espacio para cubrir cada elemento nuevo en la quinta versión de HTML, pero estos nueve son algunos de los más importantes. Para obtener más información sobre los nuevos elementos y API en HTML5, asegúrese de echa un vistazo a W3Schools.

Una introducción a los elementos semánticos

Como gran parte de Internet, HTML5 ha cambiado para centrarse en la semántica. Ahora, en lugar de las etiquetas que simplemente se usan para formatear, también se usan para indicar a los navegadores

instagram viewer
y motores de búsqueda Los 7 principales motores de búsqueda semántica como alternativa a Google Lee mas El significado de lo que rodean.

Por ejemplo,

simplemente le dice a un navegador que contiene un párrafo.

, que discutiremos momentáneamente, le dice a un navegador que contiene el contenido principal de la página.

La web semántica aún se está desarrollando, y solo hemos comenzado a arañar la superficie de lo que puede hacer. HTML5 está ayudando a traer marcado semántico Qué es el marcado semántico y cómo cambiará Internet para siempre [Explica la tecnología] Lee mas a una porción mucho más grande de internet, y eso solo puede ser bueno para el futuro del procesamiento semántico.

1.

los

la etiqueta define "contenido independiente y autónomo". El ejemplo más fácil es, por supuesto, un artículo. Para este artículo en particular, abriremos la etiqueta antes de la introducción y la cerraremos después de la conclusión.

Todo el texto en su sección independiente.

Pero también hay otras formas de usarlo. Por ejemplo, muchos blogs de cocina incluyen historias personales sobre cómo surgió una receta o por qué es importante para el escritor. Luego es seguido por la receta en sí. Podría argumentar que cada uno de estos elementos podría estar solo.

En un foro, cada publicación o tema podría considerarse autónomo, y cada uno podría marcarse con su propio

etiqueta. En su mayor parte, se utilizará en el contenido principal de una página. Pero tenga en cuenta que también puede usarlo de manera más creativa.

2.

Relacionado cercanamente a

es
. Esto define una "agrupación temática de contenido, generalmente con un encabezado". Entonces
estará adentro
… ¿derecho?

No necesariamente. W3 señala que depende de la estructura de su sitio. Es posible que tenga contenido autónomo en diferentes secciones de su página (piense en la página principal de un sitio de noticias, por ejemplo). Entonces puede tener secciones dentro de ese artículo.

Por qué necesitas un DAC

Todo suena mejor

Cómo configurar un DAC

Esto es lo que debes hacer.. .

Incluso puede tener secciones dentro de secciones si se ajusta a su página. Recuerde que una sección es simplemente una "agrupación temática de contenido", y encontrará muchos lugares para usarla.

3.

Este elemento "debe usarse como contenedor para el contenido introductorio". En resumen, es la parte de su página que ayuda a las personas a comprender lo que están a punto de leer.

Pero no se deje engañar: puede usar este contenedor más de una vez. Por ejemplo, puede usarlo para identificar el título de la página y el párrafo introductorio de su publicación de blog. Pero también podría usarlo para marcar el contenido introductorio de cada sección.

Todo lo que necesitas saber sobre los DAC

Aquí hay una introducción útil a los DAC ...

El resto de tu artículo va aquí.

Las secciones de encabezado generalmente contienen al menos una etiqueta de encabezado: H1, H2, etc. No tienen que hacerlo, pero en general, si está usando una etiqueta de encabezado, es muy probable que incluya contenido de encabezado.

4.

W3 dice que las etiquetas de pie de página generalmente contienen el "autor del documento, información de copyright, enlaces a los términos de uso, información de contacto, etc." Puedes pensar en ello como el "servicio de limpieza".

La documentación también establece que puede tener más de una sección de pie de página en su página. Sin embargo, probablemente sea una buena idea mantener toda esta información en una sola ubicación.

5.

Esta etiqueta contiene los enlaces de navegación para una página determinada. Tenga en cuenta que solo la sección de navegación obtiene esta etiqueta, no todos los enlaces de su página. Es para barras de navegación y herramientas similares.

Esta es una etiqueta realmente simple: eso es todo. Úselo para definir la sección de navegación y no lo vuelva a usar en su página.

6.

Uno de los elementos nuevos más interesantes en HTML5 es el lado. W3 le da la definición algo inútil de "algo de contenido aparte del contenido en el que se coloca".

En resumen, un aparte es todo lo que está relacionado (pero separado) de la información circundante. Podría ser una barra lateral que agregue detalles a su contenido. Cuando se usa dentro de un conjunto de

etiquetas, proporciona información adicional que no es necesaria para comprender el contenido principal.

Por ejemplo, si hubiéramos incluido una barra lateral en este artículo que proporciona información sobre el historial de HTML5, sería un aparte.

Pero el

El artículo principal va aquí. El artículo continúa aquí.

Debido a que hay múltiples usos para esta etiqueta, puede ser confusa. Si tiene en cuenta que es "contenido secundario" y que no siempre necesita ser una barra lateral, tendrá una mejor idea de cómo usarlo.

7.

Muchos sitios web tienen información que debe mostrarse, pero no de manera destacada. Tal vez sea la información de copyright de una foto. O la letra pequeña en un concurso. Este tipo de información es exactamente para qué sirve la etiqueta de detalles.

Cuando utiliza la etiqueta de detalles, crea texto oculto que se puede mostrar fácilmente. Aquí hay un ejemplo:

Haga clic aquí para ver información.

Aquí hay información más detallada que no necesita de inmediato.

Simplemente haga clic en la flecha para obtener los detalles. Sencillo. Crearlo es igual de fácil. Aquí está el código utilizado para el ejemplo anterior:

Haga clic aquí para ver información. Aquí hay información más detallada que no necesita de inmediato.

los

La etiqueta define la oración que se mostrará, mientras que los demás contenidos están ocultos. Tenga en cuenta que puede usar otras etiquetas dentro de la sección de detalles: encabezados, secciones, etc.

Hay otros cosas geniales que puedes hacer con HTML 8 efectos HTML geniales que cualquiera puede agregar a su sitio webNo tiene que saber CSS o PHP para construir un sitio elegante. Usa estos trucos HTML geniales para generar efectos increíbles. Lee mas , también, incluso si no conoce mucho CSS o JSON.

8-9.
y

No te preocupes, el la etiqueta que has estado usando durante años no desaparecerá.

rodea la etiqueta de la imagen y le permite al navegador saber que es una imagen, un diagrama, una lista de códigos u otra figura independiente.

Si se elimina una figura de la página, no afectará el flujo del contenido.

va dentro de la etiqueta de la figura y especifica un título para una imagen. Puede verse más o menos así:

Este es nuestro logo!

Esto le brinda una forma integrada de agregar un subtítulo a sus imágenes. Ya no es necesario que revises tu CMS.

Aproveche el poder de HTML5

Los nuevos elementos en HTML5 agregan mucha potencia, especialmente para fines semánticos. Hay elementos adicionales para formatear, medidas escalares, progreso de tareas y más. Puedes ver todos los elementos nuevos en W3Schools.

Pero si puede dominar estos nueve, estará en camino de hacer un buen uso de HTML5. Y si eres nuevo en HTML, asegúrate de revisar estos ejemplos de código 17 ejemplos simples de código HTML que puedes aprender en 10 minutos¿Quieres crear una página web básica? Aprenda estos ejemplos HTML y pruébelos en un editor de texto para ver cómo se ven en su navegador. Lee mas !

¿Has comenzado a usar HTML5? ¿Qué elementos nuevos encuentras más útiles? ¡Comparte tus pensamientos en los comentarios a continuación!

Dann es un consultor de estrategia de contenido y marketing que ayuda a las empresas a generar demanda y clientes potenciales. También bloguea sobre estrategia y marketing de contenidos en dannalbright.com.