lunes

Etiquetas de HTML

¿Que son las etiquetas html?


Definición: Las etiquetas HTML son fragmentos de texto rodeados por corchetes angulares < >, que tienen funciones y usos específicos y se utilizan para escribir código HTML.
Las etiquetas o tags son la forma de escribir código HTML.
En HTML existen etiquetas de apertura y etiquetas de cierre, tienen la forma: <etiqueta> </etiqueta>. Donde <etiqueta> es la etiqueta de apertura y </etiqueta> es la etiqueta de cierre indicada por la diagonal. HTML tiene definidas gran variedad de etiquetas para distintos usos.  Aunque la mayoría de las etiquetas tienen su etiqueta de apertura y etiqueta de cierre, es importante aclarar que no todas las etiquetas tienen su correspondiente etiqueta de cierre.


Etiqueta
Función
Atributos
Estructura básica
<html>
Representa la raíz de un documento HTML o XHTML. Todos los demás elementos deben ser descendientes de este elemento.

<head>
Este elemento designa la parte de encabezado del documento.
<title>: Da un título al documento HTML
<base>: Define ruta de acceso
<link>: Define archivos vinculados
<meta>: Define metadatos como descripción y palabras clave
<script>: Delimita scripts incluidos
<style>: Delimita definición de estilos
<body>
Representa el contenido principal de un documento HTML.
alink: Especifica el color de texto de los enlaces al ser seleccionados.
background: Dirección URL de la imagen que se utilizará como fondo de una página.            Soportado por el navegador Internet Explorer
bgcolor: Especifica el color de fondo de una página.
link: Especifica el color de texto de los enlaces aún no visitados.
text: Desaprobado
Especifica el color de texto de toda la página.
vlink: Especifica el color de texto de los enlaces que han sido visitados.
class: Selector para las hojas de estilo(CSS), cuando se asigna información de estilo a un conjunto de elementos.  Para procesos generales por parte del usuario.
id: Asigna un nombre a un elemento.  Actúa omo selector para las hojas de estilo(CSS).
Como vínculo destino para vínculos de hipertexto. Como medio de hacer referencia a un elemento en particular desde un script. Como nombre de un elemento object declarado.
Para procesos generales por parte del usuario.
style: Especifica información de estilo para el elemento actual.
dir: Especifica la dirección del texto.  ltr : De izquierda a derecha (left to right). rtl : De derecha a izquierda (right to left).
lang: Especifica el idioma base de los valores de los atributos y del texto contenido en un elemento.
Texto
<a></a>
Representa un hiperenlace, enlazando a otro recurso.

<em></em>
Representa un texto enfatizado, como un acento de intensidad.

<strong></strong>
Representa un texto especialmente importante.

<small></small>
Representa un comentario aparte, es decir, textos como un descargo de responsabilidad o una nota de derechos de autoría, que no son esenciales para la comprensión del documento.

<s></s>
Representa contenido que ya no es exacto o relevante.

<cite></cite>
Representa el título de una obra.

<q></q>
Representa una cita textual online.

<dfn></dfn>
Representa un término cuya definición está contenida en su contenido ancestro más próximo.

<abbr></abbr>
Representa una abreviación  o un acrónimo; la expansión de la abreviatura puede ser representada por el atributo title.

<code></code>
Representa un código de ordenador.

<var></var>
Representa a una variable, es decir, una expresión matemática o contexto de programación, un identificador que represente a una constante, un símbolo que identifica una cantidad física, un parámetro de una función o un marcador de posición en prosa.

<samp></samp>
Representa la salida de un programa o un ordenador.

<kbd></kbd>
Representa la entrada de usuario, por lo general desde un teclado, pero no necesariamente, este puede representar otras formas de entrada de usuario, como comandos de voz transcritos.

<sub></sub>
<sup></sup>
Representan un subíndice y un superíndice, respectivamente.

<i></i>
Representa un texto en una voz o estado de ánimo alterno, o por lo menos de diferente calidad, como una designación taxonómica, un término técnico, una frase idiomática, un pensamiento o el nombre de un barco.

<b></b>
Representa un texto hacia el cual se llama la atención para propósitos utilitarios.  No confiere ninguna importancia adicional y no implica una voz alterna.

<u></u>
Representa una anotación no textual sin-articular, como etiquetar un texto como mal escrito o etiquetar un nombre propio en texto en Chino.

<bdo></bdo>
Representa la direccionalidad de sus descendientes con el fin de anular de forma explícita al algoritmo bidireccional Unicode.

<span></span>
Representa texto sin un significado específico.  Este debe ser usado cuando ningún otro elemento semántico le confiere un significado adecuado, en cuyo caso, provendrá de atributos globales como class, lang, o dir.

<br>
Representa un salto de línea.

Párrafo
<p></p>
Marcar el inicio y fin de un párrafo.

<blockquote></blockquote>
Introducir sangría.

<hr>
insertar una línea horizontal
size
width
align
Listas
<ol>
Define una lista ordenada
compact
start
value
<ul>
Define una lista desordenada
compact
type
<li>
Define el comienzo del Item
type
value
<dl>
Define una lista de definición

<dt>
Términos de los objetos de lista

<dd>
Descripción de los objetos de lista

Tablas
<table></table>
Representa datos con más de una dimensión.

<caption></caption>
Representa el título de una tabla.

<colgroup></colgroup>
Representa un conjunto de una o más columnas de una tabla.

<col></col>
Representa una columna de una tabla.

<tbody></tbody>
Representa el bloque de filas que describen los datos concretos de una tabla.

<thead></thead>
Representa el bloque de filas que describen las etiquetas de columna de una tabla.

<tfoot></tfoot>
Representa los bloques de filas que describen los resúmenes de columna de una tabla.

<tr></tr>
Representa una fila de celdas en una tabla.

<td></td>
Representa una celda de datos en una tabla.

<th></th>
Representa una celda encabezado en una tabla.

Imagen
<img>
Insertar imágenes a la página web.
src: Este atributo es obligatorio e indica el nombre del archivo de imagen (entre comillas) o la URL desde la que se va a obtener la imagen.
align: Permite controlar la alineación de una imagen con respecto a una línea de texto adyacente o a otras imágenes en esa línea. Los valores posibles son los ya conocidos left, right, middle, top, bottom.
alt: Entre comillas podremos escribir un texto que se mostrará si la imagen no llega a cargar, mientras se carga o, cuando visualizando ya la imagen, pasamos el ratón por encima.
width: Este atributo es opcional pero podemos ponerlo para especificar al navegador que muestre la imagen con un tamaño específico. Significa “ancho de la imagen” que vamos a representar. Si no se escribe, se carga la imagen con el tamaño original.
height: Al igual que el atributo width, es opcional. Este atributo indica el alto de la imagen.
border: Con border especificamos el ancho del borde que rodea la imagen. Si se indica 0 equivale a “sin borde”.