1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
---
title: 'HTML: Lenguaje de etiquetas de hipertexto'
slug: Web/HTML
tags:
- Avanzado
- Guía
- HTML
- HTML5
- Hipertexto
- Intermedio
- Principiante
- Referencia
- Web
translation_of: Web/HTML
---
<div>{{HTMLSidebar}}</div>
<p class="summary"><span class="seoSummary"><strong>HTML</strong> (Lenguaje de marcado de hipertexto) es el más básico componente de la Web. Define el significado y la estructura del contenido web. Además de HTML, se utilizan otras tecnologías generalmente para describir la apariencia/presentación de una página web ({{web.link("/es/docs/Web/CSS", "CSS")}}) o la funcionalidad/comportamiento ({{web.link("/es/docs/Web/JavaScript", "JavaScript")}}.</span></p>
<p>"Hipertexto" se refiere a 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 cargar contenido en Internet y vincularlo a páginas creadas por otras personas, te conviertes en un participante activo en la «<em>World Wide Web</em>».</p>
<p>HTML utiliza "marcado" para etiquetar texto, imágenes y otro contenido para mostrarlo en un navegador web. El marcado HTML incluye "elementos" especiales como {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("datalist")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("nav")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("video")}}, {{HTMLElement("ul")}}, {{HTMLElement("ol")}}, {{HTMLElement("li")}} y muchos otros.</p>
<p>Un elemento HTML se distingue de otro texto en un documento mediante "etiquetas", que consisten en el nombre del elemento rodeadas por "<code><</code>" y "<code>></code>". 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 <code><title></code> se puede escribir como <code><Title></code>, <code><TITLE></code> o de cualquier otra forma.</p>
<p>Los siguientes artículos pueden ayudarte a obtener más información sobre HTML.</p>
<section class="cleared" id="sect1">
<ul class="card-grid">
<li><span>Introducción a HTML</span>
<p>Si eres nuevo en el desarrollo web, asegúrate de leer el artículo {{web.link("/es/docs/Learn/Getting_started_with_the_web/HTML_basics", "Conceptos básicos de HTML")}} para aprender qué es HTML y cómo usarlo.</p>
</li>
<li><span>Tutoriales HTML</span>
<p>Para ver los artículos sobre cómo usar HTML, así como tutoriales y ejemplos completos, consulta el {{web.link("/es/docs/Learn/HTML", "Área de aprendizaje de HTML")}}.</p>
</li>
<li><span>Referencia HTML</span>
<p>En nuestra extensa sección {{web.link("/es/docs/Web/HTML/Reference", "referencia HTML")}}, encontrarás los detalles sobre cada elemento y atributo en HTML.</p>
</li>
</ul>
<div class="in-page-callout webdev">
<h3 id="¿Quieres_transformarte_en_un_desarrollador_de_la_interfaz_de_usuario_web">¿Quieres transformarte en un desarrollador de la interfaz de usuario web?</h3>
<p>Hemos elaborado un curso que incluye toda la información esencial que necesitas para trabajar hacia tu objetivo.</p>
<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Empieza aquí</a></p>
</div>
<div class="row topicpage-table">
<div class="section">
<h2 class="Tools" id="Tutoriales_para_principiantes">Tutoriales para principiantes</h2>
<p>El {{web.link("/es/docs/Learn/HTML", "Área de aprendizaje de HTML")}} incluye varios módulos que enseñan HTML desde cero, sin necesidad de conocimientos previos.</p>
<dl>
<dt>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML", "Introducción a HTML")}}</dt>
<dd>Este módulo prepara el escenario para que te acostumbres a conceptos y sintaxis importantes, tal como la aplicación de HTML al texto, cómo crear hipervínculos y cómo utilizar HTML para estructurar una página web.</dd>
<dt>{{web.link("/es/docs/Learn/HTML/Multimedia_and_embedding", "Multimedia e inserción")}}</dt>
<dd>Este módulo explora cómo usar HTML para incluir multimedia en tus páginas web, incluidas las diferentes formas en que se pueden incluir imágenes y cómo insertar video, audio e incluso otras páginas web completas.</dd>
<dt>{{web.link("/es/docs/Learn/HTML/Tables", "tablas HTML")}}</dt>
<dd>Representar datos tabulares en una página web de una manera comprensible y accesible puede ser un desafío. Este módulo cubre el marcado básico de tablas, junto con características más complejas como la implementación de subtítulos y resúmenes.</dd>
<dt>{{web.link("/es/docs/Learn/HTML/Forms", "Formularios HTML")}}</dt>
<dd>Los formularios son una parte muy importante de la Web — proporcionan gran parte de la funcionalidad que necesitas para interactuar con sitios web, p. ej. registrarte e iniciar sesión, enviar comentarios, comprar productos y más. Este módulo te ayuda a comenzar a crear las partes de formularios del lado del cliente/Interfaz de usuario.</dd>
<dt>{{web.link("/es/docs/Learn/HTML/Howto", "Utilizar HTML para resolver problemas comunes")}}</dt>
<dd>Proporciona enlaces a secciones de contenido que explican cómo usar HTML para resolver muchos problemas comunes al crear una página web: tratar con títulos, agregar imágenes o videos, enfatizar el contenido, crear un formulario básico, etc.</dd>
</dl>
<h2 id="Temas_avanzados">Temas avanzados</h2>
<dl>
<dt class="landingPageList">{{web.link("/es/docs/Web/HTML/CORS_enabled_image", "Imagen compatible con CORS")}}</dt>
<dd class="landingPageList">El atributo {{HTMLAttrxRef("crossorigin", "img")}}, en combinación con un encabezado {{Glossary("CORS")}} apropiado, permite imágenes definidas por el elemento {{HTMLElement("img")}} que se cargarán desde orígenes externos y se utilizarán en un elemento {{HTMLElement("canvas")}} como si se estuvieran cargando desde el origen actual.</dd>
<dt class="landingPageList">{{web.link("/es/docs/Web/HTML/CORS_settings_attributes", "Atributos de configuración de CORS")}}</dt>
<dd class="landingPageList">Algunos elementos HTML que brindan soporte para {{web.link("/es/docs/Web/HTTP/CORS", "CORS")}}, como {{HTMLElement("img")}} o {{HTMLElement("video")}}, tienen un atributo <code>crossorigin</code> (propiedad <code>crossOrigin</code>), que te permite configurar las solicitudes CORS para los datos extraídos del elemento.</dd>
<dt class="landingPageList">{{web.link("/es/docs/Web/HTML/Preloading_content", "Precarga de contenido con rel='preload'")}}</dt>
<dd class="landingPageList">El valor de <code>preload</code> del atributo {{HTMLElement("link")}} del elemento {{HTMLAttrxRef("rel", "link")}} te permite escribir solicitudes de recuperación declarativas en tu HTML {{HTMLElement("head")}}, que especifican los recursos que tus páginas necesitarán muy pronto después de la carga, que por lo tanto deseas comenzar a precargar al principio del ciclo de vida de la carga de una página, antes de la representación principal del navegador la maquinaria entra en acción. Esto asegura que estén disponibles antes y es menos probable que bloqueen el primer procesamiento de la página, lo que lleva a mejoras de rendimiento. Este artículo proporciona una guía básica sobre cómo funciona <code>preload</code>.</dd>
</dl>
</div>
<div class="section">
<h2 class="Documentation" id="Referencias">Referencias</h2>
<dl>
<dt class="landingPageList">{{web.link("/es/docs/Web/HTML/Reference", "Referencia HTML")}}</dt>
<dd class="landingPageList">HTML consta de <strong>elementos</strong>, cada uno de los cuales se puede modificar por medio de algunos <strong>atributos</strong>. Los documentos HTML están conectados entre sí mediante {{web.link("/es/docs/Web/HTML/Link_types", "enlaces")}}.</dd>
<dt class="landingPageList">{{web.link("/es/docs/Web/HTML/Element", "Referencia del elemento HTML")}}</dt>
<dd class="landingPageList">Examina una lista de todos los {{Glossary("Elemento", "elementos")}} {{Glossary("HTML")}}.</dd>
<dt class="landingPageList">{{web.link("/es/docs/Web/HTML/Attributes", "Referencia de atributos HTML")}}</dt>
<dd class="landingPageList">Los elementos en HTML tienen <strong>atributos</strong>. Se trata de valores adicionales que configuran los elementos o ajustan su comportamiento de diversas formas.</dd>
<dt class="landingPageList">{{web.link("/es/docs/Web/HTML/Global_attributes", "Atributos globales")}}</dt>
<dd class="landingPageList">Los atributos globales se pueden especificar en todos los {{web.link("/es/docs/Web/HTML/Element", "elementos HTML")}}, <em>incluso aquellos no especificados en el estándar</em>. Esto significa que cualquier elemento no estándar debe permitir esos atributos, aunque esos elementos hagan que el documento no sea compatible con HTML5.</dd>
<dt class="landingPageList">{{web.link("/es/docs/Web/HTML/Inline_elements", "Elementos en línea")}} y {{web.link("/es/docs/Web/HTML/Block-level_elements", "Elementos a nivel de bloque")}}</dt>
<dd class="landingPageList">Los elementos HTML suelen ser elementos "en línea" o "a nivel de bloque". Un elemento en línea ocupa solo el espacio delimitado por las etiquetas que lo definen. Un elemento a nivel de bloque ocupa todo el espacio de su elemento padre (contenedor), creando así un "bloque".</dd>
<dt class="landingPageList">{{web.link("/es/docs/Web/HTML/Link_types", "Tipos de enlaces")}}</dt>
<dd class="landingPageList">En HTML, se pueden usar varios tipos de enlaces para establecer y definir la relación entre dos documentos. Los elementos de enlace en los que se pueden configurar tipos incluyen {{HTMLElement("a")}}, {{HTMLElement("area")}} y {{HTMLElement("link")}}.</dd>
<dt class="landingPageList">{{web.link("/es/docs/Web/Media/Formats", "Guía de tipos y formatos de medios en la web")}}</dt>
<dd class="landingPageList">Los elementos {{HTMLElement("audio")}} y {{HTMLElement("video")}} te permiten reproducir audio y video de forma nativa dentro de tu contenido sin la necesidad de soporte de software externo.</dd>
<dt class="landingPageList">{{web.link("/es/docs/Web/Guide/HTML/Content_categories", "Categorías de contenido HTML")}}</dt>
<dd class="landingPageList">HTML se compone de varios tipos de contenido, cada uno de los cuales se puede usar en ciertos contextos y no está permitido en otros. De manera similar, cada uno tiene un conjunto de otras categorías de contenido que pueden recibir y elementos que pueden o no se pueden usar en ellos. Esta es una guía para estas categorías.</dd>
<dt class="landingPageList">{{web.link("/es/docs/Web/HTML/Quirks_Mode_and_Standards_Mode", "Modo Quirks y modo estándar")}}</dt>
<dd class="landingPageList">Información histórica sobre el modo peculiar («<em>Quirks</em>» en inglés) y el modo estándar.</dd>
</dl>
<h2 class="landingPageList" id="Temas_relacionados">Temas relacionados</h2>
<dl>
<dt>{{web.link("/es/docs/Web/HTML/Applying_color", "Aplicación de color a elementos HTML mediante CSS")}}</dt>
<dd>Este artículo cubre la mayoría de las formas en que usas CSS para agregar color al contenido HTML, enumerando qué partes de los documentos HTML se pueden colorear y qué propiedades CSS usar al hacerlo. Incluye ejemplos, enlaces a herramientas de creación de paletas de colores y más.</dd>
</dl>
</div>
</div>
<span class="alllinks">{{web.link("/es/docs/tag/HTML", "Ver todo...")}}</span></section>
|
