Introducción a HTML

Antes de empezar
Para entender este artículo, se recomienda sentirse cómodo con el uso de unNavegador.
Si también estás familiarizado con la manipulación (creación y edición) de archivos de texto, puedes probar el
ejemplos mostrados en este artículo.

Cuando miras una página web en unnavegador web, ves, en el nivel más simple, palabras. Es raro que
ver una página web que contenga solo texto plano. En lugar de las palabras que ves y lees, tienen estilo
características. Los diseñadores de páginas web modernas tienen acceso a cientos de fuentes diferentes, tamaños de fuente,
colores, e incluso alfabetos (por ejemplo, español, japonés, ruso). Los navegadores modernos pueden mostrar la mayoría de
ellos con precisión. Las páginas web también pueden contener imágenes, videoclips y música de fondo. Ellas
pueden incluir menús desplegables, cuadros de búsqueda, enlaces clicables a productos u otras páginas dentro del
mismo sitio web, o enlaces a páginas web externas. Algunos sitios web incluso ofrecen opciones para personalizar el
la visualización de la página para acomodar preferencias personales o discapacidades como visión limitada, sordera, o
daltonismo. A menudo, una página contiene cajas de contenido que se mueven (desplazan) mientras el resto de la página
permanece estático.

Varias tecnologías (comoCSS, JavaScript, Destello, AJAX, JSON) se puede utilizar para definir el
elementos de una página web. Sin embargo, a un nivel básico, una página web se crea utilizandoHTML(Hipermedia
Lenguaje de Marcado). SinHTML, no hay página web. HTML es lo que un navegador "lee" para
presentar la página en la computadora del cliente.

Los estándares y especificaciones internacionales de HTML son mantenidos por elRed Mundial de Información
Consorcio(W3C) y el Grupo de Trabajo sobre Tecnología de Aplicaciones Hiperttext en la Web(WHATWG).
El WHATWG considera que HTML es un 'estándar vivo' que está en constante evolución, mientras que el
W3C trabaja en ambas "instantáneas" de HTML, la más reciente de las cuales esHTML5y en el
evolución de HTMLHTML 5.1).
ElEspecificación HTMLdefine un solo idioma que se puede escribir utilizando la relajadaHTML
sintaxis, pero también la más estrictaXML(Lenguaje de Marcado Extensible) uno, y también aborda el
necesidades de las aplicaciones [Link] describe el estilo y formato del contenido, sino solo
el contenido en sí mismo y su significado.

El creador de una página web puede usarCSSdefinir la apariencia y el diseño de los textos y otros
materiales. Las mejores prácticas actuales en el desarrollo web fomentan el uso deCSSen lugar de explícito
presentacionalHTML.
Este artículo proporciona una introducción a HTML. Si alguna vez te has preguntado qué sucede detrás de
escenas en tu navegador web, este artículo es el lugar para comenzar a aprender.

Una breve historia de HTML

A finales de los años 80,Tim Berners-Leeestaba trabajando como físico enCERN(el europeo
Organización de Investigación Nuclear). Ideó una forma para que los científicos compartieran documentos a través del

1
internet. Antes de su invención, la comunicación a través de internet estaba limitada a texto plano, utilizando
tecnologías como el correo electrónico,FTP(Protocolo de Transferencia de Archivos), y Usenet-foros de discusión.
invención deHTMLhizo uso de un modelo de contenido almacenado en un servidor central que podría ser
transferido y mostrado en una estación de trabajo local a través de un navegador. Simplificó el acceso al contenido y
habilitó la visualización de contenido "rico" (como el formateo de texto sofisticado y la visualización de
imágenes).

¿Qué es HTML?
HTML es un lenguaje de marcado. La palabra markup fue utilizada por editores que marcaron manuscritos
(usualmente con un lápiz azul) al dar instrucciones para revisiones. El término sigue en uso, aunque
con un significado ligeramente diferente. Un lenguaje de marcado en relación con los navegadores es un lenguaje con
sintaxis específica que da instrucciones a un navegador web sobre cómo mostrar una página. HTML
separa "contenido" (palabras, imágenes, audio, video, etc.) de "presentación" (la definición de
el tipo de contenido y las instrucciones sobre cómo ese tipo de contenido debe ser mostrado).HTML
utiliza un conjunto predefinido deelementosidentificar tipos de contenido. Los elementos contienen uno o más "etiquetas"
que contienen o expresan [Link]án rodeadas por corchetes angulares, y la etiqueta 'de cierre' (el
uno que indica el final del contenido) se antepone con una barra diagonal.
La mayoría de los navegadores permiten al usuario ver el HTML de cualquier página web. Usando Firefox, por ejemplo, haz clic en
en el elemento del menú: Herramientas: Desarrollador Web: Código Fuente para ver el HTML de una página. Los principiantes encontrarán

