Ayuda:HTML en el wikitexto

El código que utilizar para muchos de los elementos HTML mostrados aquí se puede sustituir por wikitexto como se muestra en Ayuda:Edición. Esta página explica el código HTML que se puede usar al editar, para aquellas situaciones en los que la alternativa en código tipo wikitexto no es posible, como por ejemplo el crear un enlace a un elemento particular dentro de una tabla o dar formato avanzado a determinado texto.

Etiquetas HTML permitidas

Las siguientes etiquetas son permitidas:

<abbr>: Una abreviatura (por ejemplo, WWW, HTML).

<b>: Texto que desentona estilísticamente (en negrita) con el resto del texto sin atribuir especial importancia.

<blockquote>: Una sección de material citado,

suele presentarse como un bloque con sangría,

por lo general para citas largas

<br>: Un salto de línea
en medio del texto, como en la poesía o las direcciones.

<caption> :

El título de una tabla

<cite> : Título de la obra (e.g., HTML en el wikitexto)

<code> : Un fragmento de código informático

<dd> :

Un valor

en una lista de asociaciones marcada con la etiqueta<dd>

<del> : Indica una supresión

<dfn> :Marca un término definido: un término que se define en el texto.

<div> :

Una división del texto, suele presentarse como un bloque

<dl> :

Una lista de nombres asociados a valores (por ejemplo, términos y definiciones, o propiedades y datos)

<dt> :

Un valor

en una lista de asociaciones marcada con la etiqueta <dt>

<em> : Para lograr énfasis

<h1> - <h6> :

Títulos de secciones a diferentes niveles.

<hr> : Un salto de párrafo a nivel temático, como una transición a un tema diferente

---

Por lo general, representada por una línea horizontal.

<i> : El texto está representado en una voz alternativa o estado de ánimo, por lo general representado en itálicas

<ins> : Indica una inserción

<kbd> : Indica un texto a ser ingresado por el usuario.

<li> :

Un elemento de lista en listas ordenadas (ol)

o sin orden (ul)

<ol> :

1. Una lista ordenada...
2. o numerada

<p> : Indica un

párrafo o punto y aparte en un párrafo.

(Los párrafos normalmente están indicados por Wiki markup.)

<pre> : Representa un bloque de

texto preformateado

<rp> : Marca paréntesis de Ruby, una forma alternativa de anotar en Ruby: 汉(hàn)字(zì) se puede renderizar como 汉 (hàn) 字 (zì)

<rt> : Marca una 字anotación en 汉Ruby 

<ruby> : Una anotación de Ruby: 汉hàn字zì

<samp> : Representa una muestra, por ejemplo de un programa o código.

<small> : Indica una letra pequeña como la de documentos legales o anuncios.

<span> : Una división del texto, normalmente presentada rodeada de texto.

<strong> : Enfatiza una gran importancia, normalmente presentada en negrita.

<sub> : Indica un_subíndice

<sup> : Indica un^superíndice

<table> : Identifica una tabla

<td> :

Una celda de datos para la tabla

<th> :

Una celda de encabezado para la tabla, el contenido se muestra convencionalmente en negrita y en posición centrada

<tr> : Contiene una fila de celdas en una tabla

<ul> :

• Una lista sin orden...
• pero con marcas

<var> : Indica una variable

<!-- ... --> : (Se eliminará durante el procesamiento) : <!--Comentario no visible-->

Etiquetas HTML obsoletas

Actualmente las siguientes etiquetas son obsoletas y no recomendadas por HTML5. Aunque los navegadores aún las soportan, debe utilizarse CSS en su lugar.

<big>

Indica la representación en un tamaño de fuente más grande.

<center>

En su lugar se utiliza la plantilla {{Centrar}}, que usa CSS. Indica la presentación de un bloque alineado centralmente.

<font>

En su lugar se utiliza la plantilla {{Font}} que usa CSS. Indica la presentación con un color de fuente, tipo de letra y/o un tamaño.

<rb>

Anteriormente usado para marcar texto base en una anotación de Ruby.

<s> o <strike>

Indica que el texto ha dejado de ser relevante.

<tt>

Indica presentación en una fuente de ancho fijo.

<u>

Indica una anotación no-textual, típicamente representada por un subrayado.

Enlaces de anclaje

Las etiquetas HTML permiten un atributo de id que puede ser referido en un CSS propio de usuario user style, y permite que el elemento se use como objetivo de enlace.

Sin embargo, el elemento de anclaje a no está permitido, da modo que el wikitexto

<a href="http://meta.wikimedia.org/">Main Page</a>

es tratado como el wikitexto

