Cuando accedemos a una página web debemos notar que lo que está sucediendo

en nuestro navegador web está pidiendo un documento de texto al sistema donde

está almacenada página web, en el navegador existe una opción para poder

observar el código fuente que nos mostrará en dónde está el documento. El

navegador normalmente no nos muestra esa información literalmente, sino que la

interpreta y va dibujando los elementos de una página web.

¿Qué es HTML?

El documento que lee el navegador está escrito en un lenguaje de marcado llamado

HTML, que son las siglas de HyperText Markup Language (Lenguaje de marcas

de hipertexto), o lo que es lo mismo, un lenguaje de etiquetas que permite incluir o

hacer referencia a todo tipo de información.

 HyperText, cuyo significado es hipertexto, que no es más que un texto que

enlaza con otros contenidos, que pueden ser otro texto u otro archivo. Esto

es la base del funcionamiento de la web tal y como la conocemos, que no es

más que páginas y recursos interconectados.

 Markup, que significa marca o etiqueta, ya que todas las páginas web están

construidas en base a etiquetas, desde las primeras versiones hasta las

asetiquasde HTML5. Un e j e mpl o de una e t i que t a HTML e s l a que

últim

identifica a un párrafo, que se compone de la etiqueta, el contenido de la

etiqueta y el cierre del párrafo: <p>HOLA</p>

  Languaje, cuyo significado es lenguaje, porque HTML es un lenguaje, es

decir, tiene sus normas, tiene su estructura y una serie de convenciones que

nos sirven para definir tanto la estructura como el contenido de una web.

Definición de HTML5

sde f i ni r HTML5 c omo un e s t á nda r que s i r ve pa r a de f i ni r l a e s t r uc t ur a y e

odem
P

contenido de una página Web.

 Según la definición que aparece en Wikipedia:

HTML5 es un estándar que sirve como referencia del software que conecta con la

elaboración de páginas web en sus diferentes versiones, define una estructura

básica y un código (denominado HTML) para la definición de contenido de una

página web, como texto, imágenes, vídeos, juegos, entre otros.

 Según la definición que aparece https://lenguajehtml.com/html/

El documento que lee el navegador está escrito en un lenguaje de marcado llamado

HTML, que son las siglas de HyperText Markup Language (Lenguaje de marcas

de hipertexto), o lo que es lo mismo, un lenguaje de etiquetas que permite incluir o

hacer referencia a todo tipo de información.

¿Que es una etiqueta HTML5?

Las etiquetas HTML5 funcionan como parte de un código que cumple con una

función sencilla. Dicha función se basa en ayudar a los navegadores a entender el

contenido que contiene cada una de las etiquetas utilizadas. Además, es importante

resaltar que cada etiqueta posee distintos atributos que determinan cómo funciona

cada una. Todas inician con el símbolo “<” y terminan con el símbolo contrario,

“>”. Entre dichos símbolos debe ir el nombre correspondiente a la etiqueta para

que el navegador lo pueda asimilar como es debido.

Existen muchas etiquetas y cada una se utiliza para contener información y darle

un cierto significado a dicha información, dependiendo de la etiqueta que se trate.

Las etiquetas HTML tienen la siguiente estructura:

<etiqueta>contenido</etiqueta>

En HTML no se puede utilizar cualquier palabra como etiqueta (en el ejemplo

anterior, es incorrecto utilizar la etiqueta «etiqueta»). En su lugar, existen una serie

de etiquetas concretas, cada una de ellas con su finalidad y características propias,

que tendremos que utilizar según requiera la ocasión. Por norma general, las

etiquetas deben cerrarse para indicar donde finaliza su contenido.

En HTML no se puede utilizar cualquier palabra como etiqueta (en el ejemplo

anterior, es incorrecto utilizar la etiqueta «etiqueta»). En su lugar, existen una serie

de etiquetas concretas, cada una de ellas con su finalidad y características propias,

que tendremos que utilizar según requiera la ocasión. Por norma general, las

etiquetas deben cerrarse para indicar donde finaliza su contenido.

La estructura de las etiquetas HTML tiene el siguiente formato:

Etiqueta HTML

La parte esencial de una etiqueta HTML es lo que se denomina la etiqueta de

apertura. Se trata de escribir el nombre de la etiqueta en cuestión, colocándola