el código casi ilegible para una página compleja, pero si pasas algún tiempo mirando el código para un
página simple y comparándola con la página que el código renderiza, pronto desarrollarás una clara
entendimiento de algunos de los requisitos básicos de sintaxis. Inténtalo la próxima vez que accedas a un "iniciar sesión"
página que contiene algunos elementos como el inicio de sesión en [Link].

El elemento de párrafo consiste en la etiqueta de inicio "<p>" y la etiqueta de cierre "</p>". Lo siguiente
example shows a paragraph contained within the HTML paragraph element but remember it will
no preservar más de un espacio en blanco:
<p>Estás comenzando a aprender HTML.</p>

Cuando este contenido se muestra en un navegador web, se ve así:

El navegador utiliza eletiquetascomo un indicador de cómo mostrar el contenido en las etiquetas.

Elementosque contienen contenido también pueden contener otros elementos. Por ejemplo, el énfasis
el elemento (" em"") puede ser incrustado dentro de un elemento de párrafo, para añadir énfasis a una palabra o
phrase:
<p>Estás <em>comenzando</em> a aprender HTML.</p>

Cuando se muestra, esto se ve así:

2
Algunoselements no contienen otros elementos. Por ejemplo, la imagenetiqueta("<img>") especifica el
nombre de archivo del contenido (una imagen) como unatributo:

<img src="[Link]" alt="Cara sonriente" >

A menudo se coloca una barra diagonal antes del corchete angular final para indicar la etiqueta de cierre de un vacío
elemento enXHTML(lo que es unXMLesquema que implementa elementos HTML).
El resto de este artículo entra en más detalle sobre los conceptos introducidos en esta sección.
Sin embargo, si quieres verHTMLen acción, echa un vistazo aMozilla Thimble, que es un interactivo
editor en línea que te ayuda a aprender a escribirHTMLmarcador. También, verElementos HTMLpara una lista
de elementos disponibles y una descripción de su uso.

Elementos — los bloques básicos de construcción

HTMLconsiste en un conjunto deelementosLos elementos definen el significado semántico de su contenido.
Los elementos incluyen todo entre dos elementos [Link], incluidos los propios etiquetas.
Por ejemplo, el elemento "<p>" indica un párrafo; el elemento "<img>" indica una imagen. Ver
elElementos HTMLpágina para una lista completa.
Algunoselementostiene un significado muy preciso, como en "esta es una imagen", "este es un encabezado", o "esto es un"
lista ordenada." Otros son menos específicos, como "esta es una sección en la página" o "esta es parte de la
Sin embargo, otros se utilizan por razones técnicas, como "esta es información identificativa para la página".
eso no debería mostrarse." Sin embargo, de una forma u otra, todos los elementos HTML tienen un
valor semántico.
La mayoría de los elementos pueden contener otros elementos, formando una estructura jerárquica. Una estructura muy simple pero

la página web completa se ve así:

<html>
<cuerpo>
<p>estás en tu etapa inicial de HTML</p>
</cuerpo>
</html>

Como puedes ver, el <html>element rodear el resto del documento, y el <body>elemento

rodear el contenido de la página. Esta estructura a menudo se considera como un árbol con ramas (en este caso, el
<body> y <p> elementos) creciendo del tronco (<html>). Esta estructura jerárquica se llama
elDOMelModelo de Objetos del Documento.

Etiquetas
HTMLLos documentos se escriben en texto plano. Se pueden escribir en cualquier editor de texto que permita
contenido que debe guardarse como texto plano, como Notepad, Notepad++, o Sublime Text, pero la mayoría HTML
los autores prefieren usar un editor especializado que resalta la sintaxis y muestra elDOMNombres de etiquetas
puede escribirse en mayúsculas o minúsculas. Sin embargo, elW3C(el consorcio global que
mantiene el estándar HTML) recomienda usar minúsculas (yXHTMLrequiere minúsculas.

3
HTML adjunta un significado especial a cualquier cosa que comience con el signo menor que ('<') y termine con
el signo mayor que ("> "). Este tipo de marcado se llama unetiqueta. Asegúrate de cerrar la etiqueta, ya que algunas etiquetas son
cerrado por defecto, mientras que otros pueden producir errores inesperados si olvidas la etiqueta de cierre.

Aquí hay un ejemplo simple:

<p>Este es un texto dentro de un párrafo.</p>

En este ejemplo hay una etiqueta de inicio y una etiqueta de cierre. Las etiquetas de cierre son las mismas que la etiqueta de inicio pero
también contiene una barra diagonal inmediatamente después del signo menor que inicial. La mayoría de los elementos en HTML
se escriben utilizando tanto etiquetas de inicio como de cierre. Las etiquetas de inicio y cierre deben estar correctamente anidadas--eso
las etiquetas de cierre deben escribirse en el orden opuesto a las etiquetas de inicio. El anidamiento adecuado es una regla
que debe ser obedecido para escribir código válido.

Este es un ejemplo de código válido:

<em>Realmente <strong>quiero</strong> decir eso</em>.

Este es un ejemplo de código inválido:

Inválido: <em>Realmente <strong>quiere decir eso</strong></em>.

Tenga en cuenta que en el ejemplo válido, la etiqueta de cierre para el elemento anidado se coloca antes del cierre
etiqueta para el elemento en el que está anidado. En el código inválido, están anidados.

Algunoselementosno contienen ningún contenido de texto ni ningún otro elemento. Estos son elementos vacíos
y no necesita una etiqueta de cierre. Este es un ejemplo:

<img src="[Link]" alt="Cara sonriente" >

Los elementos vacíos en modo XHTML generalmente se cierran utilizando una barra diagonal al final.

<img src="[Link]" alt="Cara sonriente" />

En HTML, esta barra tiene un significado que no está implementado en Firefox, por lo que no debería usarse.
Los elementos vacíos no deben cerrarse en modo HTML.

Atributos
La etiqueta de inicio puede contener información adicional, como en el ejemplo anterior. Dicha información es
llamado unatributo. Los atributos generalmente constan de 2 partes:
un nombre de atributo
Un valor de atributo

A few attributes can only have one value. They areBooleanattributes and may be shortened by
solo especificando el nombre del atributo o dejando el valor del atributo vacío. Así, los siguientes 3
los ejemplos tienen el mismo significado:

<input required="required">

<input required="">

<input requerido>

4
Los valores de los atributos que consisten en una sola palabra o número pueden escribirse tal como están, pero en cuanto
hay dos o más cadenas de caracteres en el valor, debe escribirse entre comillas.
Se permiten tanto las comillas simples (') como las dobles ("). Muchos desarrolladores prefieren usar siempre
quotes to make the code less ambiguous to the eye and to avoid mistakes. The following is such a
error
<p class=foo bar> (Cuidado, esto probablemente no significa lo que piensas que significa.)

En este ejemplo, se suponía que el valor era "foo bar" pero como no había comillas, el código es
interpretado como si hubiera sido escrito así:
<p class="foo" bar="">

Referencias de caracteres nombrados

Referencias de caracteres nombrados (a menudo llamadas de manera informalentidades) se utilizan para imprimir caracteres que tienen un
significado especial enHTMLPor ejemplo, HTML interpreta los símbolos de menor que y mayor que.
como delimitadores de etiquetas. Cuando deseas mostrar un símbolo mayor que en el texto, puedes usar un nombre
referencia de carácter. Hay cuatro referencias de carácter comunes que uno debe conocer:

&gt; denota el signo mayor que (>)

< denota el signo de menor que (<)
&amp; denota el ampersand (&)
" denota comillas dobles (")

Haymuchas más entidades, pero estos cuatro son los más importantes porque representan
caracteres que tienen un significado especial en HTML.

Tipo de documento y comentarios

Además deetiquetas, contenido de texto, yentidadesun documento HTML debe contener untipo de documento
declaración como la primera línea. La declaración doctype no es una etiqueta HTML; es una instrucción para el
navegador web sobre en qué versión de HTML está escrita la página.

En HTML 4.01, el doctype se refiere a unDTD(Definición de Tipo de Documento) ya que se basó enSGML.
Hay tres declaraciones de doctype diferentes en HTML 4.01.
HTML 4.01 Estricto
Este DTD contiene todos los elementos y atributos HTML, pero NO INCLUYE presentacional o
elementos obsoletos (como font). Los marcos no están permitidos.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
[Link]

HTML 4.01 Transitional

Este DTD contiene todos los elementos y atributos HTML, INCLUYENDO los de presentación y obsoletos.
elementos (como fuentes). Los conjuntos de marcos no están permitidos.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

[Link]

5
HTML 4.01 Conjunto de marcos

Este DTD es igual al HTML 4.01 Transitional, pero permite el uso de contenido de frameset.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
[Link]

En HTML 5, solo hay una declaración y se escribe así:

<!DOCTYPE html>

El doctype tiene una historia larga e intrincada, pero por ahora, lo único que necesitas saber es que este doctype
tells the browser to interpret the HTMLyCSScódigo de acuerdo conW3Cestándares y no intentar
fingir que esInternet Explorerde los 90. (Vermodo quirks.)
HTML tiene un mecanismo para incrustar comentarios que no se muestran cuando se renderiza la página
en unnavegadorEsto es útil para explicar una sección de marcado, dejando notas para otras personas que
podría funcionar en la página, o para dejar recordatorios para ti mismo. Los comentarios HTML están encerrados en
símbolos como sigue:
<!-- Este es un texto de comentario -->

Un documento completo pero pequeño

Juntando esto, aquí hay un pequeño ejemplo de unHTMLdocumento. Puedes copiar este código a un
editor de texto, guárdalo como [Link] y cárgalo en unnavegador. Asegúrate de guardarlo usando el
codificación de caracteres UTF-8. Dado que este documento no utiliza estilo, se verá muy simple, pero es solo
un pequeño comienzo.

<!DOCTYPE html>
<html lang="en">
<head>
<title>A RMScreenprint</title>
</head>
<cuerpo>
<h1>Título principal en mi documento</h1>
Nota que es "h" + "1", no "h" + las letras "uno"
<p>Mira mamá, estoy programando <abbr title="Lenguaje de Marcado de Hipertexto
Idioma">HTML</abbr>.</p>
</body>
</html>

En este artículo

1. Resumen
[Link] activo
[Link] paso: Un archivo
[Link] paso: Un navegador web
[Link] paso: Experimenta y aprende
[Link]ón más profunda
1. Esta no es una página web muy bonita
[Link] a dos páginas
[Link] entre dos páginas locales

6
 [Link] a otro sitio web
[Link]óximos pasos
En este artículo aprenderás a crear una página web simple.

Requisitos previos: Necesitas tenerun editor de textoy sabercómo abrir un archivo en un navegador.
Crearás una página web en tu computadora que podrás usar con tu
Objetivo:
navegador.

Resumen
La página web más simple es solo unHTMLarchivo. Solo un archivo HTML válido en tu computadora y una web
el navegador es lo único que necesitas. Veremos cómo HTMLetiquetasse utilizan, y podrás
ve la página que creas en tu navegador.

Aprendizaje activo
Primero que nada, asegúrate de tener un editor de texto con el que te sientas cómodo y un navegador web abierto.
y en funcionamiento. Prácticamente cualquier editor de texto servirá; puedes usar Notepad en Windows o TextEdit en
el Mac, por ejemplo. Solo asegúrate de que estás creando archivos de texto sin formato y no archivos RTF o de Word
cuando trabajas.
Si estás usando TextEdit en tu Mac, puedes asegurarte de que el archivo que estás editando sea un archivo en formato de texto.
eligiendo la opción "Hacer texto simple" en el menú "Formato".
Primer paso: Un archivo
Una única página web consiste (al menos) en un archivo HTML, así que comenzaremos creando uno de esos. Abrir
tu editor de texto y crea un nuevo archivo de texto, luego escribe algo como esto:
<!DOCTYPE html>
<html>
<head>
<title>Hi there</title>
</head>
<body>
Esta es una página
una página simple
</body>
</html>

Puedes editar esto como quieras; siéntete libre de agregar o cambiar el texto en el cuerpo o el título, luego guarda el
archivo. Asegúrate de darle al archivo un nombre que termine con la extensión ".html". Por ejemplo, podrías
llámalo "my_page.html".
Ahora deberías tener un archivo en tu computadora; podría verse así en tu carpeta (esto obviamente
depende del sistema operativo que estés usando):

Al abrir el archivo en tu editor, podría verse algo así (nuevamente, dependiendo de qué editor
tú usas):

7
Reabrir el archivo en un editor requerirá arrastrar el archivo a tu editor, abriéndolo usando el
opción "Abrir" en el menú Archivo del editor, o haciendo clic derecho en el archivo y eligiendo abrirlo en tu
editor de texto. Hacer doble clic en el archivo lo abrirá en su navegador, que es nuestro siguiente paso.

Segundo paso: Un navegador web

Dentro de tu explorador de archivos (como el Explorador de Windows, Archivos en Ubuntu o Finder en Mac), encuentra el
archivo que acabas de crear y ábrelo con tu navegador. Puedes hacerlo arrastrándolo sobre el
el ícono del navegador o, por lo general, simplemente haciendo doble clic en el archivo. Debería mostrar el texto del
Archivo HTML que creaste, y la pestaña debería tener el título de la página. Esto debería verse algo así
así, aunque variará dependiendo de tu plataforma y navegador:

Puedes ver que la pestaña muestra el título que especificaste, y que el contenido del cuerpo de la página es
ahí — sin un salto de línea entre las dos líneas en el texto. Interesante.

Tercer paso: Experimenta y aprende

Intenta eliminar partes del HTML y ver qué sucede. Algunos cambios aún permitirán que la página
display in your browser, and others will cause obvious problems with the results. This is because
los navegadores están diseñados para entender que las personas son propensas a ciertos tipos de errores, y tratan
para compensar a algunos de ellos.

Lo primero que debes notar es que lo único que ves en la pantalla es el texto que está
no dentro de los corchetes angulados (también conocidos como los símbolos de mayor que y menor que, pero llamamos
los corchetes angulares al hablar sobre HTML). Todo lo que está dentro de los corchetes angulares sonetiquetas; estos
representa la estructura o esqueleto de tu página web. En medio de las etiquetas es donde se muestra todo
aparece contenido.
En nuestro ejemplo, tenemos dos secciones principales en nuestra página HTML: un encabezado, contenido dentro del
<head> bloque, y un cuerpo, contenido dentro del<cuerpo>El cuerpo contiene el texto mostrado
dentro de la página.

Cada etiqueta tiene un significado específico y debe usarse en consecuencia; por ejemplo,<title> se usa para
indica el título de la página, que no tiene que ser el mismo que el nombre del archivo!). También observa que

8
las etiquetas pueden ocurrir dentro del contenido de otras etiquetas. El<title> está contenido dentro de la página
<cabeza>, por ejemplo.

Si quieres agregar algo como una imagen a tu página, necesitas agregar una etiqueta para la imagen y
la imagen en sí. Por ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Hi there</title>
</head>
<cuerpo>
Esta es una página
una página simple
<img src="unicorn_pic.png" alt="Unicorn picture :)" />
ahora con un unicornio
</cuerpo>
</html>

Edita tu archivo para incluir la etiqueta, así:

<img src="unicorn_pic.png" alt="Unicorn picture :)" />

Puede ir a cualquier parte dentro de la<cuerpo>¡No olvides guardar tu página cambiada!

Luego coloca un archivo llamado "unicorn_pic.png" en la misma carpeta que tu archivo HTML. Cuando actualices
tu ventana del navegador (o vuelve a abrir el archivo HTML en tu navegador), deberías ver el cambio
¡contenido, completo con unicornio! (no olvides guardar tu página).

Nota: Puedes obtener una copia de la imagen del unicornio para usar en tus experimentos haciendo clic derecho arriba.
en la imagen y eligiendo la opción "Guardar imagen como..." del menú que aparece.
Los archivos necesarios para que esta página funcione ahora lucen algo así en tu escritorio:

9
La página resultante debería verse algo como esto en tu navegador:

Puede que hayas notado que el<img> la etiqueta aquí tieneatributosque proporcionan adicionales
información necesaria para construir el objeto solicitado; en este caso, se trata del nombre del archivo de imagen a
display and an alternative text string which is displayed if the image can't be loaded.
Este es un ejemplo de cómo agregar una imagen a tu página, pero puedes usar técnicas similares para agregar
música, videos y más, todo usando nada más que HTML.

Profundización
Esta no es una página web muy bonita
Como habrás notado, esta página web no es un milagro de diseño y belleza. Esto se debe a que
HTML se trata de todo el contenido y de lo que significa el contenido (en términos de su contexto y el)
relaciones entre bloques de contenido), en lugar de diseño.
CSSte permite hacer que el contenido brille, añadiendo diseño, color, fuentes, y así sucesivamente. Puro
HTML es lo suficientemente bueno para crear páginas web simples, pero las páginas más complejas (o incluso las simples)

