Scribd
Cargar
45 vistas17 páginas

Tags HTML

Este documento describe las principales etiquetas HTML y sus usos. Explica etiquetas para estructurar páginas web, agregar contenido multimedia, crear formularios y tablas.

Cargado por

a01128
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
45 vistas17 páginas

Tags HTML

Este documento describe las principales etiquetas HTML y sus usos. Explica etiquetas para estructurar páginas web, agregar contenido multimedia, crear formularios y tablas.

Cargado por

a01128
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd

LISTADO DE ETIQUETAS DE <html></html>

ETIQUETAS INICIALES O DE RAÍZ


<!DOCTYPE html> Indica al navegador que el documento está basado en el estándar
HTML5
<html> </html> Representa la raíz de un documento HTML. Todos los demás elementos
de la estructura HTML deben ser recogidos dentro de estas etiquetas.

METADATOS DEL DOCUMENTO


<head> </head> Representa una colección de metadatos acerca del documento,
incluyendo enlaces a, o definiciones de, scripts y hojas de estilo. El resto de etiquetas de
metadatos, irán recogidas dentro de las etiquetas de apertura y cierre del head.
Importante explicar que estos metadatos del documento, es información para el
navegador y no contenido que será visible en la página web. A excepción de la etiqueta
<title> que veremos a continuación.
<title> </title> Etiqueta usada para definir el título de la página web.
<link> Se usa para enlazar recursos externos al documento HTML. El ejemplo más
común son las hojas de estilos CSS.
<meta> Etiqueta usada para definir otros metadatos que no se pueden definir con una
etiqueta HTML especifica. Por ejemplo, para definir el autor del sitio, o la descripción
del mismo.
<style> </style> Etiquetas usadas para introducir código CSS en línea, es decir, en el
propio documento HTML.
ETIQUETAS DE SECCIONES O PARA ESTRUCTURAR EL HTML
<body> </body> Al contrario que la etiqueta de metadatos <head>, todo lo que quieras
mostrar en la página web debe ir recogido dentro de las etiquetas de apertura y cierre
de <body>. Este contenido será el que se muestre en la web.
<nav> </nav> Usadas para definir el contenido que será la sección de navegación de la
web.
<main> </main> Se usa para definir el contenido principal del documento. Solamente
puede existir uno por documento.
<section> </section> Define una sección del documento
<article> </article> Define contenido independiente de la web.
<aside> </aside> Dentro de estas etiquetas suele alojarse el contenido adicional de la
web. Suele ser contenido relacionado con la web pero de poca importancia
<h1>,<h2>,<h3>,<h4>,<h5>,<h6> Son etiquetas HTML muy importantes, ya que son
usadas para jerarquizar el contenido de la web. Las etiquetas se usan para explicar
brevemente el contenido que irá a continuación.
<header> </header> Se usan para definir la cabecera la página web. Suele contener el
logotipo, menú de navegación, etc.
<footer> </footer> Usadas para definir el pie de página.
ETIQUETAS PARA LA AGRUPACIÓN DE CONTENIDO
<p> </p> Etiqueta usada para escribir párrafos de texto.
<hr> Etiqueta utilizada para «romper» entre dos secciones de una web. Usada
comúnmente como separador.
<pre> </pre> Usada para pegar texto manteniendo el pre formato propio del texto.
<blockquote> </blockquote> Se usan para indicar que el contenido es texto citado.
<ol> </ol> Etiquetas para crear una lista ordenada
<ul> </ul> Etiquetas para crear una lista des-ordenada
<li> </li> Etiquetas que recogen el contenido de un elemento de una lista, sea ordenada
o no.
<dl> </dl> Usada para crear una lista de definiciones.
<dt> </dt> Representa un término definido por la siguiente etiqueta <dd>
<dd> </dd> Se usa para definir los términos listados antes que él.
<figure> </figure> Indica una figura ilustrada como parte del documento HTML5.
<figcaption> </figcaption> Utilizada para definir la leyenda de una figura.
<div> </div> Etiqueta común utilizada para crear un contenedor genérico.

