Está en la página 1de 15

Ficha 0002

Diseño Web
Docente: Ing. Joselito Edin Santa Cruz Díaz
Alumno: ________________________________Turno: _________

El Objetivo es que el alumno aprenda el uso de los elementos del estándar


Html5 (Etiquetas)

Todos los elementos del estándar HTML5 están listados en esta ficha, descritos
por su etiqueta de apertura y agrupados por su función. Contrariamente al índice
de elementos HTML el cual lista todas las posibles etiquetas, estándar, no-
estándar, válidas, obsoletas o aquellas en desuso, esta lista solamente los
elementos válidos de HTML5. Solamente aquellos elementos listados aquí son
los que deberían ser usados en nuevos sitios Web.

El símbolo (*) indica que el elemento fue añadido en HTML5.

1. Etiquetas de Elementos Raíz


1.1. <! doctype html>
Define que el documento está bajo el estándar de HTML 5
1.2. <html>
Representa la raíz de un documento HTML o XHTML. Todos los
demás elementos deben ser descendientes de este elemento.
Atributo de la etiqueta
 Lang=” idioma”. Atributo de idioma en la etiqueta html para declarar
el idioma predeterminado del texto de la página

Ejemplo

<!DOCTYPE html>
<html lang =”es”>
<head>...</head>
<body>...</body>
</html>

1
2. Etiquetas de Metadatos del Documento
2.1. <head>
Representa una colección de metadatos acerca del documento,
incluyendo enlaces a, o definiciones de, scripts y hojas de estilo.
Ejemplo

<!DOCTYPE html>
<html lang =”es”>
<head>
<title>Mi página</title>
</head>
</html>

2.2. <title>
Define el título del documento, el cual se muestra en la barra de título
del navegador o en las pestañas de página. Solamente puede
contener texto y cualquier otra etiqueta contenida no será interpretada.

<head>
<title>Ejemplo de uso del elemento title</title>
... otros elementos de cabecera...
</head>

2.3. <base>
Define la URL base para las URLs relativas en la página.
Atributos
 Href
La dirección URL base que se usa en todo el documento para
las direcciones URL relativas. Si no se especifica este atributo,
este elemento debe venir antes de cualesquiera otros
elementos con atributos cuyos valores son direcciones URL. Se
permiten las direcciones URL absolutas y relativas.
 Target
Un nombre o una palabra clave que indica la ubicación
predeterminada para navegar por el resultado de hipervínculos
o formas, para los elementos que no tienen una referencia
explícita del objetivo. Es un nombre o una palabra clave para
un contexto de navegación (por ejemplo: pestaña, ventana o
marco en línea). Las siguientes palabras clave tienen un

2
significado especial: tab, window, o online iframe). Las
siguientes palabras clave tienen un significado especial:
 _self: Carga el resultado en el mismo contexto de
navegación que el actual. Este valor es el valor por
defecto si no se especifica el atributo.
 _blank: Carga el resultado en un nuevo contexto de
navegación sin nombre.
 _parent: Cargar el resultado en el contexto de
navegación padre del actual. Si no hay padre, esta
opción se comporta de la misma manera que _self.
 _top: Carga el resultado en el contexto de nivel superior
de navegación (es decir, el contexto de navegación que
es un ancestro de la actual, y no tiene padre). Si no hay
padre, esta opción se comporta de la misma manera que
_self.

Ejemplo

<base href="url de página ">


<base target="_blank" href=" url de página">
2.4. <link>
Usada para enlazar JavaScript y CSS externos con el documento
HTML actual.
Atributos
 Href
Este atributo especifica la URL del recurso enlazado. La URL debe
ser absoluta o relativa.
 Rel
Este atributo indica la relación del documento enlazado con el
actual. El atributo debe ser una lista de tipos de enlaces separados
por espacio. El uso más común para este atributo es especificar el
enlace a una hoja de estilos externa: el atributo rel se establece con
valor stylesheet, y el atributo href se establece con la URL de la hoja
de estilos externa para dar formato a la página. WebTV también
soporta el uso del valor next en rel para precargar la siguiente
página en una serie de documentos.

3
 Sizes
Este atributo define los tamaños de los íconos para medios visuales
contenidos en el recurso. Debe estar presente solo si el atributo rel
contiene el tipo de enlace icon. Puede tener los siguientes valores:
 any, significa que el ícono puede ser escalado a cualquier