con diseños atractivos) típicamente necesitan CSS y posiblementeJavaScript. HTML construye contenido, CSS
los estilos dan forma al contenido, y JavaScript hace que el contenido sea dinámico.

Experimente un poco con CSS haciendo que el texto del cuerpo de la página sea azul:

<!DOCTYPE html>
<html>
<head>
<title>Hi there</title>
</head>
<body style="color:azul">
<p>This is a some blue text</p>

10
<img src="unicorn_pic.png" alt="Imagen de unicornio :)" />
</cuerpo>
</html>

Tenga en cuenta la adición de laestilo atributo a la página<cuerpo>Esto especifica el CSS que se aplicará a
el texto del cuerpo.

¿Quieres que el texto esté subrayado? Intenta añadir "text-decoration: underline;" al cuerpo:
<body style="color:blue; text-decoration: underline;">

¿Quieres que el texto tenga un tamaño específico? Intenta agregar "font-size: 42px;" así:
<body style="color:blue; text-decoration: underline; font-size: 42px;">

El resultado final se ve así:

<html>
<head>
<title>Hi there</title>
</head>
<body>
<p style="color: blue; text-decoration: underline; font-size: 42px;">Esto es un
texto grande subrayado en azul
<img src="unicorn_pic.png" alt="Unicorn picture :)" />
</cuerpo>
</html>