ETIQUETAS SEMÁNTICAS PARA TEXTO


<a> </a> Etiqueta utilizada para crear hiperenlaces en el documento HTML
<strong> </strong> Etiqueta para definir una palabra o conjunto de ellas como
importantes. Tiene una fuerte importancia en el SEO de la página.
<small> </small> Utilizada para dejar un comentario aparte, del tipo una nota de
derechos de autoría, u otros textos que no son esenciales para la comprensión del
documento.
<cite> </cite> Para indicar el título de una obra
<sub> </sub> y <sup> </sup> Etiquetas utilizadas para representar un subíndice o
superíndice.
<mark> </mark> Usada para resaltar texto
<span> </span> Etiqueta HTML sin ningún significado específico. Se usa conjuntamente
con los atributos «class» o «id» para atribuirle ciertas características.
<br> Etiqueta utilizada para crear un salto de línea.

ETIQUETAS PARA INCRUSTAR CONTENIDO


<img> Etiqueta para «pintar» una imagen en la página web.
<iframe> </iframe> Es una etiqueta que sirve para anidar otro documento HTML dentro
del documento principal.
<embed> Usada para integrar una aplicación o contenido interactivo externo que no
suele ser HTML.
<object> </object> Utilizada llamar a un recurso externo de la web. Este recurso será
tratado como una imagen, o un recurso externo para ser procesado por un plugin.
<video> </video> Se usa para reproducir video en la página web junto a sus archivos de
audio y capciones asociadas.
<audio> </audio> Usada para cargar en una web un archivo de audio o stream de audio.
<source> Permite a autores especificar recursos multimedia alternativos para las
etiquetas de <video> o <audio>
<svg> </svg> Se usa para llamar a una imagen vectorizada.

ETIQUETAS PARA LA CREACIÓN DE TABLAS


<table> </table> Etiquetas de apertura y cierre de una tabla. El resto de etiquetas de la
tabla han de ir siempre recogidas entre estas dos etiquetas.
<caption> </caption> Usada para indicar el título de la tabla.
<colgroup> </colgroup> Etiqueta utilizada para agrupar dos o más columnas de una
tabla.
<tbody> </tbody> Usada para describir los datos concretos de una tabla.
<thead> </thead> Indica el bloque de filas que describen las etiquetas de las columnas
de la tabla.
<tfoot> </tfoot> Indica los bloques de filas que describen los resúmenes, o datos totales
de una columna de una tabla.
<tr> </tr> Se usa para indicar una fila de celdas de una tabla.
<td> </td> Usada para definir una celda de una tabla.
<th> </th> Etiqueta que se usa para definir el encabezado de una celda.
ETIQUETAS PARA LA CREACIÓN DE FORMULARIOS
<form> </form> Etiqueta de apertura y cierre de un formulario de una página web. El
resto de etiquetas de formulario deben ir siempre recogidas entre estas etiquetas de
apertura y cierre de formulario.
<fieldset> </fieldset> Etiqueta que representa un conjunto o agrupación de elementos
de un formulario. «Pinta» un recuadro alrededor de las etiquetas que estén contenidas
dentro del <fieldset>
<legend> </legend> Etiqueta ligada a <fieldset>. Indica el título del <fieldset>
<label> </label> Se usa para definir el nombre o título de un control del formulario.
<input> Pinta un campo de introducción de datos para el usuario. Es de las principales
etiquetas de un formulario.
<button> </button> Etiqueta utilizada para representar un botón en el formulario.
<select> </select> Input que permite una selección entre un conjunto de opciones.
<option> </option> Etiqueta ligada a <select>. Permite añadir diferentes opciones al
<select>
<textarea> </textarea> Añade un campo al usuario para que pueda introducir texto en
unas líneas máximas de texto que el desarrollador puede definir.

INCRUSTAR VÍDEO EN UNA PÁGINA HTML


