Qué Es HTML

¿Qué es HTML?
Definiéndolo de forma sencilla, "HTML es el lenguaje que se utiliza para crear las páginas web a las
que se accede mediante internet". Más concretamente, HTML es el lenguaje con el que se
"escriben" la mayoría de páginas web.
Los diseñadores utilizan el lenguaje HTML para crear páginas web, los programas que se emplean
generan páginas escritas en HTML y los navegadores que utilizamos (por ejemplo Google Chrome,
Opera o Mozilla Firefox) muestran las páginas web después de leer e interpretar su contenido
HTML.
Aunque HTML es un lenguaje que utilizan los ordenadores y los programas de diseño de páginas
web, es muy fácil de entender y escribir por parte de las personas. En realidad, HTML son las siglas
de HyperText Markup Language y más adelante se verá el significado de cada una de estas
palabras. El lenguaje HTML es un estándar reconocido en todo el mundo y cuyas normas define un
organismo sin ánimo de lucro llamado World Wide Web Consortium, más conocido como W3C.
Como se trata de un estándar reconocido por todas las empresas relacionadas con el mundo de
internet, una misma página escrita en HTML se visualizará de forma muy similar en cualquier
navegador bajo distintos sistemas operativos.
El propio W3C define el lenguaje HTML como "un lenguaje reconocido universalmente y que
permite publicar información de forma global". Desde su creación, el lenguaje HTML ha pasado de
ser un lenguaje utilizado exclusivamente para crear documentos electrónicos a emplearse en
diversas aplicaciones electrónicas especializadas como buscadores, tiendas "en línea" y banca
electrónica.
2. ¿Qué lenguaje es HTML y CSS?
HTML y CSS son los principales lenguajes de programación web, como ya te hemos enseñado, y
uso principal es crear páginas y aplicaciones web. La diferencia crucial entre los dos es que el
HTML se utiliza para la creación de las páginas web y el CSS se utiliza para controlar el estilo y el
diseño de las páginas web.
CSS son las siglas en inglés para «hojas de estilo en cascada» (Cascading Style Sheets).
Básicamente, es un lenguaje que maneja el diseño y presentación de las páginas web, es decir,
cómo lucen cuando un usuario las visita. Funciona junto con el lenguaje HTML que se encarga del
contenido básico de los sitios.
Cómo se estructura el CSS
Ahora que ya sabes qué es el CSS y conoces sus conceptos básicos, es hora de profundizar un poco
más en la estructura del lenguaje en sí. Ya hemos visto muchos de los conceptos que aparecen en
este artículo; puedes volver para recapitular si más adelante encuentras conceptos confusos.
Conocimientos básicos de informática, tener el software básico instalado, conocimientos básicos

Prerrequisitos: de trabajo con archivos, conceptos básicos de HTML (véase Introducción al HTML) y una idea
de cómo funciona el CSS.
Objetivo: Aprender en detalle las estructuras de sintaxis fundamentales de CSS.
Aplicar CSS al HTML

Lo primero que veremos son los tres métodos para aplicar CSS a un documento.
Hoja de estilo externa
En Empezar con el CSS, vinculamos una hoja de estilo externa a nuestra página. Este es el método
más común y útil para adjuntar CSS a un documento, porque puedes vincular el CSS a varias
páginas y dar estilo a todas ellas con la misma hoja de estilo. En la mayoría de los casos, las
diferentes páginas de un sitio web se verán más o menos iguales, de modo que puedes usar el
mismo conjunto de reglas para el aspecto y la interacción básicos.
Una hoja de estilo externa significa que el CSS está escrito en un archivo independiente con una
extensión .css y que lo vinculas desde un elemento <link> de HTML:
HTMLCopy to Clipboard
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Mi experimento CSS</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>¡Hola, mundo!</h1>
<p>Este es mi primer ejemplo de CSS</p>
</body>
</html>
El archivo CSS podría parecerse a esto:
CSSCopy to Clipboard
h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}
p{
color: red;
}
El atributo href del elemento <link> tiene que hacer referencia a un archivo de tu sistema de
archivos.
En el ejemplo anterior, el archivo CSS está en la misma carpeta que el documento HTML, pero
puedes colocarlo en otro lugar y especificar la ruta adecuada. Por ejemplo:

<link rel="stylesheet" href="styles/style.css" />

<link rel="stylesheet" href="styles/general/style.css" />