tamaño, ya que está en un formato vectorial, como
image/svg+xml.
 una lista de tamaños separados por espacios en blanco,
cada uno en formato <anchura en píxeles>x<altura en
píxeles> or <anchura en píxeles>X<altura en píxeles>.
Cada uno de estos tamaños debe estar contenido en el
recurso.
 target
Define el nombre del frame o ventana que tendrá la relación de
enlace o que mostrará la representación de algun recurso enlazado.
 Title
El atributo title tiene semántica particular para el elemento <link>.
Cuando se usa en una etiqueta <link rel="stylesheet">, define
una hoja de estilos preferida o alternativa. El uso incorrecto de este
atributo podría provocar que la hoja de estilos sea ignorada.
 Type
Este atributo es usado para definir el tipo de contenido al que se
enlaza. El valor del atributo debe ser un tipo MIME, como text/html,
text/css. El uso común de este atributo es para definir el tipo de hoja
de estilos enlazada, y el valor más común es text/css, el cual indica
un formato de Hoja de Estilos en Cascada.
Ejemplos
Para incluir una hoja de estilos en una página, use la siguiente
sintaxis
<link href="style.css" rel="stylesheet">
También se pueden especificar hojas de estilos alternativas.
<link href="defecto.css" rel="stylesheet" title=" defecto Style">
<link href="medio.css" rel="alternate stylesheet" title="medio">
<link href="basico.css" rel="alternate stylesheet" title="Basico">

4
Se puede determinar cuándo una hoja de estilos fue cargada
estableciendo la ejecución de un evento load en el elemento; de
forma similar, se puede detectar si ocurrió un error al procesar una
hoja de estilos, observando el evento error:

<script>
function sheetLoaded() {
// Hacer algo interesante; la hoja de estilos ha sido
cargada
}

function sheetError() {
alert("¡Ocurrió un error al cargar la hoja de estilos!");
}
</script>

<link rel="stylesheet" href="mystylesheet.css"


onload="sheetLoaded()" onerror="sheetError()">

2.5. <meta>
Define los metadatos que no pueden ser definidos usando otro
elemento HTML
Atributos
 Lang
Información sobre el idioma del contenido del elemento y del valor
de sus atributos.
 dir
Indica la dirección de texto y tablas
 name
Nombre al que se asocia la meta información
 content
Los datos que se quieren asociar a name
 http-equiv
Aporta información sobre los encabezados de respuesta HTTP,
puede usarse en lugar de name.
 scheme
Indica un esquema de interpretación para los metadatos
Ejemplo
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

5
2.6. <style>
Etiqueta de estilo usada para escribir CSS en línea.
Atributo
 title
Texto informativo o título del elemento. Suele mostrarse a modo
de "tool tip".
 type
Indica el lenguaje de hojas de estilo usado
Ejemplo

<style type="text/css">
p { color: red; }
</style>
<p> Texto en rojo </p>

3. Etiquetas Scripting
3.1. <script>
Define ya sea un script interno o un enlace hacia un script externo. El
lenguaje de programación es JavaScript
Atributo
o Src
Este atributo especifica la URI del script externo; este puede ser
usado como alternativa a scripts embebidos directamente en el
documento. Si el script tiene el atributo src, no debería tener
código dentro de la etiqueta.
o type
Este atributo identifica el lenguaje de scripting en que está
escrito el código embebido dentro de la etiqueta script, o
referenciada utilizando el atributo src. Los valores posibles
están especificados como un MIME type (tipo MIME)
o text
Este atributo actúa como el atributo textContent, establece el
texto contenido del elemento. Pero a diferencia de
textContent, este atributo se evalúa como ejecutable luego de
ser insertado como nodo en el DOM.

6
Ejemplo
<script type="text/javascript"
src="javascript.js"></script>
<script src="javascript.js"></script>
3.2. <noscript>
Define un contenido alternativo a mostrar cuando el navegador no
soporta scripting.

4. Etiquetas de Secciones

