
¿Que es el HTML?
HTML o Hyper Text Markup Language (lenguaje de marcas de hipertexto).
Es un lenguaje basado en etiquetas que es utilizado para la creación de paginas web.
El World Wide Web Consortium (W3C) es el encargado de mantener el standar de HTML.
La versión actual es la 5.
Sintaxis
Un elemento HTML tiene 3 tipos de componentes
- Etiquetas
- Atributos
- Entidates
Etiquetas
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
Apertura
Cierre
Contenido
La etiqueta de apertura consiste en el nombre del elemento rodeado de paréntesis angulares ("< >"), indica el comienzo de un nuevo elemento.
La etiqueta de cierre es similar a la de apertura solo que se agrega un slash ("/") antes del nombre del elemento, indica donde termina un elemento.
El contenido de un elemento normalmente esta compuesto de texto
Etiquetas anidadas
<p>Lorem ipsum dolor <b>sit amet, consectetur</b> adipiscing elit</p>
Es posible agregar elementos dentro de otros.
Solo se debe asegurar que los elementos sean anidados de manera correcta, esto es, que las etiquetas se abran y cierren en el mismo orden que fueron agregadas
Atributos
<p class="mi-clase">Lorem ipsum dolor sit amet</p>
Atributo
Los atributos contienen información adicional que no debe aparecer dentro del contenido.
Los atributos comúnmente siguen estas reglas
- Un espacio entre el atributo y el nombre del atributo
- El nombre del atributo seguido de un símbolo de =
- El valor del atributo envuelto en comillas " "
Atributos
Existen atributos globales los cuales pueden ser utilizados en cualquier etiqueta.
Atributo | Descripción |
---|---|
class | Especifica un nombre de clase, muy útil para agrupar uso común en estilos. |
id | Identificador único del elemento |
style | Declara estilos específicos para el elemento |
tabindex | Orden del elemento cuando se avanza con tabs |
title | Información extra del elemento |
Atributos
También existen atributos que ejecutan acciones tras un determinado evento.
Eventos de ventana como el onload que se ejecuta cuando la pagina a terminado de cargar.
Eventos de mouse como el onclick o el ondblclick
Atributos
La lista completa de atributos de evento la pueden consultar en el siguiente enlace
La lista completa de atributos globales la pueden consultar en el siguiente enlace
Entidades
Son códigos que se utilizan cuando queremos desplegar caracteres especiales, por ejemplo ">"
Elemento a mostrar | Entidad equivalente |
---|---|
< | < |
> | > |
" | " |
' | ' |
& | & |
Nota: Las entidades distinguen mayúsculas y minúsculas.
Entidades
Referencia a lista con mas entidades.
Anatomía de un documento HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<p>This is my page</p>
<!-- This is a comment -->
</body>
</html>
El DOCTYPE es el que le indica al navegador que versión de HTML se va utilizar.
Anatomía de un documento HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<p>This is my page</p>
<!-- This is a comment -->
</body>
</html>
La etiqueta html envuelve a todo el contenido de la pagina.
Anatomía de un documento HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<p>This is my page</p>
<!-- This is a comment -->
</body>
</html>
La etiqueta head funciona como un contenedor de todo el contenido que quieres incluir en la pagina pero que no quieres que se muestre.
Por ejemplo las hojas de estilo y javascript.
Anatomía de un documento HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<p>This is my page</p>
<!-- This is a comment -->
</body>
</html>
Este elemento asigna la codificación de caracteres que va manejar el documento.
Anatomía de un documento HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<p>This is my page</p>
<!-- This is a comment -->
</body>
</html>
La etiqueta title configura el titulo que va aparecer en la pestaña del navegador.
Anatomía de un documento HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<p>This is my page</p>
<!-- This is a comment -->
</body>
</html>
La etiqueta body es el contenedor de todo lo que se desea mostrar en la pagina.
Anatomía de un documento HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<p>This is my page</p>
<!-- This is a comment -->
</body>
</html>
Toda sección que se quiera marcar como comentario(invisible para el usuario) deberá ser colocada entre las etiquetas <!-- y -->
Etiquetas basicas
- Títulos
- Párrafos
- Saltos de linea
- Divisores
- Listas
- Tablas
- Enlaces
- Imágenes
- Video
- Audio
- Formularios
- Canvas
- SVG
Etiquetas basicas
Referencia completa de las etiquetas de html

