diff options
Diffstat (limited to 'files/es/web/html/element/time/index.html')
| -rw-r--r-- | files/es/web/html/element/time/index.html | 170 |
1 files changed, 170 insertions, 0 deletions
diff --git a/files/es/web/html/element/time/index.html b/files/es/web/html/element/time/index.html new file mode 100644 index 0000000000..8216d3b167 --- /dev/null +++ b/files/es/web/html/element/time/index.html @@ -0,0 +1,170 @@ +--- +title: time +slug: Web/HTML/Elemento/time +tags: + - Elemento + - Fecha + - HTML + - HTML5 + - Hora + - Referencia + - Web +translation_of: Web/HTML/Element/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> |