<body>
Representa el contenido principal de un documento HTML. Solo hay
un elemento <body> en un documento.
4.1. <section> (*)
Define una sección en un documento.
4.2. <nav> (*)
Define una sección que solamente contiene enlaces de navegación
4.3. <article> (*)
Define contenido autónomo que podría existir independientemente del
resto del contenido
4.4. <aside> (*)
Define algunos contenidos vagamente relacionados con el resto del
contenido de la página. Si es removido, el contenido restante seguirá
teniendo sentido
4.5. <h1>,<h2>,<h3>,<h4>,<h5>,<h6>
Los elementos de cabecera implementan seis niveles de cabeceras de
documentos; <h1> es la de mayor y <h6> es la de menor importancia.
Un elemento de cabecera describe brevemente el tema de la sección
que introduce
4.6. <header> (*)
Define la cabecera de una página o sección. Usualmente contiene un
logotipo, el título del sitio Web y una tabla de navegación de contenidos
4.7. <footer> (*)
Define el pie de una página o sección. Usualmente contiene un
mensaje de derechos de autoría, algunos enlaces a información legal
o direcciones para dar información de retroalimentación

7
4.8. <address>
Define una sección que contiene información de contacto
4.9. <main> (*)
Define el contenido principal o importante en el documento. Solamente
existe un elemento <main> en el documento
5. Etiquetas de Agrupaciones de contenido
5.1. <p>
Define una parte que debe mostrarse como un párrafo
5.2. <hr>
Representa un quiebre temático entre párrafos de una sección o
articulo o cualquier contenido
5.3. <pre>
Indica que su contenido este preformateado y que este formato debe
ser preservado
5.4. <blockquote>
Representa un contenido citado desde otra fuente
5.5. <ol>
Define una lista ordenada de artículos
5.6. <ul>
Define una lista de artículos sin orden
5.7. <li>
Define un artículo de una lista enumerada
5.8. <dl>
Define una lista de definiciones, es decir, una lista de términos y sus
definiciones asociadas
5.9. <dt>
Representa un término definido por el siguiente <dd>
5.10. <dd>
Representa la definición de los términos listados antes que él
5.11. <figure> (*)
Representa una figura ilustrada como parte del documento
5.12. <figcaption> (*)
Representa la leyenda de una figura
5.13. <div>

8
Representa un contenedor genérico sin ningún significado especial
6. Etiquetas de Semántica a nivel de texto
6.1. <a>
Representa un hiperenlace, enlazando a otro recurso
6.2. <em>
Representa un texto enfatizado, como un acento de intensidad
6.3. <strong>
Representa un texto especialmente importante
6.4. <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
6.5. <s>
Representa contenido que ya no es exacto o relevante
6.6. <cite>
Representa el título de una obra
6.7. <q>
Representa una cita textual online
6.8. <dfn>
Representa un término cuya definición está contenida en su contenido
ancestro más próximo
6.9. <abbr>
Representa una abreviación o un acrónimo; la expansión de la
abreviatura puede ser representada por el atributo title

6.10. <data> (*)


Asocia un equivalente legible por máquina a sus contenidos. (Este
elemento está solamente en la versión de la WHATWG del estándar
HTML, y no en la versión de la W3C de HTML5)
6.11. <time> (*)
Representa un valor de fecha y hora; el equivalente legible por
máquina puede ser representado en el atributo datetime
6.12. <code>
Representa un código de ordenador

9
6.13. <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
6.14. <samp>
Representa la salida de un programa o un ordenador
6.15. <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
6.16. <sub>,<sup>
Representan un subíndice y un superíndice, respectivamente
6.17. <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
6.18. <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
6.19. <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
6.20. <mark> (*)
Representa texto resaltado con propósitos de referencia, es decir por
su relevancia en otro contexto
6.21. <ruby> (*)
Representa contenidos a ser marcados con anotaciones
Ruby, recorridos cortos de texto presentados junto al texto. Estos son
utilizados con regularidad en conjunto a lenguajes de Asia del Este,
donde las anotaciones actúan como una guía para la pronunciación,
como el furigana Japonés

10
6.22. <rt> (*)
Representa el texto de una anotación Ruby
6.23. <rp> (*)
Representa los paréntesis alrededor de una anotación Ruby, usada
para mostrar la anotación de manera alterna por los navegadores que
no soporten despliegue estándar para las anotaciones
6.24. <bdi> (*)
Representa un texto que debe ser aislado de sus alrededores para el
formateado bidireccional del texto. Permite incrustar un fragmento de
texto con una direccionalidad diferente o desconocida
6.25. <bdo>
Representa la direccionalidad de sus descendientes con el fin de
anular de forma explícita al algoritmo bidireccional Unicode
6.26. <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
6.27. <br>
Representa un salto de línea
6.28. <wbr> (*)
Representa una oportunidad de salto de línea, es decir, un punto
sugerido de envoltura donde el texto de múltiples líneas puede ser
dividido para mejorar su legibilidad