Y si guardas el contenido de la página con tu editor, luego actualizas tu navegador, la página debería
ahora se ve así:

11
Growing to two pages
Cuando navegas por la web, a menudo te encuentras conenlacesEstas son las formas más útiles de navegar
de una página a otra. Dado que HTML se trata de contenido y los enlaces son una forma de contenido, puedes
crear enlaces entre páginas usando solo HTML.
Vinculación entre dos páginas locales
Para este ejercicio, necesitarás crear dos archivos HTML en tu computadora (puedes mantener el
anterior). Agregaremos un enlace a cada página para que puedas alternar rápida y fácilmente entre
ellos.
En el primer archivo puedes mantener la misma estructura general que antes. Lo importante es añadir un
nueva etiqueta<a>, así:

<!DOCTYPE html>
<html>
<head>
<title>Page 1 to ground control</title>
</cabeza>
<body>
Esta es la página 1.
<a href="[Link]" title="ir a la página 2">¿Qué está pasando en la página 2?</a>
</body>
</html>

La segunda página debe enlazar de vuelta a la primera página:

12
<!DOCTYPE html>
<html>
<cabeza>
<title>Page 2 :)</title>
</head>
<body>
Esta es una página 2.
¿Quieres volver a la página 1? Haz clic
aquí</a>
</cuerpo>
</html>

