Está en la página 1de 9

LOS ATRIBUTOS DE LAS ETIQUETAS HTML

Los atributos se incluyen dentro de la etiqueta de apertura. No todos los atributos se pueden
utilizar en todas las etiquetas. Por ello, cada etiqueta define su propia lista de atributos
disponibles. Aunque cada una de las etiquetas HTML define sus propios atributos, algunos de los
atributos son comunes a muchas o casi todas las etiquetas. Los atributos comunes se dividen en
cuatro grupos segn su funcionalidad:

Atributos bsicos: se pueden utilizar prcticamente en todas las etiquetas HTML.


Atributos para internacionalizacin: los utilizan las pginas que muestran sus contenidos
en varios idiomas.
Atributos de eventos: slo se utilizan en las pginas web dinmicas creadas con
JavaScript.
Atributos de foco: relacionados principalmente con la accesibilidad de los sitios web.

ATRIBUTOS BSICOS

Los siguientes cuatro atributos bsicos se pueden aplicar prcticamente a todas las etiquetas
HTML:

Respecto al valor de los atributos id y class, slo pueden contener guiones medios (-), guiones
bajos (_), letras y/o nmeros, pero no pueden empezar por nmeros. Adems, los navegadores
distinguen maysculas de minsculas y no se recomienda utilizar letras como y acentos, ya que
no es seguro que funcionen correctamente.

ATRIBUTOS PARA INTERNACIONALIZACIN

Estos atributos son tiles para aquellas pginas que muestran sus contenidos en varios idiomas y
para aquellas que quieren indicar de forma explcita el idioma de sus contenidos:
Siempre que se incluye el atributo lang. Los idiomas se indican mediante un cdigo estandarizado
(es para espaol, en para ingls, etc.). Como la palabra internacionalizacin es muy larga, se suele
sustituir por la abreviatura i18n (el nmero 18 se refiere al nmero de letras que existen entre la
letra i y la letra n de la palabra internacionalizacin).

ATRIBUTOS DE EVENTOS

Estos atributos slo se utilizan en las pginas web que incluyen cdigo JavaScript para realizar
acciones dinmicas sobre los elementos de la pgina. Cada vez que el usuario pulsa una tecla,
mueve su ratn o pulsa cualquier botn del ratn, se produce un evento dentro del navegador.
Utilizando JavaScript y los siguientes atributos, es posible responder de forma adecuada a cada
evento.
ATRIBUTOS DE FOCO

Cuando el usuario selecciona un elemento en una aplicacin, se dice que "el elemento tiene el
foco del programa". Si por ejemplo un usuario pincha con su ratn sobre un cuadro de texto y
comienza a escribir, ese cuadro de texto tiene el foco del programa, llamado "focus" en ingls. Si el
usuario selecciona despus otro elemento, el elemento original pierde el foco y el nuevo elemento
es el que tiene el foco del programa.

ESTRUCTURA DE UN DOCUMENTO HTML

Los documentos HTML se encuentran estrictamente organizados. Cada parte del documento est
diferenciada, declarada y determinada por etiquetas especficas. En esta parte del captulo vamos
a ver cmo construir la estructura global de un documento HTML y los nuevos elementos
semnticos incorporados en HTML5.

EL <!DOCTYPE>

En primer lugar necesitamos indicar el tipo de documento que estamos creando. Esto en HTML5
es extremadamente sencillo:

<!DOCTYPE html>

IMPORTANTE: Esta lnea debe ser la primera lnea del archivo, sin espacios o lneas que la
precedan. De esta forma, el modo estndar del navegador es activado y las incorporaciones de
HTML5 son interpretadas siempre que sea posible, o ignoradas en caso contrario.

LA ETIQUETA <html>

Luego de declarar el tipo de documento, debemos comenzar a construir la estructura HTML. Como
siempre, la estructura tipo rbol de este lenguaje tiene su raz en el elemento <html>. Este
elemento envolver al resto del cdigo:

<!DOCTYPE html>
<html lang=es>
</html>
El atributo lang en la etiqueta de apertura <html> es el nico atributo que necesitamos especificar
en HTML5. Este atributo define el idioma del contenido del documento que estamos creando.

LA ETIQUETA <body>

La siguiente seccin que es parte principal de la organizacin de un documento HTML es el cuerpo.


Representa la parte visible de todo documento y es especificado entre etiquetas <body>. Estas
etiquetas tampoco han cambiado en relacin con versiones previas de HTML:

<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
</body>
Nota: Hasta el momento tenemos un cdigo simple pero con una estructura compleja. Esto es
porque el cdigo HTML no est formado por un conjunto de instrucciones secuenciales.

LA ETIQUETA <meta>

