COMUNIDAD
ENTRARGUARDADOS
HTML (Lenguaje de Marcas de Hipertexto, del inglés HyperText Markup Language) es el componente más básico de la Web. Define el significado y la estructura del contenido web. Además de HTML, generalmente se utilizan otras tecnologías para describir la apariencia/presentación de una página web (CSS) o la funcionalidad/comportamiento (JavaScript).
"Hipertexto" hace referencia a los enlaces que conectan páginas web entre sí, ya sea dentro de un único sitio web o entre sitios web. Los enlaces son un aspecto fundamental de la Web. Al subir contenido a Internet y vincularlo a las páginas creadas por otras personas, te conviertes en un participante activo en la «World Wide Web» (Red Informática Mundial).
HTML utiliza "marcas" para etiquetar texto, imágenes y otro contenido para mostrarlo en un navegador Web. Las marcas HTML incluyen "elementos" especiales como <head>, <title>, , <body><header>, , <footer><article>, , <section><p>, , <div><span>, , <img><aside>, , <audio><canvas>, , <datalist><details>, , <embed><nav>, <output> (en-US), , <progress><video>, , <ul><ol>, <li> y muchos otros.
Un elemento HTML se distingue de otro texto en un documento mediante "etiquetas", que consisten en el nombre del elemento rodeado por "<" y ">". El nombre de un elemento dentro de una etiqueta no distingue entre mayúsculas y minúsculas. Es decir, se puede escribir en mayúsculas, minúsculas o una mezcla. Por ejemplo, la etiqueta<title>se puede escribir como<Title>,<TITLE>o de cualquier otra forma.
<head>: Contiene metadatos/información para el navegador y no es visible para el usuario. Incluye elementos como <title>, enlaces a CSS, scripts.<head><title>Mi página web</title></head>
<title>: Define el título de la página, que se muestra en la pestaña del navegador.<title>Mi Blog Personal</title>
<body>: Contiene todo el contenido de una página web que es visible para el usuario.<body><h1>Hola Mundo</h1></body>
<header>: Se utiliza para introducir el contenido de la página o de una sección. A menudo contiene logos, títulos o barras de navegación.<header><h1>Mi Blog</h1></header>
<footer>: Define el pie de página de un documento o sección. A menudo contiene información de contacto, derechos de autor y enlaces a políticas de privacidad.<footer><p>Derechos reservados 2024</p></footer>
<article>: Se utiliza para contenido independiente y autocontenido. Es útil para posts de blog, artículos de noticias, etc.<article><h2>Título del Artículo</h2><p>Contenido...</p></article>
<section>: Define una sección dentro de un documento, como capítulos, encabezados, pies de página o cualquier otra sección del documento.<section><h2>Introducción</h2><p>Texto...</p></section>
<p>: Representa un párrafo de texto.<p>Esto es un párrafo de ejemplo.</p>
<div>: Un contenedor genérico para contenido de flujo, sin significado semántico. Útil para estilizar con CSS o agrupar elementos para manipulaciones con JavaScript.<div><p>Un párrafo dentro de un div.</p></div>
<span>: Un contenedor en línea para texto o elementos, sin significado semántico. Útil para aplicar estilos o identificar partes del texto.<p>Este es un texto con <span>palabras destacadas</span>.</p>
<img>: Representa una imagen.<img src="imagen.jpg" alt="Descripción de la imagen">
<aside>: Define un contenido indirectamente relacionado con el contenido principal, como barras laterales, llamadas a la acción, o publicidad.<aside>Esto es una barra lateral.</aside>
<audio>: Utilizado para incrustar contenido de audio.<audio controls><source src="audio.mp3" type="audio/mpeg"></audio>
<canvas>: Permite dibujar gráficos mediante scripting (usualmente JavaScript).<canvas id="miCanvas"></canvas><datalist>: Proporciona un conjunto de opciones predefinidas para otros controles (como <input>).<input list="browsers"><datalist id="browsers"><option value="Chrome"></datalist>
<details>: Crea un widget que el usuario puede abrir y cerrar para revelar contenido adicional.<details><summary>Más Información</summary><p>Detalles aquí.</p></details>
<embed>: Se utiliza para incrustar contenido (como una página web, un vídeo, o un objeto de audio) dentro de un documento HTML.<embed type="image/jpg" src="imagen.jpg" width="300" height="200">
<nav>: Se utiliza para definir una sección de navegación dentro de la página. Esto podría incluir menús, tablas de contenido, o enlaces a otras páginas.<nav><ul><li><a href="#">Inicio</a></li></ul></nav>
<output>: Representa el resultado de un cálculo o de la acción de un usuario.<output name="resultado">42</output>
<progress>: Muestra el progreso de una tarea. No indica cuánto de la tarea se ha completado, solo que está en progreso.<progress value="70" max="100"></progress>
<video>: Para incrustar contenido de video.<video controls><source src="video.mp4" type="video/mp4"></video>
<ul>: Define una lista no ordenada.<ul><li>Item 1</li><li>Item 2</li></ul>
<ol>: Define una lista ordenada.<ol><li>Primer ítem</li><li>Segundo ítem</li></ol>
<li>: Representa un ítem dentro de una lista (<ul>, <ol>).<ul><li>Item de una lista no ordenada</li></ul>
Estos elementos son la base para estructurar y organizar contenido en la web, cada uno con su propósito específico para mejorar la accesibilidad y la comprensión del sitio por parte de los usuarios y los motores de búsqueda.
Comenta abajo: ¿Donde puedes encontrar el HTML de esta página en el navegador Chrome?
Comenta ¿Donde se puede ver el código HTML de esta página?
