Un elemento HTML es todo, desde de la etiqueta de inicio, su contenido y la etiqueta de cierre.
Elementos HTML
El elemento HTML es todo, desde la etiqueta de inicio hasta la etiqueta final:
<tagname>Content</tagname>
Ejemplo:
<h1>Notion for education</h1>
<p>Your notes, research, tasks, and more — all in one place. Free for students and teachers, with discounts for teams and schools.</p>
<a href="#">Try Notion free</a>
| Etiqueta Inicio | Contenido | Etiqueta Cierre |
<h1> | Notion for education | </h1> |
<p> | Your notes, research, tasks, and | </p> |
<br> | Vacío | Vacío |
Nota: algunos elementos HTML no tienen contenido (ej.
<br>,<hr>). Estos elementos son llamados elementos vacíos. Los elementos vacíos no tienen una etiqueta de cierre.
Elementos anidados
Los elementos HTML pueden estar anidados (significa que los elementos pueden contener otros elementos)
Todos los documentos HTML se conforman de elementos HTML anidados.
Ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<!-- Información meta para el navegador -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titulo pagina</title>
</head>
<body>
<!-- Información visible para el usuario -->
<h1>Notion for education</h1>
<p>Your notes, research, tasks, and more — all in one place. Free for students and teachers, with discounts for teams and schools.</p>
</body>
</html>
Ejemplo explicado:
El elemento
<html>es la raíz del elemento y define todo el documento HTML.Tiene una etiqueta de inicio
<html>y una etiqueta de cierre</html>Dentro de la etiqueta
<html>hay un elemento<body>:
<body>
<h1>Notion for education</h1>
<p>Your notes, research, tasks, and more — all in one place. Free for students and teachers, with discounts for teams and schools.</p>
</body>
El elemento
<body>define el cuerpo del documento.Tiene una etiqueta de inicio
<body>y una etiqueta final</body>.Luego, dentro del elemento
<body>hay otros dos elementos:<h1>y<p>
<h1>Notion for education</h1>
<p>Your notes, research, tasks, and more — all in one place. Free for students and teachers, with discounts for teams and schools.</p>
El elemento
<h1>define un encabezado.Tiene una etiqueta de inicio
<h1>y una etiqueta de cierre</h1>El elemento
<p>define un párrafo.Tiene una etiqueta de inicio
<p>y una etiqueta de cierre</p>
Nunca olvides la etiqueta de cierre
Algunos elementos HTML se mostrarán correctamente, incluso si olvidas la etiqueta de cierre.
Sin embargo, no se confíe de esto, resultados inesperados y errores podrían ocurrir si olvidas la etiqueta de cierre.
Elementos vacíos
Los elementos HTML que no tienen contenido, son llamados elementos vacíos.
La etiqueta <br> define un salto de línea y es un elemento vacío sin una etiqueta de cierre.
<!DOCTYPE html>
<html lang="es">
<head>
<!-- Información meta para el navegador -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titulo pagina</title>
</head>
<body>
<!-- Información visible para el usuario -->
<h1>Notion for education</h1>
<br>
<p>Your notes, research, tasks, and more — all in one place. Free for students and teachers, with discounts for teams and schools.</p>
</body>
</html>
HTML no es case-sensitive
Las etiquetas HTML no son case-sensitive: <P> es lo mismo que <p>
El estándar HTML no requiere etiquetas en minúsculas, pero la W3C recomienda minúsculas en HTML y exige minúsculas para tipos de documentos más estrictos como XHTML.
Resumen
Un elemento HTML es todo, desde la etiqueta inicio, su contenido, y la etiqueta de cierre. También existen elementos que no tienen contenido, y son llamados elementos vacíos.
Los documentos HTML se conforman de elementos anidados. HTML no es case-sensitive. La W3C recomienda usar etiquetas HTML en minúsculas, y no olvide la etiqueta de cierre.
Traducido con 💚 desde W3Schools.com