7. Etiquetas de Ediciones
7.1. <ins>
Define una adición en el documento
7.2. <del>
Define una remoción del documento
8. Etiquetas de Contenido incrustado
8.1. <img>
Representa una imagen
8.2. <iframe>

11
Representa un contexto anidado de navegación, es decir, un
documento HTML embebido
8.3. <embed> (*)
Representa un punto de integración para una aplicación o contenido
interactivo externo que por lo general no es HTML
8.4. <object>
Representa un recurso externo, que será tratado como una imagen,
un sub-documento HTML o un recurso externo a ser procesado por
un plugin
8.5. <param>
Define parámetros para el uso por los plugins invocados por los
elementos <object>
8.6. <video> (*)
Representa un video, y sus archivos de audio y capciones asociadas,
con la interfaz necesaria para reproducirlos
8.7. <audio> (*)
Representa un sonido o stream de audio
8.8. <source> (*)
Permite a autores especificar recursos multimedia alternativos para los
elementos multimedia como <video> o <audio>
8.9. <track> ( *)
Permite a autores especificar una pista de texto temporizado para
elementos multimedia como <video> o <audio>

8.10. <canvas> (*)


Representa un área de mapa de bits en el que se pueden utilizar
scripts para renderizar gráficos como gráficas, gráficas de juegos o
cualquier imagen visual al vuelo
8.11. <map>
En conjunto con <area>, define un mapa de imagen
8.12. <area>
En conjunto con <map>, define un mapa de imagen
8.13. <svg> (*)

12
Define una imagen vectorial embebida
8.14. <math> (*)
Define una fórmula matemática
9. Etiquetas de Datos Tabulados
9.1. <table>
Representa datos con más de una dimensión
9.2. <caption>
Representa el título de una tabla
9.3. <colgroup>
Representa un conjunto de una o más columnas de una tabla
9.4. <col>
Representa una columna de una tabla
9.5. <tbody>
Representa el bloque de filas que describen los datos concretos de
una tabla
9.6. <thead>
Representa el bloque de filas que describen las etiquetas de columna
de una tabla
9.7. <tfoot>
Representa los bloques de filas que describen los resúmenes de
columna de una tabla.
9.8. <tr>
Representa una fila de celdas en una tabla
9.9. <td>
Representa una celda de datos en una tabla
9.10. <th>
Representa una celda encabezado en una tabla
10. Etiquetas de Formulario
10.1. <form>
Representa un formulario, consistiendo de controles que puede ser
enviado a un servidor para procesamiento
10.2. <fieldset>
Representa un conjunto de controles
10.3. <legend>

13
Representa el título de un <fieldset>

10.4. <label>
Representa el título de un control de formulario
10.5. <input>
Representa un campo de datos escrito que permite al usuario editar
los datos
10.6. <button>
Representa un botón
10.7. <select>
Representa un control que permite la selección entre un conjunto de
opciones
10.8. <datalist> (*)
Representa un conjunto de opciones predefinidas para otros controles
10.9. <optgroup>
Representa un conjunto de opciones, agrupadas lógicamente
10.10. <option>
Representa una opción en un elemento <select>, o una sugerencia de
un elemento <datalist>
10.11. <textarea>
Representa un control de edición de texto multi-línea
10.12. <keygen> (*)
Representa un control de par generador de llaves
10.13. <output> (*)
Representa el resultado de un cálculo
10.14. <progress> (*)
Representa el progreso de finalización de una tarea
10.15. <meter> (*)
Representa la medida escalar (o el valor fraccionario) dentro de un
rango conocido
11. Etiquetas para Elementos Interactivos
11.1. <details>
Representa un widget desde el que un usuario puede obtener
información o controles adicionales

14
11.2. <summary>
Representa un resumen, título o leyenda para un elemento <details>
dado
11.3. <command>
Representa un comando que un usuario puede invocar
11.4. <menu>
Representa un comando que un usuario puede invocar

15

También podría gustarte