Usar la etiqueta HTML <video> para la apertura, y </video> para el cierre. Dentro de esta
etiqueta de video, debes poner la url y el formato del recurso usando los atributos HTML
src y type. Además, es recomendable subir varias versiones del video a reproducir por si
el navegador que use el visitante de tu web, no fuera capaz de reproducir alguno de los
formatos. A continuación, se muestra un ejemplo de cómo añadir un video HTML a una
web.
VIDEO DE FONDO EN HTML
[Link]
html/#Como_poner_video_de_fondo_en_HTML
Aquí veras el comportamiento en entorno Web.

ATRIBUTOS

¿QUÉ ES UN ATRIBUTO HTML?


Es un valor o propiedad que añades a una etiqueta HTML. Este otorgará una propiedad o
comportamiento específico a la propia etiqueta, por lo que es muy importante que los
conozcas todos. A menos que te guardes esta página en favoritos para usarla cuando lo
necesites. Para añadir el atributo, bastará con que lo introduzcas en la propia etiqueta de
inicio del elemento HTML en cuestión. Un ejemplo sería el siguiente, donde vamos a
añadir el atributo «id» a una etiqueta <div>

el atributo se añade dentro de la etiqueta HTML inicial. El atributo es «id», este contiene
un valor que le hemos asignado, en este caso «nombre».
TIPOS DE ATRIBUTOS HTML
Existen diferentes tipos de atributos para las etiquetas. Algunos son de ámbito global,
mientras que otros son más específicos y solo son válidos para algunas etiquetas HTML.
En general podemos ordenarlos de la siguiente manera:
Atributos requeridos: son atributos necesarios para la etiqueta HTML. Sin ellos, la
etiqueta por si sola no tendrá el comportamiento esperado.
Atributos opcionales: en este caso, estos atributos son utilizados para modificar la
funcionalidad por defecto de la etiqueta HTML.
Atributos globales: son atributos de ámbito general que pueden ser utilizados en casi
cualquier etiqueta HTML.
LISTADO DE ATRIBUTOS HTML5

Atributo Etiqueta HTML5 Descripción

Tipos de archivos aceptados por el


accept <form>, <input> servidor. Puedes definirlos con
valores separados por comas, por
ejemplo: .doc, .ods, .txt, etc. O
Atributo Etiqueta HTML5 Descripción

también puedes indicarle un


