Creación de sitios web: HTML - Hyper Text Markup Language

Página 10: HTML - Hyper Text Markup Language

/es/creacion-de-sitios-web/que-es-una-url/content/

HTML - Hyper Text Markup Language

HTML es un lenguaje que describe un documento hipertextual.

HTML no es un lenguaje de programación, es un lenguaje descriptivo compuesto por etiquetas, un texto que marca el inicio y final de un elemento html. Las etiquetas son interpretadas por el navegador y el resultado es lo que vemos en la pantalla de nuestros dispositivos.

Estructura de una etiqueta html

Etiquetas básicas

A continuación verás las etiquetas básicas que debe tener todo documento html:

html

La etiqueta html es la primera etiqueta que aparece en un documento, precisamente marca el inicio y fin de todo el documento.

head

En la etiqueta head describimos las cosas que son comunes al documento como el título, hojas de estilos y scripts.

body

Dentro de esta etiqueta escribimos el contenido del documento como tal.

Etiquetas del encabezado

Estas etiquetas deben ir dentro de la etiqueta head. Describen metadatos y recursos comunes a todo el documento.

title

Dentro de la etiqueta title debemos escribir el título del documento, este será visible en la pestaña del navegador.

meta

La etiqueta meta se usa para describir información del documento, como el autor, una breve descripción y algunas palabras clave. Esta información es importante para que los buscadores y las redes sociales puedan saber de qué se trata la página.

link

Con la etiqueta link podemos hacer referencia a un recurso externo, su uso más común es asociar una o más hojas de estilo a un documento HTML.

script

La etiqueta script se usa para hacer referencia a archivos externos de código o puede también incluir directamente código dentro de ella. De esta forma asociamos código JavaScript a los documentos HTML.

Etiquetas estructurales

Estas etiquetas no tienen una visualización en particular, pero nos son útiles para estructurar el documento.

div

El objetivo de la etiqueta div es agrupar elementos diversos dentro de un único bloque, esto es útil por ejemplo al momento de aplicar estilos css, pues podemos aplicar un estilo a todos los elementos que estén dentro del mismo bloque div.

span

Con la etiqueta span también es posible agrupar elementos, pero no dentro de un bloque, sino en forma lineal.

header

La etiqueta header nos permite definir el encabezado del documento, generalmente allí encontramos el logo y menú de un sitio web.

footer

Con la etiqueta footer definimos el pie del documento, por lo general tenemos aquí los enlaces a información corporativa, preguntas frecuentes y datos de contacto.

Etiquetas de interfaz de usuario

Estas etiquetas presentan controles visuales en el documento, las usamos para recibir información del usuario, por ejemplo en formularios.

select

La etiqueta select presenta una lista de opciones desplegable. Puedes hacer clic sobre las flechas en la parte de visualización para que pruebes su funcionamiento. 

button

Como su nombre lo indica esta etiqueta presenta un botón.

checkbox

Esta etiqueta presenta un botón de tipo check. Este tipo de botones se suele usar en grupos para mostrar múltiples opciones.

radio button

Esta etiqueta presenta un botón de tipo radio. Este tipo de botones se suele usar en grupos para elegir una única opción entre varias.

input

Esta etiqueta se usa para presentar al usuario un campo de entrada de datos que pueden ser de tipo texto, numérico, fecha u otros. Puedes escribir dentro del campo para que compruebes su funcionamiento. 

textarea

Esta etiqueta presenta un área que permite la entrada de una mayor cantidad de texto. Puedes escribir un párrafo dentro del campo para que compruebes su funcionamiento. 

Etiquetas multimedia

Estas etiquetas nos permiten incluir elementos diferentes a texto. Algunas aparecen a partir de la versión 5 del estándar HTML y hacen posible la reproducción de audio, video y elementos 2D y 3D sin utilizar plugins adicionales.

img

A través de la etiqueta img podemos incluir imágenes estáticas o animadas en nuestro documento html.

audio

Con la etiqueta audio podemos incluir archivos de audio en el documento y reproducirlos directamente a través del browser o navegador.

video

Con la etiqueta video podemos incluir videos en el documento, con la posibilidad de mostrar controles de reproducción, como pausa, avance y ver en pantalla completa.

canvas

La etiqueta canvas nos permite incluir gráficos personalizados en 2D o 3D, es un área del documento en donde podemos dibujar a través de código.

Etiquetas de formato

Estas etiquetas representan elementos de texto con diferentes características.

Títulos

Los títulos van desde la mayor importancia (1) hasta la menor (6), con etiquetas desde h1 hasta h6.

Párrafo

Los párrafos se enmarcan entre la etiqueta p, agrupando un texto que tiene sentido completo.

Listas

Tenemos dos tipos de listas: las listas que se numeran automáticamente con la etiqueta ol y las listas con ítems sin numerar con la etiqueta ul.

Etiquetas de hipertexto

Estas etiquetas son las que permiten navegar de un documento a otro en el modelo de lectura hipertextual.

Enlace

La etiqueta (a) representa los enlaces a otros documentos html en la web, se componen del texto visible y la url de destino.

Un documento html es un archivo de texto plano con extensión .html

/es/creacion-de-sitios-web/css-cascading-style-sheets/content/