Titulos
Existen 6 etiquetas de titulo — <h1>, <h2>, <h3>, <h4>, <h5>, <h6>.
El numero nos indica la importancia siendo el mas importante el 1 y el menos importante el 6.
<h1> Titulo 1 </h1>
<h2> Titulo 2 </h2>
Titulos
<h3> Titulo 3 </h3>
<h4> Titulo 4 </h4>
<h1>Titulo 1</h1>
<h2>Titulo 2</h2>
<h3>Titulo 3</h3>
<h4>Titulo 4</h4>
<h5>Titulo 5</h5>
<h6>Titulo 6</h6>
Parrafos
Se utilizan para estructurar el contenido de una pagina y se representan con la etiqueta <p>.
Todo el contenido que se coloque dentro de un parrafo se vera separado por un espacio de los siguientes parrafos
<html>
<body>
<p>Parrafo 1</p>
<p>Parrafo 2</p>
No es parrafo
No es parrafo 2
</body>
</html>
Parrafo 1
Parrafo 2
No es parrafo No es parrafo2
Salto de línea
Cuando se quiere forzar un salto de linea de utiliza la etiqueta <br>
<html>
<body>
<p>Este es<br>un parrafo<br>con saltos de linea</p>
</body>
</html>
Este es
un parrafo
con saltos de linea
Divisores
La etiqueta <div> se utiliza para contener en bloques el codigo HTML.
Por default ocupa todo el ancho de la pantalla, a menos que se cambie mediante CSS.
<html>
<body>
<div class="sl-block" data-block-type="text" style="height: auto; width: 600px; left: 174px; top: 405px; background-color: white;">
<p>Esto ya estaba dentro de un div</p>
</div>
</body>
</html>
Esto ya estaba dentro de un div
Listas
Existen 2 tipos de listas: Ordenadas y no Ordenadas
<html>
<body>
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
</body>
</html>
Las listas no ordenadas se declaran con la etiqueta <ul> y cada elemento de la lista con la etiqueta <li>
En este tipo de listas no importa el orden de los elementos por lo tanto se marcan con simbolos
- Elemento 1
- Elemento 2
- Elemento 3
Listas
<html>
<body>
<ol>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ol>
</body>
</html>
Las listas ordenadas se declaran con la etiqueta <ol> y cada elemento de la lista con la etiqueta <li>
Este tipo de listas se usan cuando queremos marcar un orden a seguir en los elementos de la misma, por lo cual normalmente van enumeradas.
- Elemento 1
- Elemento 2
- Elemento 3
Tablas
La estructura de una tabla se define atraves de varias etiquetas.
La etiqueta <table> crea la tabla
La etiqueta <tr> define una fila
La etiqueta <th> define un encabezado de columna
La etiqueta <td> define una celda en la fila
La etiqueta <thead> es un agrupador de los encabezados de la tabla, su uso es opcional.
La etiqueta <tbody> es un agrupador del contenido de la tabla, su uso es opcional.
Tablas
<table>
<thead>
<tr>
<th>Mes</th>
<th>Ahorros</th>
</tr>
</thead>
<tbody>
<tr>
<td>Enero</td>
<td>$100</td>
</tr>
<tr>
<td>Febrero</td>
<td>$80</td>
</tr>
</tbody>
</table>
Mes | Ahorros |
---|---|
Enero | 100 |
Febrero | 80 |
Nombre | Matematicas | Quimica | Fisica | Programacion |
David | 85 | 87 | 88 | 92 |
Richard | 91 | 80 | 82 | 72 |
Tony | 84 | 86 | 87 | 81 |
Scott | 71 | 79 | 80 | 89 |
Enlaces
Los enlaces son creados para redirigir al usuario a otro sitio, esto se realiza mediante la etiqueta <a> y el atributo href.
Solo se tiene que colocar alrededor del texto (o contenido) que se quiera convertir en enlace.
<p>Enlace a <a href="https://www.google.com.mx/">Google</a></p>
Enlace a Google
Enlaces
Los enlaces también nos pueden dirigir a un elemento especifico en una pagina, para esto se tienen que realizar 2 cosas:
- Crear el ancla a donde nos queremos enlazar mediante el atributo id
- Creamos en enlace con el valor del id que se busca
<h3 id="comentarios">Lista de comentarios</h3>
...
<a href="#comentarios">Ir a seccion de comentarios</a>
Enlaces
Atributo | Valor | Descripción |
---|---|---|
href | URL | La url del sitio al que se quiere redirigir |
download | filename | Especifica que se va descargar del enlace |
target | _blank
_self _parent |
Se abre el enlace en una nueva ventana o pestaña
Se remplaza la pagina actual con la del enlace Se abre el enlace en la ventana padre |
Atributos de la etiqueta <a>
Imagenes
Para insertar una imagen en una pagina se utiliza la etiqueta <img>