<link rel="stylesheet" href="../styles/style.css" />
Hoja de estilo interna
Una hoja de estilo interna es cuando no hay ningún archivo CSS externo, sino que colocas tu CSS
dentro de un elemento <style> contenido dentro del elemento <head> del HTML.
En este caso, el HTML se vería así:
<!doctype html>
<html>
<head>
<style>
h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}
p{
color: red;
}
</style>
</head>
<body>
<h1>¡Hola, mundo!</h1>
<p>Este es mi primer ejemplo de CSS</p>
</body>
</html>
Esto puede ser útil en algunas circunstancias (tal vez estés trabajando con un sistema de
administración de contenido donde no sea posible modificar los archivos CSS directamente), pero
no es tan eficiente como las hojas de estilo externas: en una página web, deberías repetir el CSS en
cada página y actualizarlo en varios lugares en caso de que hubiera que hacer cambios.
Estilos en línea
Los estilos en línea son declaraciones CSS que afectan a un solo elemento, contenido dentro de un
atributo de style:
<!doctype html>
<html>
<head>
</head>
<body>
<h1 style="color: blue;background-color: yellow;border: 1px solid black;">
¡Hola mundo!
</h1>
<p style="color:red;">Este es mi primer ejemplo de CSS</p>
</body>
</html>
¡No hagas esto a menos que realmente tengas que hacerlo! Es realmente malo a la hora de
realizar el mantenimiento (puede que tengas que actualizar la misma información varias veces en
un mismo documento), y además mezcla tu información CSS para la presentación con tu
información HTML para la estructura, lo que dificulta la lectura y la comprensión del código.
Mantener los diferentes tipos de código separados facilita trabajar con ellos.
Hay ciertos lugares donde los estilos en línea son más comunes, o incluso aconsejables. Es posible
que tengas que recurrir a ellos si realmente tu entorno de trabajo es restrictivo (tal vez el CMS solo
te permita editar el cuerpo del HTML). También verás que se usan mucho en el correo electrónico
en formato HTML para lograr la máxima compatibilidad con el mayor número de clientes.
Estructura web y documentación
Además de definir partes individuales de tu página (como un párrafo o una

imagen), HTML también dispone de elementos de bloque que se pueden utilizar para estructurar
las distintas áreas de tu sito web (tal como el encabezado, el menú de navegación o la parte del
contenido principal. En este artículo veras cómo planificar una estructura básica de página web y
escribirás el HTML que representa esa estructura.
Prerrequisitos: Estar familiarizado con HTML, cubierto en [Empezar con

HTML](/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started). Aplicación de formato a texto en
documentos HTML, según lo expuesto en la sección [Fundamentos de texto
HTML](/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals). Funcionamiento de los
hipervínculos, cubierto en [Crear
hipervínculos](/es/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks).
Objetivo: Aprender a estructurar tu documento usando atributos semánticos y construir la estructura de una página
web sencilla.
PARA QUÉ SIRVE CONOCER LA ESTRUCTURA HTML
La estructura HTML hace uso de etiquetas y atributos predefinidos para indicarle al navegador
cómo mostrar su contenido; es decir, en qué formato, estilo, tamaño de fuente, imágenes o videos
se debe configurar. Básicamente, su función es describir la estructura general de una página y
organizar la forma en que los usuarios podrán visualizarla.
Es importante recalcar que el lenguaje HTML no es un lenguaje de programación, sino de marcado.
Esto significa que solo sirve para crear páginas web estáticas. Sin embargo, sí es posible combinar
este lenguaje con otros para desarrollar sitios mucho más dinámicos y atractivos.
Una vez que conoces las definiciones más relevantes sobre el lenguaje y la estructura HTML, te
diremos cómo se integran y te damos un ejemplo para que comprendas mejor su contenido.
Qué incluye la estructura HTML?
La estructura HTML de una página web se compone de las etiquetas <html>, que indica el
comienzo de la página; <head>, que contiene información más descriptiva sobre el sitio; y <body>,
que conforma todos los elementos visibles de la página.
Como puedes notar, todas las etiquetas están constituidas al inicio y al final por los signos < y >,
que representan precisamente la apertura y el cierre de cada elemento para que el lenguaje HTML
pueda funcionar. En este sentido, existen dos tipos de etiquetas HTML:
 Etiquetas emparejadas. Vienen en pares y tienen una apertura y cierre. Tal como las que
conoces: < >.
 Etiquetas vacías. Se refiere a las etiquetas que no requieren cierre.
HTML. Y SUS ETIQUETAS
Las "tags" HTML, o "etiquetas" HTML, son códigos utilizados para "marcar" el texto de una página
web, con el fin de dar instrucciones al navegador sobre cómo mostrarlo.
Es decir, las etiquetas HTML son el lenguaje utilizado para estructurar y definir el contenido en un
documento HTML. Estas etiquetas se encuentran en el HTML (o Lenguaje de Marcado de
Hipertexto) de cada página.
Cada etiqueta contiene instrucciones sencillas que indican al navegador cómo dar formato al texto
y a definir los diversos elementos de la página web. Al aplicar estas etiquetas de marcado a los
diferentes elementos del texto, se indica al navegador cómo mostrarlos al usuario, lo que permite
crear páginas web estructuradas y con un diseño coherente.
¿Para que sirven las etiquetas HTML?
Por ejemplo, puedes utilizar etiquetas HTML para aplicar cursivas, crear saltos de línea, insertar
objetos multimedia, crear listas con viñetas o para definir diferentes tipos de contenido en una
página web, como encabezados, párrafos, imágenes, enlaces, formularios y mucho más.
En resumen, las etiquetas HTML son esenciales para diseñar y organizar el contenido de una
página web de manera efectiva y clara.
¿Cómo leen las páginas web las tags HTML?
Los servidores leen el código HTML para entender y mostrar el contenido. Leerá el HTML de arriba
abajo, de forma muy parecida a como estás leyendo esta guía.
Puedes utilizar tantas o tan pocas etiquetas como quieras para dar formato al contenido. Sin
embargo, hay algunas reglas y tags HTML esenciales que deberás seguir.
¿Cómo se compone una etiqueta en HTML?
Una tag HTML contiene tres partes:
1. Una etiqueta de apertura — esta empezará con un símbolo < >.
2. Contenido — unas breves instrucciones sobre cómo mostrar el elemento en la página.
3. Una etiqueta de cierre — cerrará con un símbolo </ >.
Sin embargo, algunas tags HTML pueden no cerrarse. Esto significa que la etiqueta HTML no
necesita cerrarse con un </ >. Normalmente, usarás etiquetas no cerradas para metadatos o saltos
de línea.
¿Cuáles son las etiquetas HTML básicas?

Las etiquetas HTML más utilizadas son:
 <!DOCTYPE>: Se utiliza para especificar la versión de HTML que se está utilizando en la

página.
 <html>: Define el inicio y el final de la página web.
 <head>: Define la sección de encabezado de la página, donde se incluyen elementos como

el título de la página, metaetiquetas, scripts, entre otros.
 <title>: Define el título de la página web que aparece en la pestaña del navegador.
 <body>: Define la sección del cuerpo de la página web, donde se incluyen todos los
elementos que se mostrarán en la página.
 <h1> a <h6>: Define los encabezados o títulos de diferentes niveles de jerarquía en la

página web. El uso de esta etiqueta formateará cualquier texto entre la etiqueta <h> de
apertura y la etiqueta </h> de cierre como un Título o subtítulo. Por ejemplo,
en <h>Etiqueta de encabezamiento</h2>, <h2> y </h2> serían las etiquetas HTML y
"Etiqueta de encabezamiento" es el elemento HTML, es decir, el encabezamiento de la
página.
 <a>: Define un enlace que el usuario puede hacer clic para ir a otra página web o a una
sección diferente de la misma página.
 <img>: Define una imagen que se mostrará en la página web.
 <p>Etiqueta de párrafo</p>: Define un párrafo de texto. Las etiquetas <p> y </p> son
etiquetas HTML y la "Etiqueta de párrafo" es el elemento HTML, es decir, el texto de la
página. Esta etiqueta formatea cualquier texto entre la etiqueta <p> de apertura y la
etiqueta </p> de cierre como un párrafo estándar o texto de cuerpo principal.
 <b>Etiqueta de negrita</b>: Esta etiqueta dará formato de negrita a cualquier texto que
se encuentre entre la etiqueta <b> de apertura y la etiqueta </b> de cierre. Aquí, <b> y
</b> son las etiquetas HTML y la "etiqueta de negrita" es el elemento HTML, es decir, el
texto de la página.
 <i>Etiqueta de cursiva</i>: Esta etiqueta formateará como cursiva cualquier texto entre la
etiqueta de apertura <i> y la etiqueta de cierre </i>. Aquí, <i> y </i> son las etiquetas
HTML y "Etiqueta cursiva" es el elemento HTML (el texto de la página).
 <u>Etiqueta de subrayado</u>: Esta etiqueta formateará cualquier texto entre la etiqueta

<u> de apertura y la etiqueta </u> de cierre como subrayado. Aquí, <u> y </u> son las
etiquetas HTML y "Etiqueta de subrayado" es el elemento HTML, es decir, el texto de la
página.

Qué Es HTML

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Qué Es HTML

Cargado por

Copyright:

Formatos disponibles

¿Qué es HTML?

Conocimientos básicos de informática, tener el software básico instalado, conocimientos básicos

Objetivo: Aprender en detalle las estructuras de sintaxis fundamentales de CSS.

Aplicar CSS al HTML

Además de definir partes individuales de tu página (como un párrafo o una

Prerrequisitos: Estar familiarizado con HTML, cubierto en [Empezar con

¿Para que sirven las etiquetas HTML?

¿Cómo leen las páginas web las tags HTML?

¿Cómo se compone una etiqueta en HTML?

Una tag HTML contiene tres partes:

1. Una etiqueta de apertura — esta empezará con un símbolo < >.

2. Contenido — unas breves instrucciones sobre cómo mostrar el elemento en la página.

3. Una etiqueta de cierre — cerrará con un símbolo </ >.

¿Cuáles son las etiquetas HTML básicas?

 <!DOCTYPE>: Se utiliza para especificar la versión de HTML que se está utilizando en la

 <html>: Define el inicio y el final de la página web.

 <head>: Define la sección de encabezado de la página, donde se incluyen elementos como

 <h1> a <h6>: Define los encabezados o títulos de diferentes niveles de jerarquía en la

 <img>: Define una imagen que se mostrará en la página web.

 <u>Etiqueta de subrayado</u>: Esta etiqueta formateará cualquier texto entre la etiqueta

También podría gustarte