Nota: Asegúrese de que los nombres de archivo especificados en el<a> el atributo href de la etiqueta coincide con los nombres de los archivos

creaste en tu computadora.
Ahora puedes navegar entre los dos documentos HTML. Abre la página 1 en tu navegador y haz clic
el enlace para abrir la página 2, y viceversa. También puedes probar el botón "anterior" en tu navegador; él
te llevará de vuelta a la última página que estabas mirando.
Tu administrador de archivos debería tener los dos archivos HTML en la misma carpeta, así:

La página 1 se ve así en el navegador:

Y la Página 2 se ve así en el navegador, después de hacer clic en el enlace de la Página 1:

Nota: El enlace de vuelta a la página 1 es violeta porque el navegador "sabe" que hemos visitado previamente.
la primera página.

Si lo deseas, puedes intentar esto con más de dos páginas, o continuar a la siguiente sección para tomar
esto al siguiente nivel.
Enlazando a otro sitio web
En este ejercicio, añadiremos un enlace al archivo HTML para que el lector pueda acceder rápidamente a algunos.
página útil en la Web. Puedes enlazar a cualquier cosa disponible en la Web pública. Intentemos enlazar a
Wikipedia:

13
<!DOCTYPE html>
<html>
<head>
<title>My page</title>
</cabeza>
<cuerpo>
Un día,...Los unicornios son geniales...Nos vemos.
<a href="[Link] title="Página de unicornio en
¿Quieres saber más sobre los unicornios? Wikipedia está aquí
</cuerpo>
</html>