conjunto de tipos de archivos como,
por ejemplo: «video/*» o «audio/*»

Define una lista de caracteres


soportados en el formulario. Por
accept-charset <form>
ejemplo: accept-charset=»ISO-8859-
1″

Podrás configurar un botón de tu


teclado para que se ejecute acción
accesskey Atributo Global en la página web. Por ejemplo, un
enlace hacia la página de contacto o
la home.

El atributo especifica la URL dónde


se enviarán los datos recogidos en el
action <form>
formulario, a menudo un archivo
.php dentro del mismo servidor.

<applet>, <caption>, Especifica el alineamiento horizontal


<col>, <colgroup>, <hr>, del elemento.
<iframe>, <img>, Este atributo sigue funcionando pero
align
<table>, <tbody>, <td>, no es aconsejable usarlo ya que está
<tfoot> , <th>, <thead>, en desuso. Lo recomendable es usar
<tr> reglas CSS en su lugar.

Texto alternativo que se mostrará en


<applet>, <area>, el navegador en caso de que la
alt
<img>, <input> imagen no se pueda mostrar. Muy
importante de cara a accesibilidad.

Indica que el script debe ejecutarse


async <script>
de forma asíncrona.

Indica si los controles en este


formulario pueden tener por defecto
autocomplete <form>, <input>
sus valores completados
automáticamente por el navegador.
Atributo Etiqueta HTML5 Descripción

<button>, <input>, El elemento debe tener el foco


autofocus <keygen>, <select>, automáticamente una vez se cargue
<textarea> la página web.

Hace que el audio o video comience


autoplay <audio>, <video> a reproducirse una vez se cargue la
página web.

Te permite añadir un color de fondo


al elemento HTML. El color debe ser
<body>, <col>,
añadido en el modo de color RGB,
<colgroup>, <marquee>,
por ejemplo #FF00AA.
bgcolor <table>, <tbody>,
Este atributo sigue funcionando pero
<tfoot>, <td>, <th>,
no es aconsejable usarlo ya que está
<tr>
en desuso. Lo recomendable es usar
reglas CSS en su lugar.

Permite definir un borde al elemento


HTML.
<img>, <object>, Este atributo sigue funcionando pero
border
<table> no es aconsejable usarlo ya que está
en desuso. Lo recomendable es usar
reglas CSS en su lugar.

Con este atributo podrás definir un


rango de tiempo del elemento
buffered <audio>, <video>
multimedia que será usado como
buffer.

Atributo necesario par definir la


charset <meta>, <script> codificación de caracteres de la
página o del script.

Usado para definir que un elemento


checked <command>, <input> HTML debe estar marcado por
defecto al cargar la página web.

Contiene una URL que apunta a la


<blockquote>, <del>, fuente de la cita o cambio. Muy
cite
<ins>, <q> importante de cara a una correcta
optimización SEO de la página.
Atributo Etiqueta HTML5 Descripción

Otorga una clase creada en CSS a un


elemento HTML. Se usa
class Atributo Global principalmente para aplicar estilos a
elementos con propiedades en
común.

Especifica la URL del archivo de tipo


code <applet>
applet que será cargado y ejecutado.

Atributo usado para indicar el color


del texto de un elemento.
<basefont>, <font>, Este atributo sigue funcionando pero
color
<hr> no es aconsejable usarlo ya que está
en desuso. Lo recomendable es usar
reglas CSS en su lugar.

Dentro de una etiqueta <textarea>,


se usa para definir el número de
cols <textarea>
columnas que tendrá el campo de
texto.

Dentro de una tabla, define el


colspan <td>, <th> número de columnas que una celda
debe ocupar.

Un atributo que permite definir el


content <meta> contenido de la etiqueta HTML
<meta> que acompaña.

Define si el contenido del elemento


contenteditable Atributo Global
HTML podrá ser editable o no.

Define el ID del elemento <menu>


contextmenu Atributo Global que servira como menú de contexto
para otro elemento.

Indica si el navegador debe mostrar


controls <audio>, <video> los controles multimedia del
reproductor integrado al usuario.
Atributo Etiqueta HTML5 Descripción

Un conjunto de valores que


coords <area> especifican las coordenadas dentro
de la etiqueta area.

Especifica la URL, absoluta o relativa


data <object>
del objeto o recurso.

Permite asociar atributos


data-* Atributo Global
presonalizados a un elemento HTML.

Permite definir la fecha y hora


datetime <del>, <ins>, <time>
asociadas con el elemento.

Con este atributo podrás definir que


por defecto, una pista por ejemplo
de subtítulos esté habilitada.
default <track>
Siempre y cuando las preferencias
del usuario no indiquen algo
diferente.

Indica que el código debe ser


defer <script> ejecutado despues de que la página
este cargada.

Con este atributo puedes definir la


dirección del texto en un elemento
dir Atributo Global HTML. Los valores permitidos son ltr
(Izquierda-a-Derecha) o rtl (Derecha-
a-Izquierda).

Similar a la anterior. Indica la


dirección del texto asociada con el
dirname <input>, <textarea>
elemento al momento de enviar el
formulario.

<button>, <command>,
<fieldset>, <input>, Permite que un elemento HTML esté
disabled <keygen>, <optgroup>, deshabilitado y el usuario no pueda
<option>, <select>, interactuar con el.
<textarea>
Atributo Etiqueta HTML5 Descripción

Si este atributo se añade al elemento


HTML, el recurso indicado podrá
download <a>, <area>
descargarse al dispositivo del
usuario.

Define si el elemento puede ser


draggable Atributo Global
arrastrado.

Define el tipo de contenido del


enctype <form> formulario cuando el método del
mismo es POST.

Atributo usado para asociar o


for <label>, <output> describir elementos que pertenecen
a éste.

<button>, <fieldset>,
<input>, <keygen>,
<label>, <meter>, Atributo para indicar el formulario al
form
<object>, <output>, que pertenece el elemento.
<progress>, <select>,
<textarea>

A través de «ids» indicados en los


encabezados de una tabla <th>
podrás asociarlos a diferentes
headers <td>, <th>
elementos de la tabla <td>. Muy útil
de cara a la accesibilidad y por lo
tanto para el SEO.

Permite especificar la altura de los


<canvas>, <embed>, elementos HTML indicados.
<iframe>, <img>, Este atributo sigue funcionando pero
height
<input>, <object>, no es aconsejable usarlo ya que está
<video> en desuso. Lo recomendable es usar
reglas CSS en su lugar.

Este atributo permite indicar que el


elemento HTML no debe ser visible.
hidden Atributo Global Es habitual usarlo por ejemplo, para
ocultar elementos que no deben ser
visibles inicialmente pero que
Atributo Etiqueta HTML5 Descripción

después de una acción si deben


verse.

El atributo especifica el intervalo


high <meter> donde el atributo «value» tomara el
valor como alto.

<a>, <area>, <base>,


href La URL de un recurso asociado.
<link>

Especifica el lenguaje del recurso


hreflang <a>, <area>, <link>
asociado.

Indica una directiva que puede


alterar el comportamiento de la
http-equiv <meta>
página y como es leída por los
exploradores.

Usado para asignar un identificador


único a un elemento HTML. Usado
generalmente para acceder al mismo
id Atributo Global
desde CSS o Javascript. No pueden
existir dos «ids» iguales en una
misma página web.

Indica que la imagen es parte de un


ismap <img>
mapa de imagen del servidor.

Atributo que permite dar más


información a Google acerca de
imágenes o datos dentro de cualquier
itemprop Atributo Global
tipo de etiquetas. Por ejemplo se
puede indicar propiedades como:
actores , clasificación, género, etc .

Especifica el título de la pista con un


label <track> formato legible por el usuario. Usado
conjuntamente con el atributo «for»
Atributo Etiqueta HTML5 Descripción

Define el lenguaje utilizado en el


lang Atributo Global
elemento.

Define el lenguaje (de programación)


language <script>
utilizado en el script.

Identifica una serie de valores


list <input> predefinidos para ser sugeridos al
usuario en un menú desplegable.

Atributo que habilita al medio a


<audio>, <bgsound>,
loop volver a reproducirse desde el
<marquee>, <video>
principio cuando llega al final.

Similar al atributo high, solo que en


low <meter> este caso, permite definir cuando un
valor estará en el rango bajo.

<input>, <meter>,
max Define el máximo valor aceptado.
<progress>

Define el mayor número de


maxlength <input>, <textarea>
caracteres aceptados.

<a>, <area>, <link>, Indica el tipo de medio para el cual


media
<source>, <style> el recurso vinculado fue creado.

Define el método HTTP a emplear


method <form> para enviar el formulario. Puede ser
GET (predeterminado) o POST.

min <input>, <meter> Define el valor mínimo aceptado.

Atributo que define si se puede


multiple <input>, <select>
introducir múltiples valores.

muted <video> Al reproducir un contenido


audiovisual, este atributo indica si el
Atributo Etiqueta HTML5 Descripción

audio será silenciado inicialmente al


cargar la página.

<button>, <form>,
<fieldset>, <iframe>,
Nombre del elemento. Utilizado a
<input>, <keygen>,
menudo por el servidor para
name <object>, <output>,
identificar los campos en el envío de
<select>, <textarea>,
formularios.
<map>, <meta>,
<param>

Con este atributo indicamos al


novalidate <form> formulario que no valide el contenido
del mismo.

Indica si los detalles de la página


open <details> seran mostrados cuando cargue la
misma.

Con este atributo se define el valor


optimum <meter>
numérico óptimo.

Este atributo define una expresión


regular con la cual el valor del
pattern <input>
elemento debe ser validado antes de
aceptar el contenido del mismo.

Indica si se enviara un ping o


ping <a>, <area> notificacion a la URL del recurso
cuando el usuario utlize el vinculo.

Proporciona una sugerencia al


usuario de lo que puede ser
placeholder <input>, <textarea> introducido en el campo de un
formulario por ejemplo. Muy util de
cara a la accesibilidad.

Atributo que permite añadir una


imagen que se mostrará mientras
poster <video> se carga un video en una web. En
caso de que la URL del video este
«rota», el poster seguirá cargándose
Atributo Etiqueta HTML5 Descripción

consiguiendo con esto no ver un


hueco vacio en la web.

Indica si el recurso o partes del


preload <audio>, <video>
mismo deben ser precargadas.

Con este atributo se define si el


readonly <input>, <textarea> elemento puede o no ser editado por
el usuario.

Especifica la relación entre el objeto


destino y el objeto enlace.
rel <a>, <area>, <link>
Importante de cara una correcta
optimización SEO.

Con este atributo hacemos que la


<input>, <select>,
required etiqueta Html sea, o no, de obligada
<textarea>
cumplimentación.

Con este atributo podemos modificar


el comportamiento estándar de una
reversed <ol> lista ordenada haciendo que se vea
listada en orden descendente en
lugar de ascendente.

Define el número de filas en un área


rows <textarea>
de texto.

Define el número de filas que una


rowspan <td>, <th>
celda de una tabla debe abarcar.

Lista de restricciones a ser


sandbox <iframe>
desactivadas en el iframe.

En una tabla permite definir las


scope <th> celdas que la cabecera deberá
ocupar en este elemento.

Indica si el iframe debe ser cargado


seamless <iframe>
como parte del mismo documento.
Atributo Etiqueta HTML5 Descripción

Define un valor que aparecerá por


selected <option> defecto seleccionado al cargar la
página.

Define el ancho del elemento (en


píxeles). En este caso es mejor por
tanto usar reglas CSS. En cambio. si
size <input>, <select> el atributo del elemento es del tipo
«text» o «password», entonces es el
número de caracteres que se podrán
introducir.

Indica el número de columnas que se


span <col>, <colgroup>
agrupan en una tabla.

Con este atributo se permite que un


spellcheck Atributo Global texto pueda ser autocorregido
ortográficamente, o no.

<audio>, <embed>,
<iframe>, <img>,
La URL del contenido integrable en la
src <input>, <script>,
etiqueta HTML que lo acompaña.
<source>, <track>,
<video>

Especifica el contenido de la página


srcdoc <iframe>
incluida.

Especifica el lenguaje del contenido


srclang <track>
de la pista.

Este atributo define diferentes


srcset <img> versiones de la imagen para mostrar
una o otra según el tipo de pantalla.

Define el número inicial de la lista


start <ol>
ordenada (si es diferente a 1).

Define los estilos CSS que anulan los


style Atributo Global estilos establecidos previamente. En
este caso son llamados estilos en
Atributo Etiqueta HTML5 Descripción

línea ya que se introducen


directamente en la etiqueta HTML en
cuestión.

Con este atributo se determina el


marco destino en un vínculo.
Valores especiales: «_blank» indica
una nueva ventana, «_parent» indica
<a>, <area>, <base>,
target el marco padre del marco que
<form>
contiene el código fuente, «_self»
indica el marco donde está el código
fuente y «_top» indica la ventana
completa del navegador.

Texto a ser mostrado cuando el


cursor esté sobre el elemento. Muy
title Atributo Global
útil de cara a la usabilidad y para una
correcto posicionamiento SEO.

<button>, <input>,
<command>, <embed>,
type <object>, <script>, Define el tipo de elemento HTML.
<source>, <style>,
<menu>

Indica la URL parcial de un image


map asociado con el elemento.
<img>, <input>,
usemap Note: Este atributo no puede ser
<object>
usado si el elemento <img>
desciende de un <button> o <a>

<button>, <option>,
Define el valor predeterminado a ser
value <input>, <li>, <meter>,
mostrado al cargar la página.
<progress>, <param>

Para los elementos enumerados aquí,


<canvas>, <embed>,
esto establece el ancho del
<iframe>, <img>,
width elemento. Aunque como en caso
<input>, <object>,
anteriores, lo correcto sería usar
<video>
reglas CSS.
Atributo Etiqueta HTML5 Descripción

Indica la forma en la cual el texto


wrap <textarea>
debe ser env

También podría gustarte