1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
|
---
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><time></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"><p>El concierto empieza a las <time>20:00</time>.</p>
</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"><p>El concierto fué el <time
datetime="2001-05-15T19:00">15 de Mayo</time>.</p>
</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', '<time>')}}</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', '<time>')}}</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', '<time>')}}</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>
<div class="hidden">La tabla de compatibilidad en esta página es generada con información estructurada. Si desea contribuir, por favor revise <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíe su pull request.</div>
<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>
|