Esto debería verse más o menos así en el navegador:

Pasa el puntero del ratón sobre el enlace; verás eltitle atributo mostrado en un instante
tooltip. Esto se puede usar para proporcionar más información sobre el enlace, para que el usuario pueda tomar una
decisión informada sobre si hacer clic en él o no.
Recordatorio: Siempre que edites la página, no olvides guardar el archivo en tu editor y refrescar.
la página en tu navegador para que puedas ver los cambios que hiciste.

Próximos pasos
Cómo usar etiquetas HTMLHay muchas etiquetas en HTML; solo hemos mirado los conceptos básicos
¡Aquí! Encontrarás más recursos sobre lo que es posible aquí.
Anatomía de una página webHTML tiene algunas reglas y una página puede tener mucho contenido; esto
puede ayudarte a entender páginas más complejas, como las utilizadas en algunos de los más
¡sitios populares en la web!
Entendiendo los enlacesUtilizamos algunos ejemplos muy simples con enlaces; este artículo es para ti
si quieres entender por qué los "enlaces" son el origen del nombre "Web".
Using images yañadiendo audio y videoson útiles para agregar contenido multimedia con
HTML simple.

En este artículo

[Link]
[Link] de etiquetas
[Link] HTML
[Link] HTML
[Link] activo
[Link] más

14
 [Link] autoconclusivas
[Link] especiales
[Link] del documento HTML
4. Elementos superpuestos
[Link] tu HTML
[Link]óximos pasos
Este artículo cubre los conceptos básicos deHTML. Descubre qué son las etiquetas y cómo usarlas.

Ya deberías saberla diferencia entre una página web y un sitio webycómo

Requisitos previos:
crear un documento HTML simple.
Aprende qué son las etiquetas HTML y cómo usarlas en los lugares adecuados en un HTML
Objetivo:
documento.

Resumen
HTML(Lenguaje de Marcado de Hipertexto) es un lenguaje descriptivo utilizado para estructurar una página web.
contenido (por ejemplo, texto, imágenes, enlaces).

Un documento HTML es un documento de texto que contieneetiquetas, que debe ser utilizado adecuadamente para describir
la estructura del documento. Las etiquetas le dicen al navegador cómo mostrar el documento y le permiten a usted
incrustar varios medios (por ejemplo, imágenes, vídeos, sonido) dentro del texto.

El navegador no muestra las etiquetas en sí. Cuando los usuarios visitan una página web, su navegador
analiza el documento e interpreta las etiquetas para mostrar la página web correctamente. Por ejemplo,
si hay un<img> etiqueta dentro del documento, el navegador carga la imagen asociada y la muestra
esa imagen en lugar de la etiqueta HTML.

Sintaxis de etiquetas

Las etiquetas HTML siguen una sintaxis simple pero estricta:

Corchete de apertura (<)

Nombre de la etiqueta

Atributos (opcional). Primero un espacio, luego el nombre del atributo, un signo igual (=) y un valor
entre comillas dobles ("")
Mayor que (>)

A few examples:
<artículo>
<meta charset="utf-8">
<img src="[Link]" alt="">

Elementos HTML
Las etiquetas suelen venir en pares. Una etiqueta en cada par es la etiqueta de apertura, la otra es la etiqueta de cierre.
la etiqueta de cierre debe tener un nombre de etiqueta idéntico al de su etiqueta de apertura correspondiente. Además, una etiqueta de cierre

