---
title: time
slug: Web/HTML/Element/time
tags:
  - Elemento
  - Fecha
  - HTML
  - HTML5
  - Hora
  - Referencia
  - Web
translation_of: Web/HTML/Element/time
original_slug: Web/HTML/Elemento/time
---
<p>El <strong>elemento HTML <code>&lt;time&gt;</code></strong> representa un periodo específico en el tiempo. Puede incluir el atributo <code>datetime</code> para convertir las fechas en un formato interno legible por un ordenador, permitiendo mejores resultados en los motores de búsqueda o características personalizadas como recordatorios.</p>

<p>Puede representar uno de los contenidos siguientes:</p>

<ul>
 <li>Una hora en formato de 24 horas</li>
 <li>Una fecha precisa en el <a class="external" href="https://es.wikipedia.org/wiki/Calendario_gregoriano">Calendario Gregoriano</a> (con hora y zona horaria opcionales)</li>
 <li><a href="https://www.w3.org/TR/2014/REC-html5-20141028/infrastructure.html#valid-duration-string">Un periodo de tiempo válido</a></li>
</ul>

<div>{{EmbedInteractiveExample("pages/tabbed/time.html", "tabbed-standard")}}</div>

<p class="hidden">La fuente de este ejemplo interactivo está almacenada en un repositorio de GitHub. Si desea contribuir al projecto, por favor clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> y envíe su solicitud de extracción (pull request).</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Categorías de contenido</a></th>
   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Contenido de flujo</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">contenido de fraseo</a>, contenido palpable.</td>
  </tr>
  <tr>
   <th scope="row">Contenido permitido</th>
   <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content">Contenido de fraseo</a>.</td>
  </tr>
  <tr>
   <th scope="row">Omisión de etiquetas</th>
   <td>Ninguna;  tanto la etiqueta de inicio como de fin son obligatorias.</td>
  </tr>
  <tr>
   <th scope="row">Padres permitidos</th>
   <td>Cualquier elemento que acepte <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">contenido de fraseo</a>.</td>
  </tr>
  <tr>
   <th scope="row">Roles permitidos en ARIA</th>
   <td>Cualquiera</td>
  </tr>
  <tr>
   <th scope="row">Interfaz DOM</th>
   <td>{{domxref("HTMLTimeElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Atributos">Atributos</h2>

<p>Como todos los elementos de HTML, este elemento soporta los <a href="https://developer.mozilla.org/es/docs/Web/HTML/Atributos_Globales">atributos globales</a>.</p>

<dl>
 <dt>{{htmlattrdef("datetime")}}</dt>
 <dd>Este atributo indica la hora y/o fecha del elemento y debe estar escrito en uno de los formatos que se muestran posteriomente.</dd>
</dl>

<h2 id="Notas_de_uso">Notas de uso</h2>

<p>Este elemento es para presentar fechas y horas en un formato legible por el equipo. Por ejemplo, este puede ayudar a un agente de usuario ofrecer añadir un evento al calendario del usuario.</p>

<p>Este elemento no debe ser usado para fechas anteriores a la introducción del calendario Gregoriano (debido a complicaciones en el cálculo de dichas fechas).</p>

<p>El valor de fecha y hora (el valor legible por el equipo) es el valor del atributo del elemento <code>datetime</code>, que debe estar en el formato correcto (vea más adelante). Si el elemento no tiene un atributo <code>datetime</code>, <strong>no debe tener ningún elemento descendiente</strong>, y el valor datetime es el contenido de texto del hijo del elemento.</p>

<h3 id="Valores_datetime_válidos">Valores datetime válidos</h3>

<dl>
 <dt>una cadena válida de año</dt>
 <dd><code>2011</code></dd>
 <dd><code>0001</code></dd>
 <dt>una cadena válida de mes</dt>
 <dd><code>2011-11</code></dd>
 <dt>una cadena válida de fecha</dt>
 <dd><code>2011-11-18</code></dd>
 <dt>una cadena de fecha sin año válida</dt>
 <dd><code>11-18</code></dd>
 <dt>una cadena de semana válida</dt>
 <dd><code>2011-W47</code></dd>
 <dt>una cadena de hora válida</dt>
 <dd><code>14:54</code></dd>
 <dd><code>14:54:39</code></dd>
 <dd><code>14:54:39.929</code></dd>
 <dt>una cadena de fecha y hora local válida</dt>
 <dd><code>2011-11-18T14:54:39.929</code></dd>
 <dd><code>2011-11-18 14:54:39.929</code></dd>
 <dt>una cadena de fecha y hora global válida</dt>
 <dd><code>2011-11-18T14:54:39.929Z</code></dd>
 <dd><code>2011-11-18T14:54:39.929-0400</code></dd>
 <dd><code>2011-11-18T14:54:39.929-04:00</code></dd>
 <dd><code>2011-11-18 14:54:39.929Z</code></dd>
 <dd><code>2011-11-18 14:54:39.929-0400</code></dd>
 <dd><code>2011-11-18 14:54:39.929-04:00</code></dd>
 <dt>una cadena valida de duración</dt>
 <dd><code>PT4H18M3S</code></dd>
</dl>

<h2 id="Ejemplos">Ejemplos</h2>

<h3 id="Ejemplo_Simple">Ejemplo Simple</h3>

<h4 id="HTML">HTML</h4>

<pre class="brush: html notranslate">&lt;p&gt;El concierto empieza a las &lt;time&gt;20:00&lt;/time&gt;.&lt;/p&gt;
</pre>

<h4 id="Output">Output</h4>

<p>{{ EmbedLiveSample('Simple_example', 250, 60) }}</p>

<h3 id="Datetime_example" name="Datetime_example">Ejemplo con <code>datetime</code></h3>

<h4 id="HTML_2">HTML</h4>

<pre class="brush: html notranslate">&lt;p&gt;El concierto fué el &lt;time
  datetime="2001-05-15T19:00"&gt;15 de Mayo&lt;/time&gt;.&lt;/p&gt;
</pre>

<h4 id="Output_2">Output</h4>

<p>{{ EmbedLiveSample('Datetime_example', 250, 60) }}</p>

<h2 id="Especificaciones">Especificaciones</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificación</th>
   <th scope="col">Estado</th>
   <th scope="col">Comentario</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-time-element', '&lt;time&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>Sin cambios desde {{SpecName('HTML5.1')}}</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5.1', 'grouping-content.html#the-time-element', '&lt;time&gt;')}}</td>
   <td>{{Spec2('HTML5.1')}}</td>
   <td>Sin cambios desde {{SpecName('HTML5 W3C')}}</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-time-element', '&lt;time&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>Definición inicial</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidad_de_los_navegadores">Compatibilidad de los navegadores</h2>



<p>{{Compat("html.elements.time")}}</p>

<h2 id="Ver_también">Ver también</h2>

<ul>
 <li>El elemento {{HTMLElement("data")}}, permite señalizar otro tipo de valores.</li>
</ul>