• 20 hours
  • Easy

Free online content available in this course.

course.header.alt.is_certifying

Got it!

Last updated on 2/6/20

Recuerdo de las etiquetas HTML

Log in or subscribe for free to enjoy all this course has to offer!

Esta página ofrece una lista no exhaustiva de las etiquetas HTML existentes. Sí que contiene, sin embargo, un gran número de etiquetas HTML. Aunque ya hemos visto alguna durante el curso, hay otras que no hemos tenido la oportunidad de estudiar todavía. Las etiquetas que no hemos analizado todavía no se utilizan muy a menudo. No obstante, es muy posible que encuentres lo que necesitas en este nuevo conjunto de etiquetas.

Puedes utilizar este anexo como lista de verificación cuando desarrolles tu sitio web.

Recuerdo

Etiquetas de primer nivel

Las etiquetas de primer nivel son las principales variables utilizadas para estructurar una página HTML. Son esenciales para crear el "código mínimo" de una página web.

Etiqueta

Descripción

<html>

Etiqueta principal

<head>

Encabezado de la página

<body>

Cuerpo de la página

Código mínimo de una página HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Título</title>
</head>

<body>

</body>
</html>

Etiquetas de encabezado

Estas etiquetas se colocan todas en el encabezado de la página web, es decir entre <head> y </ head>:

Etiqueta

Descripción

<link />

Enlace con una hoja de estilo

<meta />

Metadatos de una página web (charset, palabras clave, etc.).

<script>

Código JavaScript

<style>

Código CSS

<title>

Título de la página

Etiquetas de estructuración del texto

Etiqueta

Descripción

<abbr>

Abreviatura

<blockquote>

Cita (larga)

<cite>

Citar el título de un trabajo o un evento

<q>

Cita (corta)

<sup>

Exponente

<sub>

Índice

<strong>

Resaltar fuerte

<em>

Resaltar suave

<mark>

Resaltar visualmente

<h1>

Título nivel 1

<h2>

Título nivel 2

<h3>

Título nivel 3

<h4>

Título nivel 4

<h5>

Título nivel 5

<h6>

Título nivel 6

<img />

Imagen

<figure>

Figura (imagen, código, etc.)

<figcaption>

Descripción de la figura

<audio>

Sonido

<video>

Vídeo

<source>

Formato de fuente para las etiquetas <audio> y <video>

<a>

Enlace de hipertexto

<br />

Salto de línea

<p>

Párrafo

<hr />

Línea de separación horizontal

<address>

Dirección de contacto

<del>

Texto borrado

<ins>

Texto insertado

<dfn>

Definición

<kbd>

Entrada de teclado

<pre>

Visualización con formato (para códigos fuente)

<progress>

Barra de progreso

<time>

Fecha u hora

Etiquetas de lista

En esta sección se enumeran todas las etiquetas HTML utilizadas para crear listas (listas con viñetas, listas numeradas, listas de definiciones, etc.)

Etiqueta

Descripción

<ul>

Listas de viñetas desordenadas

<ol>

Lista numerada

<li>

Elemento de lista con viñetas

<dl>

Lista de definiciones

<dt>

Término a definir

<dd>

Definición del término

Etiquetas de tabla

Etiqueta

Descripción

<table>

Tabla

<caption>

Título de tabla

<tr>

Fila de tabla

<th>

Celda de encabezado

<td>

Celda

<thead>

Sección del encabezado de la tabla

<tbody>

Sección del cuerpo de la tabla

<tfoot>

Sección del pie de la tabla

Etiquetas de formulario

Etiqueta

Descripción

<form>

Formulario

<fieldset>

Grupo de campo

<legend>

Título del grupo de campo

<label>

Descripción del campo

<input />

Campo de formulario (texto, contraseña, casilla, botón, etc.).

<textarea>

Campo de entrada de líneas múltiples

<select>

Lista desplegable

<option>

Elemento de lista desplegable

<optgroup>

Grupo de elementos de una casilla desplegable

Etiquetas de sección

Estas etiquetas se utilizan para esbozar nuestra página web.

Etiqueta

Descripción

<header>

Encabezado

<nav>

Enlaces de navegación principales

<footer>

Pie de página

<section>

Sección de página

<article>

Artículo (contenido independiente)

<aside>

Información adicional

Etiquetas genéricas

Las etiquetas genéricas son etiquetas que no tienen ningún significado semántico.

De hecho, todas las otras etiquetas HTML tienen un significado: <p> significa "Párrafo", <h2> significa "Subtítulo", etc.
A veces se necesita utilizar etiquetas genéricas (también llamadas etiquetas de finalidad general) ya que ninguna de las otras etiquetas es apropiada. Lo que más a menudo utilizas para construir tu diseño son las etiquetas genéricas.

Hay dos etiquetas genéricas: inline y block.

Etiqueta

Descripción

<span>

Etiqueta genérica inline

<div>

Etiqueta genérica block

Estas etiquetas solo son útiles si se las asocia con un atributo class, id o style:

  • class: especifica el nombre de la clase de CSS que se utilizará.

  • id: da un nombre a la etiqueta. Este nombre debe ser único en la página, ya que identifica a la etiqueta. Puedes utilizar el ID para muchas cosas, por ejemplo para crear un enlace a un ancla, para un estilo CSS tipo ID, para operaciones en JavaScript, etc.

  • style: este atributo permite especificar directamente el código CSS que se aplicará. No estás obligado a tener una hoja de estilos separada, puedes incluir los atributos CSS directamente. Ten en cuenta que es preferible utilizar una hoja de estilos externa en lugar de este atributo, ya que hace que tu página web sea más fácil de actualizar más adelante.

Estos tres atributos no se limitan a las etiquetas genéricas sino que puedes utilizarlos sin ningún problema en la mayoría de las demás etiquetas.

Example of certificate of achievement
Example of certificate of achievement