Una de las partes ms importantes de la metainformacin de la pgina son los metadatos, que
permiten incluir cualquier informacin relevante sobre la propia pgina. La especificacin oficial
de HTML no define la lista de metadatos que se pueden incluir, por lo que las pginas tienen
libertad absoluta para definir los metadatos que consideren adecuados. La etiqueta empleada
para la definicin de los metadatos es <meta>.:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset=UTF-8>
</head>
<body>
</body>
</html>
La innovacin de este elemento en HTML5, como en la mayora de los casos, es solo simplificacin.
La nueva etiqueta <meta> para la definicin del tipo de caracteres es ms corta y simple.

LA ETIQUETA <title>

La etiqueta <title>, como siempre, simplemente especifica el ttulo del documento, y no hay nada
nuevo para comentar:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Este texto es el ttulo del documento</title>
</head>
<body>
</body>
</html>
Nota: El texto entre las etiquetas <title> es el ttulo del documento que estamos creando.
Normalmente este texto es mostrado en la barra superior de la ventana del navegador.

LA ETIQUETA <link>

Este elemento es usado para incorporar estilos, desde archivos externos. Uno de los usos ms
comunes para <link> es la incorporacin de archivos con estilos CSS:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Este texto es el ttulo del documento</title>
<link rel=stylesheet href=misestilos.css>
</head>
<body>
</body>
</html>

En HTML5 solo necesitamos dos atributos para incorporar nuestro archivo de estilos: rel y href. El
atributo rel significa relacin y es acerca de la relacin entre el documento y el archivo que
estamos incorporando por medio de href.

Comentarios en html

Al igual que la mayora de lenguajes, HTML permite incluir comentarios dentro de su cdigo para
aadir informacin que no se debe mostrar por pantalla.

Aunque los comentarios no se muestran por pantalla y por tanto son invisibles para los usuarios.

Nota: nunca debe incluirse informacin sensible o confidencial en los comentarios.

La sintaxis de los comentarios es la siguiente:

Apertura del comentario: <!--


Contenido del comentario: (cualquier texto)
Cierre del comentario: -->
TEXTOS EN HTML

La mayor parte del contenido de las pginas web estn formado por texto, llegando a ser ms del
80% del cdigo de la pgina. Por este motivo, es muy importante conocer los elementos y
etiquetas que define HTML para el manejo del texto.

El lenguaje HTML incorpora al tratamiento del texto muchas de las ideas y normas establecidas en
otros entornos de publicacin de contenidos. De esta forma, HTML define etiquetas para
estructurar el contenido en secciones y prrafos y define otras etiquetas para marcar elementos
importantes dentro del texto.

LA ETIQUETA <p>

Una de las etiquetas ms utilizadas de HTML es la etiqueta <p>, que permite definir los prrafos
que forman el texto de una pgina. Para delimitar el texto de un prrafo, se encierra ese texto con
la etiqueta <p>, como muestra el siguiente ejemplo:

<p>Este es el texto que forma el primer prrafo de la pgina..</p>

<p>El segundo prrafo de la pgina tambin se define encerrando su texto con la etiqueta p..</p>

La siguiente tabla recoge la definicin formal de la etiqueta <p>:


Los prrafos son elementos de bloque, por lo que siempre ocupan todo el ancho de la ventana
del navegador. Adems, no tienen atributos especficos, pero s que se les pueden asignar los
atributos comunes de HTML.

Las etiquetas de ttulos o en encabezados de secciones <h1>< h6>

Las pginas HTML habituales suelen tener una estructura ms compleja que la que se puede crear
solamente mediante prrafos. De hecho, es habitual que las pginas se dividan en diferentes
secciones jerrquicas.

Los ttulos de seccin se utilizan para delimitar el comienzo de cada seccin de la pgina. HTML
permite crear secciones de hasta seis niveles de importancia.

Las etiquetas que definen los ttulos de seccin son <h1>, <h2>, <h3>, <h4>, <h5> y <h6>. La
etiqueta <h1> es la de mayor importancia y por tanto se utiliza para definir los titulares de la
pgina. La importancia del resto de etiquetas es descendiente, de forma que la etiqueta <h6> es la
que se utiliza para delimitar las secciones menos importantes de la pgina.

la definicin formal de la etiqueta <h1> <h6>

LAS ETIQUETAS <em> y <strong>MARCADO BSICO DE TEXTO


Una vez estructurado el texto en prrafos y secciones, el siguiente paso es el marcado de los
elementos que componen el texto. Los textos habituales estn formados por elementos como
palabras en negrita o cursiva, anotaciones y correcciones, citas a otros documentos externos, etc.
HTML proporciona varias etiquetas para marcar cada uno de los diferentes tipos de texto.

Entre las etiquetas ms utilizadas para marcar texto se encuentran <em> y <strong>.

La etiqueta <em> marca un texto indicando que su importancia es mayor que la del resto del
texto.

La etiqueta <strong> indica que un determinado texto es de la mayor importancia dentro de la


pgina.

La definicin formal de estas dos etiquetas:

También podría gustarte