Imagenes
Atributos de la etiqueta <img>
Atributo | Valor | Descripción |
---|---|---|
src | URL | Especifica la dirección de la imagen |
height | pixeles | Especifica el alto de la imagen |
width | pixeles | Especifica el ancho de la imagen |
alt | texto | Texto alternativo que se muestra si no se encuentra la imagen |
<img width="1366" height="635" src="recursive.png"/>
Videos
Con el HTML5 se añadió una forma nativa de manejar vídeo mediante la etiqueta <video>.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Tu navegador no soporta la etiqueta video.
</video>
Videos
Soporte de formatos de video por navegador
Navegador | MP4 | WebM | Ogg |
---|---|---|---|
Internet Explorer | ✓ | ✗ | ✗ |
Chrome | ✓ | ✓ | ✓ |
Firefox | ✓ | ✓ | ✓ |
Safari | ✓ | ✗ | ✗ |
Opera | ✓ | ✓ | ✓ |
Videos
Atributos de la etiqueta <video>
Atributo | Valor | Descripción |
---|---|---|
autoplay | autoplay | Indica que el video se comienze a reprodución tan pronto este listo |
control | controls | Indica que los controles del reporductor deben ser mostrados |
src | URL | La dirección url del video |
height | pixeles | Ancho del video |
width | pixeles | Ancho del video |
Audio
La etiqueta <audio> provee una forma estandarizada para la reproducción archivos de audio.
<audio controls>
<source src="audio.ogg" type="audio/ogg">
<source src="audio.mp3" type="audio/mpeg">
Tu navegador no soporta el elemento audio
</audio>
Audio
Soporte de formatos de audio por navegador
Navegador | MP3 | Wav | Ogg |
---|---|---|---|
Internet Explorer | ✓ | ✗ | ✗ |
Chrome | ✓ | ✓ | ✓ |
Firefox | ✓ | ✓ | ✓ |
Safari | ✓ | ✓ | ✗ |
Opera | ✓ | ✓ | ✓ |
Audio
Algunos atributos de la etiqueta <audio>
Atributo | Valor | Descripción |
---|---|---|
autoplay | autoplay | Indica que el audio se debe comenzar a reproducir tan pronto este listo |
controls | controls | Indica que los controles del reporductor deben ser mostrados |
src | URL | La dirección url del audio |
Canvas
El elemento <canvas> se utiliza para dibujar gráficos en una pagina web mediante scripting (normalmente javascript).
Para gráficos 3d se recomienda utilizar WebGL
SVG
Scalable Vector Graphics(SVG) es un lenguaje de etiquetas basado en el xml para describir gráficos vectorizados bidimensionales.
Se crean mediante la etiqueta <svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" preserveAspectRatio="none" viewBox="0 3 32 26">
<g class="shape-element" fill="#000000">
<path d="M32 6.076c-1.177 0.522-2.443 0.875-3.771 ... 3.276-3.398z">
</path>
</g>
</svg>
Formularios
Las formas en html son el punto principal de interacción entre el usuario y la pagina web.
El contenido que se captura en las formas web normalmente es enviado al servidor para su procesamiento.
Los formularios se componen con diferentes elementos nativos de html
Form
La etiqueta <form> es la que define los formularios.
Es un contenedor de elementos que mediante atributos define el comportamiento del formulario.
La mayoría de los atributos son opcionales, pero hay 2 que se consideran buena practica, estos son:
- Action: Define la dirección URL a la que la información de la forma sera enviada.
- Method: Define el método http que se va utilizar para el envió de la información (GET,POST).
<form action="Mi URL" method="post">
...
</form>
Campos de texto
Los campos para capturar texto se definen de la siguiente forma.
<input type="text" />
↓
Campos de contraseña
Similar a los campos de texto, solo que ocultan el texto capturado. Se utilizan de la siguiente forma
<input type="password" />
↓
Casilla de verificacion
Se utilizan para selecciones múltiples, donde es posible no seleccionar ninguna hasta seleccionar todas.
Se utiliza de la siguiente forma.
<form>
<input type="checkbox" name="dia" value="Lunes"> Hoy es lunes<br>
<input type="checkbox" name="dia" value="Martes"> Hoy es martes
</form>
Botón de selección
Se utilizan para realizar una selección de única entre un numero determinado de opciones.
Se utiliza de la siguiente forma.
<form>
<input type="radio" name="dia" value="Lunes"> Hoy es lunes<br>
<input type="radio" name="dia" value="Martes"> Hoy es martes
</form>
Área de texto
Se utilizan para capturar texto con la peculiaridad que permite multiples lineas. Se utiliza de la siguiente forma.
<textarea name="message" rows="10" cols="30">
</textarea>
El atributo cols nos indica el ancho del elemento medido en caracteres.
El atributo rows especifica el alto del elemento medido en lineas de texto.
↓
Lista de selección
Tienen un funcionamiento muy similar a los botones de seleccion, son mas utiles que estos cuando se tienen que desplegar muchas opciones
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
Lista de selección multiple
Similar a las listas de selección solo con la peculiaridad que se pueden seleccionar varios elementos a la vez.
<select name="cars" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
Botones
Son elementos a los que se les puede dar click.
Estos se pueden crear a partir de dos etiquetas.
<button type="button" onclick="alert('click')">Click</button>
<input type="button" onclick="alert('click')" value="Click">
↓
Botones
La diferencia entre los anteriores es que un elemento <button> puede contener mas elementos html entre la apertura y el cierre(texto, imágenes, etc).
Ademas los elementos <button> son mas sencillos de aplicar estilo, a diferencia de los input que solo se puede especificar texto.
Submit
Son botones que sirve para realizar el envío de un formulario.
<form action="action_page.php">
Nombre:<br>
<input type="text" name="firstname"><br>
Apellido:<br>
<input type="text" name="lastname"><br>
<input type="submit" value="Submit">
</form>
HTML 5 Input Types
Con el HTML5 se agregaron nuevos tipos para la etiqueta input.
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
En el siguiente enlace se puede consultar la referencia de estos elementos: w3schools
HTML
By Alan
HTML
- 139