Descripción general de los nuevos elementos HTML5
Desde 1999, cuando HTML 4.01 se convirtió en un estándar, la web y el uso de la web han cambiado considerablemente. El W3C ha decidido cambiar la sintaxis HTML fundamental de Lenguaje de marcado generalizado estándar (SGML) a XML, y también lenguajes de marcado completamente diferentes como Gráficos vectoriales escalables (SVG), XForms y MathML. Actualmente, algunos componentes HTML 4.01 están desactualizados, nunca se usan o no se usan como se esperaba. Cada parte de los componentes en HTML5 se desplaza o se vuelve a componer. HTML5 ha incluido nuevos elementos para ilustrar la representación, mostrar contenido digital, mejorar el diseño de la página y la funcionalidad general, y varias interfaces nuevas para abordar adecuadamente los requisitos actuales de Internet.
Hay varios elementos nuevos introducidos en HTML5, que ofrecen ciertas características adicionales para desarrollar un sitio deseable e interactivo. Podemos crear su código de manera rápida y eficiente con la ayuda de dichos componentes. Debido a la falta de estructura, muchos documentos HTML bien formados son más difíciles de manejar de lo que deben ser. A través de la evaluación de escalas de encabezado, necesitamos descubrir hacia dónde se dirigen los saltos de segmento. El elemento div identifica barras laterales, pies de página, encabezados, menús de navegación y partes principales de contenido.
Los 10 nuevos elementos HTML5 principales
HTML5 proporciona nuevos elementos para mejorar el diseño del documento.
1)
El elemento especifica una parte de una página que incluye una estructura separada en un documento, sección o sitio web y que se recomienda distribuir o utilizar ampliamente. Puede tratarse de una publicación grupal de un diario o un informe diario en papel, un envío a un boletín en línea, un comentario enviado por un cliente o cualquier otro objeto libre de sustancias.
Ejemplo:
Article Element
EDUCBA
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500, 000+ members across 40+ Countries.
Article Element
EDUCBA
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500, 000+ members across 40+ Countries.
Article Element
EDUCBA
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500, 000+ members across 40+ Countries.
Article Element
EDUCBA
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500, 000+ members across 40+ Countries.
Article Element
EDUCBA
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500, 000+ members across 40+ Countries.
Article Element
EDUCBA
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500, 000+ members across 40+ Countries.
Salida:
- Guarde el código anterior en un archivo con extensión .html.
- Ejecute el archivo html en un navegador y obtendrá el resultado como se muestra en la imagen a continuación.
2)
El elemento indica contenido individual de manera muy similar a categorizaciones, mapas, imágenes, artículos de código y muchos más.
Ejemplo:
Figure Element
EDUCBA es un proveedor global líder de educación basada en habilidades que atiende las necesidades de más de 500, 000 miembros en más de 40 países.
Salida:
El código anterior producirá la salida como se muestra en la imagen a continuación,
3)
El elemento se usa para agregar una descripción de la imagen.
Ejemplo:
Figure Caption Element
EDUCBA es un proveedor global líder de educación basada en habilidades que atiende las necesidades de más de 500, 000 miembros en más de 40 países.
EDUCBA (Corporate Bridge Consultancy Pvt Ltd)
Salida:
El código anterior muestra el resultado como se muestra en la imagen a continuación,
4)
El elemento se utiliza para especificar el encabezado de un documento o una sección en la página. Puede definir más de un encabezado en un solo documento.
Ejemplo:
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
El contenido del documento va aquí …
Salida:
El código anterior muestra el resultado como se muestra en la imagen a continuación,
5)
El elemento se utiliza para especificar la información, como la información del autor, la información de copyright, el contacto, los enlaces a documentos relacionados, el mapa del sitio y muchos más.
Ejemplo:
Footer Element
Copyright © 2019 www.educba.com
Contacto:
Salida:
El código anterior muestra el resultado como se muestra en la imagen a continuación,
6)
El elemento se utiliza para mostrar la información principal, es decir, importante de un documento.
Ejemplo:
Main Element
Información del encabezado
Informacion principal
EDUCBA
EDUCBA es un proveedor global líder de educación basada en habilidades …
Información de pie de página
Salida:
El código anterior producirá la salida como se muestra en la imagen a continuación,
7)
El elemento se utiliza para resaltar o marcar el texto con el color de fondo que atrae al usuario para un texto en particular en el documento.
Ejemplo:
Mark Element
EDUCBA es un proveedor global líder de educación basada en habilidades que atiende las necesidades de más de 500, 000 miembros en más de 40 países.
Salida:
El código anterior muestra el resultado como se muestra en la imagen a continuación,
8)
El elemento se utiliza para especificar los enlaces de navegación en la página. Estos enlaces proporcionan conexiones a otras páginas en un documento.
Ejemplo:
Nav Element
HTML |
CSS |
JAVA |
PHP |
PYTHON
Salida:
El código anterior producirá la salida como se muestra en la imagen a continuación,
9)
El elemento se utiliza para definir la sección independiente o la región específica en el documento.
Ejemplo:
Section Element
Main Article
Section Element
Main Article
Section Element
Main Article
El contenido del encabezado principal se mostrará aquí …
Seccion uno
Se mostrará el contenido de la primera sección …
Sección dos
Se mostrará el contenido de la segunda sección …
Salida:
El código anterior muestra el resultado como se muestra en la imagen a continuación,
10)
La etiqueta es una subparte de la etiqueta que proporciona el texto que se puede mostrar u ocultar cuando el usuario hace clic en el encabezado.
Ejemplo:
Summary Element
EDUCBA - Corporate Bridge Consultancy Pvt Ltd
Es un proveedor global líder de educación basada en habilidades que atiende las necesidades de más de 500, 000 miembros en más de 40 países.
Salida:
Cuando ejecute el código anterior, mostrará el resultado como se muestra a continuación,
Como se muestra en la imagen, haga clic en el encabezado, se mostrará el texto oculto como se muestra en la imagen a continuación,
Conclusión
Hasta ahora, hemos visto cómo los nuevos elementos HTML5 son útiles para diversas tareas en la creación del sitio web. Estos nuevos elementos leen el documento de una manera más precisa y estándar y desarrollan aplicaciones web más complejas y eficientes. Los nuevos elementos HTML5 brindan algunas características adicionales adicionales para generar sitios web interactivos.
Artículos recomendados
Esta es una guía de Html5 New Elements. Aquí discutimos los 10 nuevos elementos principales de Html5 para mejorar el diseño del documento. También puede consultar los siguientes artículos para obtener más información:
- Corrección de color en After Effects
- Las 6 mejores versiones de HTML
- Html5 vs Html4
- XHTML vs HTML5
- ¿Qué es el puente?
- Etiquetas HTML5 | Las 4 etiquetas principales de HTML5