<a href="http://meta.wikimedia.org/">Main Page</a>

y por tanto es representado como

<a href="http://meta.wikimedia.org/">Main Page</a>

lo cual no es probablemente la intención del editor. En lugar del elemento de anclaje (<a>) la marca wiki para referencias externas es requerida (entre corchetes con la URL separada de los contenidos por un solo espacio:

[http://meta.wikimedia.org/ Main Page]

queda representado como:

Main Page

El siguiente extracto de Sanitizer.php muestra que atributos son permitidos.

$htmlpairsStatic = array( # Etiquetas que deben cerrarse
    'b', 'del', 'i', 'ins', 'u', 'font', 'big', 'small', 'sub', 'sup', 'h1',
    'h2', 'h3', 'h4', 'h5', 'h6', 'cite', 'code', 'em', 's',
    'strike', 'strong', 'tt', 'var', 'div', 'center',
    'blockquote', 'ol', 'ul', 'dl', 'table', 'caption', 'pre',
    'ruby', 'rt' , 'rb' , 'rp', 'p', 'span', 'u', 'abbr'
);
$htmlsingle = array(
    'br', 'hr', 'li', 'dt', 'dd'
);
$htmlsingleonly = array( # Elementos que no pueden tener etiqutas de cerrado
    'br', 'hr'
);
$htmlnest = array( # Etiquetas que pueden ser anidadas--??
    'table', 'tr', 'td', 'th', 'div', 'blockquote', 'ol', 'ul',
    'dl', 'font', 'big', 'small', 'sub', 'sup', 'span'
);
$tabletags = array( # Sólo pueden aparecer dentro de una tabla, nosotros la cerraremos
    'td', 'th', 'tr',
);
$htmllist = array( # Etiquetas usadas por listas
    'ul','ol',
);
$listtags = array( # Etiquetas que pueden aparecer en una lista
    'li',
);

Etiquetas

<span> es un contenedor de texto genérico.

<font> es una etiqueta similar que es desaprobada (no debería ser usada) en favor de <span>.

Por ejemplo

una palabra de color <font color="red">rojo</font>.

produce el mismo resultado que

una palabra de color <span style="color:red">rojo</span>.

Es inútil combinar la antigua etiqueta <font> con CSS; los navegadores antiguos ignorarían el CSS, mientras que los navegadores modernos usan <span> (véase arriba).

Nótese que, en la mayoría de los casos, se puede usar una etiqueta más descriptiva, por ejemplo, <strong> para indicar la importancia de un trozo de texto, o <em> (sujeta a las mismas condiciones que strong) para indicar un trozo de texto enfatizado.

Esto no sólo llama la atención del lector al trozo de texto, sino que también alerta a aquellos que usan un navegador no-visual o con limitaciones de visión, etc el hecho de que es un texto enfatizado.

Véase también: m:Help:Text color

Usando <span> como enlace de anclaje

La manera estándar de mostar un anclaje con nombre como un objetivo invisble (i.e. <a name="Foo">) no funciona (dado que todas las etiquetas <a> son convertidas), y una alternativa sugerida por el W3C, <hN id="Foo"></hN>, produce un enlace «[Edit]».

Sin embargo, <span id="Foo"/> produce un objetivo que puede ser el destino de un enlace. (Esto es discretamente cambiado a <span id="Foo"></span>). Este es el método usado por la plantilla {{anchor}}. Nótese que no funciona en todos sitios; por ejemplo, en una tabla, tiene que estar dentro de una celda para que algunos navegadores puedan saltar al enlace.

Esta técnica puede ser usada para producir enlaces inmutables de un artículo a una sección de otro, los cuales siguen funcionando incluso si el nombre de la sección es cambiado por alguien que no se percató de que otro artículo enlaza ahí. Por ejemplo, <span id="enlace inmutable de un Artículo"/>.

<div>

<div> es un contenedor de bloques genérico. Reglas:

• <div> debe estar seguido por una nueva línea
• </div> debe ser predecido por una nueva línea
• </div> seguido de texto en la misma línea, dos líneas o texto antes de <div> en la misma línea debería ser evitado (ya que dos líneas nuevas producen un solo espacio).

Atributos

La mayoría de las etiquetas pueden tener el atributo style. Por ejemplo

<div style="font-size:80%">
Esto es texto <span style="color:red">rojo</span>.
</div>

produce:

Esto es texto rojo.

Y este con el texto más grande (100% en vez de 80%):

<div style="font-size:100%">
Esto es texto <span style="color:red">rojo</span>.
</div>

produce:

Esto es texto rojo.

En este ejemplo, dentro del atributo style, usamos las definiciones size (tamaño) 100% y align (alineación) derecha, separadas por un punto y coma, logrando así, con la nuevas característica, que el texto se alinee a la derecha:

<div style="font-size:100%; text-align:right">
Esto es texto <span style="color:red">rojo</span> alineado a la derecha.
</div>

produce:

Esto es texto rojo alineado a la derecha.

La mayoría de las etiquetas pueden tener los atributos de clases e IDs. Pueden ser usadas conjuntamente con hojas de estilo para dar una clase descriptiva (o identificador único) a un trozo de texto y para referirse al mismo en la hoja de estilo. Por ejemplo

<div class="infobox">Caja de información de ejemplo</div>

Caja de información de ejemplo

Produce una caja que flota en la derecha por que la clase infobox ya está definida localmente en Mediawiki:Common.css.

Las clases e IDs también pueden ser usadas por código de Javascript. Por ejemplo, véase how {Link FA} works en enwiki (inglés).

Etiquetas con efectos especiales

Pre

Las etiquetas <pre> funcionan como la combinación de <nowiki> y la etiqueta estándar de HTML <pre>: El contenido estará preformateado, y no se parseará, pero será mostrado como en la fuente de WikiTexto. Si se quiere texto preformateado pero parseado, se deberá usar un espacio al principio de la linea. Por ejemplo,

<pre>Esta palabra está en <b>negrita</b>.</pre>
  Esta palabra está en <b>negrita</b>.

se renderizará como

Esta palabra está en <b>negrita</b>.

Esta palabra está en negrita.

Comentarios

Comentarios de HTML en el wikitexto(<!-- ... -->) No aparecerán en el código HTML.

Encabezados

Los encabezados (<h1>...<h6>) serán tratados de forma similar a los encabezados de WikiCode:

Encabezado de ejemplo

Nótese que aparece en el Índice y que tiene un enlace de edición acompañante. Aun así hay ciertas diferencias: editar una de estas secciones no auto-rellenerá el resumen de edición, y el navegador no saltará al principio de la sección cuando se guarde la página. Por esta razón se recomienda usar los equivalentes de WikiTexto.

Excepciones

En algunas páginas del espacio de nombres MediaWiki (normalmente los pequeños mensajes como los rótulos en los botones) el código HTML no funciona. Por ejemplo, <span id=abc> produce el HTML &lt;span id=abc&gt; renderizado por el navegador como <span id=abc>. Otros son interpretados como HTML puro (por lo tanto cualquier etiqueta puede ser usada, pero el WikiCode no será transformado a HTML).

Páginas propias de usuarios de CSS y JS son interpretadas como si estuvieran dentro de un bloque <pre>. Desde MW 1.11 esto también incluye todas los CSS/JS dentro de la página; en versiones anteriores, se tiene que añadir manualmente /*<pre>*/ al principio y añadir /*</pre>*/ al final de esas páginas para evitar renderizados extraños.

Validación

El software MediaWiki intenta suprimir los errores de HTML, pero no los puede cubrir todos. Si usas HTML en WikiTexto, se recomienda verificar este con W3C Markup Validation Service.

Etiquetas de extensión y análisis sintáctico

El software de MediaWiki añade elementos que parecen y actúan como etiquetas HTML. Las etiquetas parseadoras están incluidas en MediaWiki mientras que las etiquetas de extensión son añadidas por software de extensiones opcionales.

Etiquetas parseadoras

• <gallery></gallery>
• <nowiki></nowiki>
• <pre></pre>
• <source></source>

Etiquetas de extensión

• <categorytree></categorytree>
• <charinsert></charinsert>
• <hiero></hiero>
• <imagemap></imagemap>
• <inputbox></inputbox>
• <math></math>
• <poem></poem>
• <ref></ref>
• <references></references>
• <syntaxhighlight></syntaxhighlight>
• <timeline></timeline>

Véase también

• Elemento HTML
• Help:Cascading Style Sheets (en inglés)
• Span and div (en inglés)
• HTML attribute (en inglés) para los atributos, como puede ser el de clase (class) y el de identidad (id).

Enlaces externos

• HTML 4.01 specification: elements | attributes
• For customizing the handling of HTML in MediaWiki, see the HTML and Tidy sections in mw:Manual:Configuration settings
• Some extensions allow adding arbitrary HTML to a page, for example mw:Extension:AddHTML, mw:Extension:SecureHTML and mw:Extension:Secure HTML; see $wgRawHtml for a more complete list
• Within the MediaWiki codebase, these HTML checks happen in includes/Sanitizer.php