Introducción a HTML
❮ AnteriorPróximo ❯
HTML es el lenguaje de marcado estándar para crear páginas web.
¿Qué es HTML?
HTML significa lenguaje de marcado de hipertexto
HTML es el lenguaje de marcado estándar para crear páginas web.
HTML describe la estructura de una página web
HTML consta de una serie de elementos
Los elementos HTML le indican al navegador cómo mostrar el contenido
Los elementos HTML etiquetan fragmentos de contenido como "esto es un encabezado", "esto es un párrafo",
"esto es un enlace", etc.
Un documento HTML simple
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Pruébelo usted mismo »
Ejemplo explicado
La <!DOCTYPE html>declaración define que este documento es un documento HTML5
El <html>elemento es el elemento raíz de una página HTML.
El <head>elemento contiene metainformación sobre la página HTML
El <title>elemento especifica un título para la página HTML (que se muestra en la barra de título del navegador
o en la pestaña de la página)
El <body>elemento define el cuerpo del documento y es un contenedor para todo el contenido visible, como
encabezados, párrafos, imágenes, hipervínculos, tablas, listas, etc.
El <h1>elemento define un encabezado grande
El <p>elemento define un párrafo
¿Qué es un elemento HTML?
Un elemento HTML se define mediante una etiqueta de inicio, algún contenido y una etiqueta final:
< tagname > El contenido va aquí... < /tagname >
El elemento HTML es todo, desde la etiqueta de inicio hasta la etiqueta final:
< h1 > Mi primer encabezado < /h1 >
< p > Mi primer párrafo. < /p >
Start tag Element content End tag
<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br> none none
Nota: Algunos elementos HTML no tienen contenido (como el elemento <br>). Estos elementos se denominan
elementos vacíos. ¡Los elementos vacíos no tienen etiqueta de cierre!
Navegadores web
El propósito de un navegador web (Chrome, Edge, Firefox, Safari) es leer documentos HTML y mostrarlos
correctamente.
Un navegador no muestra las etiquetas HTML, sino que las utiliza para determinar cómo mostrar el documento:
Estructura de la página HTML
A continuación se muestra una visualización de la estructura de una página HTML:
<html>
<cabeza>
<title>Título de la página</title>
</cabeza>
<cuerpo>
<h1>Esto es un encabezado</h1>
<p>Este es un párrafo.</p>
<p>Este es otro párrafo.</p>
</cuerpo>
</html>
Nota: El contenido dentro de la sección <body> se mostrará en el navegador. El contenido dentro del elemento
<title> se mostrará en la barra de título del navegador o en la pestaña de la página.
Historial de HTML
Desde los primeros días de la World Wide Web, ha habido muchas versiones de HTML:
Year Version
1989 Tim Berners-Lee invented www
1991 Tim Berners-Lee invented HTML
1993 Dave Raggett drafted HTML+
1995 HTML Working Group defined HTML 2.0
1997 W3C Recommendation: HTML 3.2
1999 W3C Recommendation: HTML 4.01
2000 W3C Recommendation: XHTML 1.0
2008 WHATWG HTML5 First Public Draft
2012 WHATWG HTML5 Living Standard
2014 W3C Recommendation: HTML5
2016 W3C Candidate Recommendation: HTML 5.1
2017 W3C Recommendation: HTML5.1 2nd Edition
2017 W3C Recommendation: HTML5.2
Este tutorial sigue el último estándar HTML5.
Ejemplos básicos de HTM
En este capítulo mostraremos algunos ejemplos básicos de HTML.
No te preocupes si usamos etiquetas que aún no conoces.
Documentos HTML
Todos los documentos HTML deben comenzar con una declaración de tipo de documento: <!DOCTYPE html>.
El documento HTML en sí comienza con <html>y termina con </html>.
La parte visible del documento HTML está entre <body>y </body>.
Ejemplo
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
La declaración <!DOCTYPE>
La <!DOCTYPE>declaración representa el tipo de documento y ayuda a los navegadores a mostrar las páginas web
correctamente.
Sólo debe aparecer una vez, en la parte superior de la página (antes de cualquier etiqueta HTML).
La <!DOCTYPE>declaración no distingue entre mayúsculas y minúsculas.
La <!DOCTYPE>declaración para HTML5 es:
<!DOCTYPE html>
Encabezados HTML
Los encabezados HTML se definen con las etiquetas <h1>to .<h6>
<h1>define el encabezado más importante. <h6>define el encabezado menos importante:
Ejemplo
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3\
Párrafos HTML
Los párrafos HTML se definen con la <p>etiqueta:
Ejemplo
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p title="About W3Schools">W3Schools is a web developer's site.</p>
Title muesta información adicional al pasar el ratón sobre el párrafo
Enlaces HTML
Los enlaces HTML se definen con la etiqueta <a>:
Ejemplo
<a href="[Link] is a link</a>
El destino del enlace se especifica en el atributo href.
Los atributos se utilizan para proporcionar información adicional sobre los elementos HTML.
Aprenderá más sobre los atributos en un capítulo posterior.
Imágenes HTML
Las imágenes HTML se definen con la etiqueta <img> .
El archivo de origen ( src), el texto alternativo ( alt) width, y heightse proporcionan como atributos:
Ejemplo
<img src="[Link]" alt="[Link]" width="104" height="142">
Cómo ver el código fuente HTML
¿Alguna vez has visto una página web y te has preguntado "Oye, ¿cómo lo hicieron?"
Ver código fuente HTML:
Haga clic en CTRL + U en una página HTML o haga clic derecho en la página y seleccione "Ver código fuente de la
página". Se abrirá una nueva pestaña que contiene el código fuente HTML de la página.
Inspeccionar un elemento HTML:
Haz clic derecho en un elemento (o en un área en blanco) y elige "Inspeccionar" para ver de qué están compuestos los
elementos (verás tanto el HTML como el CSS). También puedes editar el HTML o el CSS sobre la marcha en el panel
Elementos o Estilos que se abre.
Elementos HTML
❮ AnteriorPróximo ❯
Un elemento HTML se define mediante una etiqueta de inicio, algún contenido y una etiqueta final.
Elementos HTML
El elemento HTML es todo, desde la etiqueta de inicio hasta la etiqueta final:
< tagname > El contenido va aquí... < /tagname >
Ejemplos de algunos elementos HTML:
< h1 > Mi primer encabezado < /h1 >
< p > Mi primer párrafo. < /p >
Start tag Element content End tag
<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br> none none
Nota: Algunos elementos HTML no tienen contenido (como el elemento <br>). Estos elementos se denominan
elementos vacíos. ¡Los elementos vacíos no tienen etiqueta de cierre!
Elementos HTML anidados
Los elementos HTML se pueden anidar (esto significa que los elementos pueden contener otros elementos).
Todos los documentos HTML constan de elementos HTML anidados.
El siguiente ejemplo contiene cuatro elementos HTML ( <html>, <body>, <h1> y <p>):
Ejemplo
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Ejemplo explicado
El <html>elemento es el elemento raíz y define todo el documento HTML.
Tiene una etiqueta de inicio <html>y una etiqueta final </html>.
Luego, dentro del <html>elemento hay un <body> elemento:
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
El <body>elemento define el cuerpo del documento.
Tiene una etiqueta de inicio <body>y una etiqueta final </body>.
Luego, dentro del <body>elemento hay otros dos elementos: <h1>y <p>:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
El <h1>elemento define un encabezado.
Tiene una etiqueta de inicio <h1>y una etiqueta de finalización </h1>:
<h1>My First Heading</h1>
El <p>elemento define un párrafo.
Tiene una etiqueta de inicio <p>y una etiqueta de finalización </p>:
<p>My first paragraph.</p>
Nunca te saltes la etiqueta final
Algunos elementos HTML se mostrarán correctamente, incluso si olvida la etiqueta final:
Ejemplo
<html>
<body>
<p>This is a paragraph
<p>This is a paragraph
</body>
</html>
Sin embargo, ¡nunca confíes en esto! Si olvidas la etiqueta final, pueden producirse resultados
inesperados y errores.
Elementos HTML vacíos
Los elementos HTML sin contenido se denominan elementos vacíos.
La <br>etiqueta define un salto de línea y es un elemento vacío sin etiqueta de cierre:
Ejemplo
<p>This is a <br> paragraph with a line break.</p
HTML no distingue entre mayúsculas y minúsculas
Las etiquetas HTML no distinguen entre mayúsculas y minúsculas: <P>significa lo mismo que <p>.
El estándar HTML no requiere etiquetas en minúsculas, pero W3C recomienda minúsculas en HTML
y exige minúsculas para tipos de documentos más estrictos como XHTML.
En W3Schools siempre utilizamos nombres de etiquetas en minúsculas.