debe incluir una barra diagonal (/) entre el corchete de apertura y el nombre de la etiqueta. Por ejemplo, si<p>
es una etiqueta de apertura, </p> es la etiqueta de cierre correspondiente.

15
Un elemento HTML consiste en una etiqueta de apertura, la etiqueta de cierre correspondiente y el texto en
entre

Puedes ver por qué establecemos estas convenciones rígidas para las etiquetas de cierre, porque puedes anidar
elementos dentro de otros
<p>
Aquí comienza un párrafo
<strong>
Aquí hay un texto importante dentro del párrafo
</strong>
y el párrafo termina aquí
</p>

Mejor práctica: Hablando estrictamente, algunas etiquetas de cierre son opcionales. Sin embargo, si omites etiquetas de cierre,
estás a merced de las reglas impredecibles de tu navegador para finalizar un elemento. Por lo tanto,
whenever you need to enclose tags with text, we urge you to always end the element explicitlywith
una etiqueta de cierre.

etiquetas HTML

HTML proporciona casi140 etiquetaspara proporcionar al navegador semántica, o reglas para interpretar y
mostrando el contenido. Entre otras cosas, las etiquetas pueden proporcionar metadatos para el documento HTML, configurar
the font, emphasize certain phrases (e.g. with italics), add media contents, or handle forms.
Aquí hay algunas de las etiquetas más comunes:

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>

Estas son etiquetas de encabezado que definen títulos, que van desde h1 para el encabezado más general.
toh6 para lo más específico.
<p>
Este es el tag de párrafo, utilizado para crear párrafos, que generalmente están separados por línea
descansos.
<a>
Esta etiqueta se utiliza para crear un enlace a recursos externos como una página web diferente, un correo electrónico, un
imagen, una sección diferente del documento actual, etc.<a> las etiquetas encierran el texto
representando el enlace y elenlace el atributo se utiliza para definir la URL de destino:<a
href="target_url">algún texto que el usuario verá</a>.
<img>
Esta etiqueta incrusta una imagen en el documento HTML. Aquí hay un ejemplo de cómo usarla:<img
src="[Link]" alt="">

<div> y<span>

16
 Estas etiquetas no tienen ningún significado especial. Se utilizan para crear secciones separadas dentro de
el documento. A menudo se emplean para estilizar y scripts (de lo cual hablaremos más adelante
en).
<ul>, <ol> y<li>
Esas etiquetas se utilizan para crear listas.<ul> define una lista desordenada,<ol> define una lista ordenada
lista, y<li> define un elemento de lista dentro de un elemento de lista. Aquí está <ul> en acción:

<ul>
<li>Café</li>
<li>Té</li>
<li>Leche</li>
</ul>

Siéntete libre de explorar y experimentar con estas etiquetas. Más adelante veremos juntos cómo incrustar medios.
formularios, tablas, y así sucesivamente, pero no dudes en experimentar concualquiera de las etiquetas HTMLSolo haz
asegúrate de que estás utilizando las etiquetas relevantes, ya que su semántica importa. La semántica HTML es enorme
afecta la facilidad con la que los motores de búsqueda encontrarán y señalarán tu página web.

Aprendizaje activo
Por determinar

Profundizando
So we looked at some basic, straightforward rules governing HTML tags and elements. But of
Por supuesto, todas las buenas reglas simples vienen con excepciones. Echemos un vistazo a esas.

Etiquetas autoconclusivas
Como vimos, un elemento HTML es una cadena de texto con sus etiquetas de apertura y cierre. Sin embargo, algunas etiquetas no pueden

enclose text. El<img> La etiqueta es un ejemplo fácil de entender. El navegador reemplaza el <img>
etiqueta con la imagen solicitada y elimina todo el texto dentro del elemento de imagen. Por esa razón, el
<img> es una etiqueta de autocierre que define un elemento HTML por sí mismo sin ninguna etiqueta de cierre.
Aquí hay un texto antes de un elemento de imagen
<img src="[Link]" alt="">
Aquí hay un texto después de un elemento de imagen

Una etiqueta autoconclusiva puede tener una sintaxis especial. Puedes añadir un carácter a/ antes del cierre de la etiqueta.
corchete angular, pero no tienes que hacerlo:

<img src="[Link]" alt="">

vs.
<img src="[Link]" alt="" />

Nota: Debido a que una sola etiqueta a veces define un elemento HTML completo, las personas a menudo reciben
confused between tags and elements, even for elements that require opening and closing tags.

Elementos especiales
En HTML, hay dos elementos especiales que no están hechos de etiquetas. Son esenciales y los cubriremos.
ahora mismo.

17
Tipo de documento
El doctype es una declaración formal, colocada al principio de un documento HTML, que el
el documento es un documento HTML estándar. Se ve así:
<!DOCTYPE html>