entre los carácteres < y >. Aunque el navegador lo permita si no es así, las

etiquetas HTML se deberían escribir siempre en minúsculas.

A tributos H TM L

En algunas etiquetas HTML, existen algunos atributos específicos (que pueden ser

opcionales u obligatorios). Los atributos determinan cierta información sobre la

etiqueta (o su modo de actuar) y generalmente van asociados a un valor

determinado. Este par atributo-valor se escribe después del nombre de la etiqueta,

separándola por espacio y antes del carácter > de la etiqueta de apertura:

Ejemplo de código HTML

A continuación, utilicemos la etiqueta <strong> (etiqueta utilizada para darle

importancia a una palabra sobre el resto) en el siguiente ejemplo:

<p>Dentro de este texto, esta <strong>palabra</strong> es más importante

que el resto.</p>

Obsérvese que en el ejemplo estamos utilizando dos etiquetas diferentes. La

etiqueta <p>, que contiene toda la frase, y la etiqueta <strong>, que contiene sólo

la palabra palabra. La primera etiqueta, <p>, se utiliza para contener párrafos,

mientras que la segunda etiqueta, <strong>, indica la palabra que tiene mayor

importancia del texto.

También se habrá observado que se pueden anidar etiquetas, esto es, incluir

etiquetas dentro de otras. Es algo que se hace continuamente en HTML y que a

medida que avancemos se tornará en algo habitual.

¿Qué es la semántica?

Uno de los principales objetivos de HTML5 es introducir información en un

documento HTML5 de forma que sea semántico y no visual. En el documento

HTML debe aparecer información correctamente individualizada, de modo que al

leer una página HTML comprendamos su significado, y si queremos cambiar la

apariencia, lo hagamos en el documento CSS. Esto es lo que comunmente se

conoce como separación de la presentación del contenido .

Ejem plo de sem ántica H TM L

Un ejemplo donde se ve claramente esto es con la etiqueta <b> de HTML 4 y

anteriores. Dicha etiqueta se utilizaba para poner en negrita (bold ) un texto

específico:

Hola, quiero resaltar esta <b>palabra</b>.

En este caso, se está utilizando una propiedad de presentación (visual) en el

HTML, algo que no se debe hacer en HTML5. La misión de HTML5 es mantener

sólo contenido e información semántica en HTML5. Por ello, la forma de hacerlo

en HTML5 es la siguiente:

Hola, quiero resaltar esta <strong>palabra</strong>.

En este nuevo ejemplo, se reemplaza la etiqueta <b> (negrita, característica de

presentación) por <strong>, una etiqueta que indica información semántica

(importante, característica semántica). De esta forma, en el HTML5 sólo se está

añadiendo información particular sobre fragmentos de texto ejemplo:

strong {

font-weight: bold;

color: black;

De esta forma podríamos cambiar el estilo (negrita, colores, tipo de letra, etc ...)

independientemente de la información y contenido que existe en el HTML . Incluso

podríamos establecer el mismo estilo que en el texto, para que visualmente se vea

todo de forma uniforme, pero sin embargo, al leer la página HTML, el navegador

sabrá siempre que fragmentos de texto son más importantes, aunque tenga el

mismo estilo visual. El objetivo de crear documentos HTML semánticos es que,

aunque estamos acostumbrados a crear páginas para usuarios (o más

concretamente, para navegadores), cada vez tendemos más a una Internet capaz de
procesar información de forma autónoma. Muestra de ello son, por ejemplo, los

robots o crawlers de buscadores como Googlebot (el robot de búsqueda de

) que es capaz de accedera páginas w eb para analizarla inform ación de la

misma, entenderla e indexarla en su buscador.

Etiqueta Función

<!–…–> Define un comentario

<!DOCTYPE>Define el tipo de docuemento

<a> Define un hipervínculo

<abbr> Define una abreviación

<address> Define la información de contacto del autor / propietario del

documento

<area> Define un área dentro de un mapa de imagen

<article> Define un artículo

<aside> Define el contenido lateral del contenedor de una página

<audio> Define contenido de sonido

<b> Define texto en negrita

<base> Especifica la base donde se abrirán todas las URL del documento
<bdi> Aísla una parte del texto que puede tener un formato diferente del texto
externo

<bdo> Sobreescribe la dirección del texto

<blockquote> Define una sección que tiene otra fuente

<body> Define el cuerpo del documento

<br> Define un salto de línea

<button> Define un botón clickeable

<canvas> Se usa para dibujar gráficos en pantalla

<caption> Define el título de una tabla

<cite>Define el título de un trabajo

<code> Define un trozo de código de programación

<col> Especifica las propiedades de la columna para cada columna del elemento
<colgroup>

<colgroup> Especifica un grupo de una o más columnas de una tabla

<command>Define un botón command al que un usuario puede invocar

<datalist> Especifica en un input una lista pre-definida de opciones

<dd> Define la descripción de un ítem en una lista de definición

<del> Define un texto que ha sido definido en un Mdocument

<details> Define detalles adicionales que el usuario puede ver o esconder

<dfn> Define el término de una definición

<dialog> Define una caja o ventana de dialogo

<div> Define una sección en un documento

<dl> Define una lista de definición

<dt> Define un término (un ítem) en una lista de definición

<em> Define énfasis en un texto

<embed> Define el contenedor de una aplicación externa (no html)

<fieldset> Grupo de elementos relacionados en un formulario

<figcaption> Define el título para una figura <figure>

<figure> Especifica auto-contenido

<footer> Define el pie de página de un documento

<form> Define un formulario html

<h1> a <h6> Define encabezados o títulos

<head> Define información hacerca del documento

<header> Define la sección de encabezado del docuemnto

<hgroup> Grupo de encabezado (<h1> a <6>)

<hr> Define un cámbio de temática a partir de una línea dibujada

<html> Define la raíz del documento

<i> Define una parte del texto de modo alternativo

<iframe> Define un frame en línea

<img>Define una imagen

<input> Define un control de entrada de texto

<ins> Define texto que ha sido insertado en un documento

<kbd>Define entrada del teclado

<keygen> Define un campo generador de claves para formularios

<label> Define el rótulo para un elemento <input>

<legend> Define un título para los elementos <fieldset>, <figure>, <details>

<li> Define un ítem de una lista

<link> Define la relación entre un documento y un recurso externo (generalmente

con hojas de estilo)

<map> Define un mapa de imagen del cliente

<mark> Define texto resaltado o marcado

<menu> Define la lista de un menú

<meta> Define un metadato de un documento

<meter> Define una medida escalar en un rango conocido

<nav> Define un link de navegación

<noscript> Define un contenido alternativo para los usuarios que no soportan

scripts del cliente

<objet> Define un objeto embebido

<ol> Define una lista ordenada

<optgroup> Define un grupo de opciones relacionadas en una lista desplegable

<option> Define una opción en una lista desplegable

<output> Define el resultado de un cálculo

<p> Define un párrafo

<param> Define un parámetro para un objeto

<pre> Define texto pre-formateado

<progress> Representa el progreso de una tarea en una barra

<q> Define una cita corta

<rp> Define que debe mostrar en navegadores que no soportan scripts de ruby

<rt> Define una pronunciación de caracteres

<ruby> Define una notación de ruby

<s> Define texto que no es correcto

<samp> Define un ejemplo de salida de un programa

<script> Define un script del lado cliente

<section> Define una sección de un documento

<select> Define un drop-down list

<small> Define texto pequeño

<source> Define los recursos para elementos multimedia

<span> Define una pequeña sección de un documento

<strong> Define un texto en negrita

<style> Define un estilo para la información de un documento

<sub> Define un texto que es subíndice

<summary> Define un encabezado visible para el elemento <details>

<sup> Define un texto que es superíndice

<table> Define una tabla

<tbody> Define el cuerpo de una tabla

<td> Define una celda en una tabla

<textarea> Define un control de entrada de múltiples líneas

<tfoot> Agrupa los footer contenidos en una tabla

<th> Define una celda de encabezado en una tabla

<thead> Agrupa los encabezados de una tabla

<time> Define fecha / hora

<title> Define un título para el documento

<tr> Define una fila en una tabla

<track> Define texto de la pista para elementos multimedia (vídeo y audio)

<ul> Define una lista desordenada

<var> Define una variable

<video> Define un vídeo o película

<wbr> Define un posible salto de linea