En este artículo, veremos las diversas etiquetas que se migran de HTML4 a HTML5 , además de conocer sus etiquetas alternativas introducidas en HTML5 con sus descripciones e implementación. Hay varias etiquetas que ya no son compatibles con HTML5, en lugar de eso, ha traído nuevas etiquetas en la alternativa de esas etiquetas. Por ejemplo, para agregar un encabezado con texto en negrita, al comienzo del párrafo, debemos declarar el div que contiene la identificación con el encabezado y, en consecuencia, declarar las propiedades CSS requeridas para hacer el encabezado. Ahora, la misma tarea se puede realizar usando la etiqueta <header> , lo que hace que la tarea general sea simple y fácil. Hay muchos más tipos de etiquetas de este tipo, que se describen a continuación:
HTML4 |
HTML5 |
Descripción |
|---|---|---|
| <div id=”encabezado”> |
<encabezado> |
La etiqueta <header> en HTML se usa para definir el encabezado de un documento o una sección, ya que contiene la información relacionada con el título y el encabezado del contenido relacionado. |
| <div id=”menú”> |
<navegación> |
La etiqueta <nav> se usa para declarar la sección de navegación en documentos HTML. |
| <div id=”pie de página”> |
<pie de página> |
La etiqueta <footer> en HTML se usa para definir un pie de página de un documento HTML |
| <div id=”contenido”> |
<sección> |
La etiqueta <Section> define la sección de documentos como capítulos, encabezados, pies de página o cualquier otra sección. La etiqueta de sección divide el contenido en sección y subsecciones |
| <div id=”publicación”> |
<artículo> |
La etiqueta <article> es uno de los nuevos elementos de sección en HTML5. La etiqueta HTML <article> se usa para representar un artículo |
Hay algunas características más de HTML5 que HTML4:
- Las pocas etiquetas HTML antiguas se han eliminado en HTML5, como las etiquetas < blink> , <marquee> , <frame> , <applet> , <center> y <dir>
- HTML5 viene con algunas etiquetas nuevas, como <section> y <footer>, que se pueden usar para diseñar el cuerpo principal de la página web y para agregar los detalles básicos de la página al final de la página, lo que hace que la página web sea más legible para la búsqueda. motores Es opcional de usar y depende del uso para diseñar la página específica.
- Se han dejado de usar algunos atributos, que ahora se logran mediante el uso de propiedades CSS . Por ejemplo, en HTML4, generalmente usamos los atributos de ancho, alto o color con la etiqueta <font> en el código HTML. Ahora en HTML5, podemos reemplazarlos con propiedades de estilo especificando la propiedad de ancho, alto y color con sus valores, que funcionarán de la misma manera con el mismo resultado.
- HTML5 tiene <audio> , <video> para agregar medios a la página web y también admite las etiquetas < canvas> , así como la integración de contenido SVG . Estas etiquetas o elementos facilitan el trabajo general junto con el manejo de contenido multimedia y gráfico en la web sin usar complementos de terceros.
Consulte el artículo Las 10 nuevas funciones principales de HTML5 para obtener más detalles sobre estas funciones. Entenderemos sus diferencias a través de los ejemplos de código.
Ejemplo : este ejemplo describe la implementación de las nuevas etiquetas en HTML5.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible"
content="IE=edge" />
<meta name="viewport"
content="width=device-width,
initial-scale=1.0" />
<style>
body {
background-color: black;
}
h3 {
color: green;
}
h1 {
color: white;
}
nav {
background-color: white;
margin: 0px;
color: green;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
}
li {
float: left;
}
li a {
display: block;
color: green;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
.container {
position: absolute;
top: 25%;
left: 20%;
}
</style>
<title>HTML 5 Tags</title>
</head>
<body>
<nav>
<ul>
<li><a href="/">Algorithms</a></li>
<li><a href="/">DSA</a></li>
<li><a href="/">Placement Prep.</a></li>
<li><a href="/">Courses</a></li>
</ul>
</nav>
<header>
<div class="container">
<h1>GeeksforGeeks</h1>
<h3>Welcome to GeeksforGeeks Learning platform</h3>
</div>
</header>
</body>
</html>
Producción:
etiqueta utilizada en HTML5
Ejemplo: Este ejemplo describe la implementación de las etiquetas en HTML4.
HTML
<!DOCTYPE html >
<html lang="en">
<head>
<meta http-equiv="Content-Type"
content="text/html;charset=utf-8" />
<title>HTML4 Tags</title>
<style>
div#header,
div#footer,
div#content,
div#post {
margin: 5px;
margin-bottom: 15px;
padding: 8px;
}
div#header,
div#footer {
color: green;
background-color: black;
margin-bottom: 5px;
}
</style>
</head>
<body>
<div id="header">
<h1>GeeksforGeeks</h1> </div>
<div class="content">
<p> here will go content of web page </p>
</div>
<div id="footer">
<p>© 2021 GeeksforGeeks. All rights reserved.</p>
</div>
</body>
Producción:
Etiqueta utilizada en HTML4