HTML es más formal ahora que antes. Los navegadores tienen dos modos de renderizado para HTML
documentos para que puedan manejar documentos antiguos heredados. Hay un "modo peculiar" para documentos antiguos
y el "modo estándar" para nuevos documentos. Si el navegador no encuentra el doctype en el
Al principio del documento, el navegador usará el modo quirks. No quieres eso, porque los quirks
el modo no es ni de cerca tan confiable o consistente como el modo estándar.

Mejor práctica: Le instamos a agregar un doctype a todos sus documentos HTML para asegurarse
el navegador utiliza el "modo estándar".

Comments
Los comentarios son elementos muy especiales. Son notas que pones en tu documento HTML para tu
necesidades propias. El navegador no muestra comentarios a tu usuario.

En HTML, los comentarios son texto encerrado entre <!-- y -->

<!-- This is a comment. It won't show up in the browser. -->

Este texto aparece en el navegador.

Estructura del documento HTML

La estructura básica de un documento HTML se define con un conjunto de etiquetas especiales. Los elementos
definidos por estas etiquetas no pueden ocurrir más de una vez en un documento dado, y no tienen que ocurrir en
todo (excepto por el elemento de título obligatorio). El navegador proveerá para la falta de implícito
elementos.
<html>
Defines the document'srootelement. Each HTML document contains only onerootelement
que contiene todos los demás elementos. No puedes incluir elementos fuera del elemento raíz.
<head>
Define el elemento 'head' del documento. El navegador no muestra este elemento, que solo
lleva metadatos como el título y la descripción. Los navegadores pueden utilizar metadatos para mejorar el
la experiencia del usuario, y lo discutiremos más adelante.
<cuerpo>
Define el elemento del cuerpo del documento. Solo hay un elemento del cuerpo dentro de un HTML.
documento y siempre viene después del elemento de encabezado. Todo lo que el usuario verá va en el
cuerpoelemento.
<title>
Define el elemento title del documento. El elemento title es el único elemento HTML obligatorio.
y va dentro del elemento del encabezado ya que el título es parte de los metadatos mostrados en varios
lugares (por ejemplo, la pestaña del navegador o como parte de un resultado de motor de búsqueda).

Formal vs. válido

Este es el documento HTML formal más simple que puedes escribir:
<!DOCTYPE html>

18
<html>
<cabeza>
<title>A formal HTML document</title>
</head>
<cuerpo>
<!-- Agrega algo de contenido aquí -->
</cuerpo>
</html>

Si omites todos los elementos opcionales, este es el documento HTML válido más sencillo que puedes escribir:

<!DOCTYPE html>
<title>This is a very small HTML document</title>

Mejor práctica: Te recomendamos que uses la estructura formal. Si no separas claramente <head>-
material y <body>-material, es fácil cometer errores que podrían llevar a comportamientos inesperados del navegador
comportamiento.

Elementos superpuestos
Para concluir nuestro resumen sobre las etiquetas HTML, vale la pena mencionar que si los elementos se pueden anidar, ellos
no se pueden superponer.

¿Qué son los elementos superpuestos? Aquí hay un ejemplo:

<p> </p>
mi párrafo comienza aquí
<strong>
algún texto importante
</p>
<p>
un segundo párrafo
</strong>
y el elemento fuerte terminó justo por encima
</p>

En este ejemplo, el elemento fuerte se superpone (comienza dentro del primer párrafo y termina dentro del
Segundo párrafo). Esa es la forma incorrecta de codificar. Deberías escribir esto:

<p>
mi párrafo comienza aquí
<strong>
un texto importante
</strong>
</p>
<p>
<strong>
un segundo párrafo
</strong>
con otro elemento fuerte en él
</p>

En un caso simple como este, el navegador generalmente puede entender lo que quieres decir, pero la codificación incorrecta a menudo

tiene consecuencias graves, especialmente cuando comienzas a usarCSS oJavaScript(como haremos pronto).
Supongamos que hemos estado utilizando un<div> etiqueta, decir, en lugar de<p> y<strong> tags:

<div>
mi párrafo comienza aquí
<div>

19
algún texto importante
</div>
<div>
un segundo párrafo
</div>
y mi párrafo termina aquí
</div>

¿Cómo se supone que debes saber si hay un solapamiento o no? Es imposible porque esto es algo
código válido de adivelemento con dos elementos anidados! Así que presta atención a esto si no quieres
comportamientos extraños con tus futuros documentos HTML.

Verifica tu HTML
Es buena práctica confirmar que tu código HTML es correcto. La mejor manera de hacerlo es a través de
Validador HTML del W3C, una herramienta en línea que lee cualquier documento HTML y te dice si el
el documento cumple completamente con las especificaciones HTML. Si el código es inválido, el validador proporciona
información sobre los errores de codificación.

Nota: Debido a la forma en que está hecho este validador, si tienes un documento HTML lleno de errores,
siempre corrige el primer error y revalida el documento. Un solo error puede crear muchos
errores subsecuentes, así que nunca te enfoques en el último error, siempre enfócate en el primero.

Próximos pasos
Ahora deberías poder escribir tu primer documento HTML completo y tener un borrador de un
sitio web funcional.

20