Ayuda:HTML en el wikitexto

De Wikipedia, la enciclopedia libre
Saltar a: navegación, búsqueda

El código a 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[editar]

Las siguientes etiquetas son permitidas:

<abbr> 
Una abreviación (por ejemplo, WWW, HTML)
<b> 
Text stylistically offset from other text without conveying extra importance
<big> 
Indica la representación en un tamaño de fuente más grande
<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> 
Una captura de la tabla
   
<center>  
Indicates presentation as a block-level center-aligned division
<cite> 
Título de la obra (e.g., HTML en el wikitexto)
<code> 
Un fragmento de código informático
<dd> 
Un valor
in a <dl>-marked association list
<del> 
Indica una supresión
<dfn> 
Marca un termino 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> 
A name
in a <dl>-marked association list
<em> 
Para lograr énfasis
<font> (obsoleto) 
Indica la presentación con un color de fuente, tipo de letra y/o un tamaño.
<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> 
  • A list item in ordered (ol)
  • or unordered (ul) lists
<ol> 
  1. An ordered...
  2. (enumerated) list
<p> 
Indicates a

paragraph or paragraph break.

(Paragraphs are usually indicated by Wiki markup.)

<pre> 
Representa un bloque de
texto preformateado
<rb> (obsoleto) 
Formerly used to mark base text in a ruby annotation.
<rp> 
Marks Ruby parentheses, an alternative for Ruby annotation: (hàn)() may be rendered as 汉 (hàn) 字 (zì)
<rt> 
Marks a Ruby annotation
<ruby> 
A Ruby annotation: hàn
<samp> 
Represents a sample output, such as from a program or script.
<s> or <strike>]] (both deprecated) 
Indicates text that is no longer valid or relevant
<small> 
Indicates fine print such as legal disclaimers in advertising
<span> 
A division of text, usually presented inline with surrounding text
<strong> 
Stresses strong importance, usually presented in bold
<sub> 
Indica unsubíndice
<sup> 
Indica unsuperí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

<tt> (obsoleto)
Indica presentación en una fuente de ancho fijo
<u> (obsoleto)
Indicates a non-textual annotation, typically represented as underlining
<ul>
  • An unordered...
  • (bulleted) list
<var> 
Indica una variable
<!-- ... --> (will be stripped during processing) 
<!--Non-visible comment-->

Enlaces de anclaje[editar]

HTML tags allow an id attribute that can be referenced in one's user style CSS, and allows the element to be used as link target.

However, the anchor element a is not allowed, so the wikitext

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

is treated like the wikitext

&lt;a href="http://meta.wikimedia.org/"&gt;Main Page&lt;/a&gt;

and is therefore displayed as

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

which is unlikely to be what the editor intended. Instead of using the anchor element (<a>) the wiki markup for external reference is required (enclosed in square brackets with the URL separated from the contents by a single space):

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

displays as

Main Page

The following excerpt from Sanitizer.php additionally shows which attributes are allowed.

$htmlpairsStatic = array( # Tags that must be closed
    '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( # Elements that cannot have close tags
    'br', 'hr'
);
$htmlnest = array( # Tags that can be nested--??
    'table', 'tr', 'td', 'th', 'div', 'blockquote', 'ol', 'ul',
    'dl', 'font', 'big', 'small', 'sub', 'sup', 'span'
);
$tabletags = array( # Can only appear inside table, we will close them
    'td', 'th', 'tr',
);
$htmllist = array( # Tags used by list
    'ul','ol',
);
$listtags = array( # Tags that can appear in a list
    'li',
);

Etiquetas[editar]

<span> is a generic inline text container.

<font> is a similar tag which is deprecated (should not be used) in favor of <span>.

For example

a <font color="red">red</font> word.

produces the same result as

a <span style="color:red">red</span> word.

See also m:Help:Text color.

It's pointless to combine the legacy tag <font> with inline CSS; legacy browsers would ignore the CSS, while modern browsers support <span> (see above).

Note that in most cases, one can use a more descriptive tag, for instance, <strong> to indicate an important piece of text, or <em> (subject to the same things as strong) to indicate an emphasized piece of text.

This not only draws the user's attention to the text, but can also alert those who are using nonvisual browsers or have sight impairments, etc. to the fact that that is emphasized text.

Usando <span> como enlace de anclaje[editar]

The standard way of providing a named anchor as an invisible target (i.e. <a name="Foo">) doesn't work (since all <a> tags are converted), and an alternative suggested by the W3C, <hN id="Foo"></hN>, produces an "[Edit]" link.

However, <span id="Foo"/> does produce a target that can be the destination of a link. (This is silently changed to <span id="Foo"></span>). This is the method used by the {{anchor}} template. Note that it doesn't work everywhere; for instance, in a table, it has to be inside a cell before some browsers will jump to it properly.

This technique can be used to produce immutable links from one article to a section of another, which continue to work even if the section name is changed by someone who does not realize that another article links there. For example, <span id="immutable link from Article"/>.

<div>[editar]

<div> is a generic block container. Rules:

  • <div> should be followed by a newline
  • </div> should be preceded by a newline
  • </div> followed by text on the same line, two newlines and text before <div> on the same line should be avoided (because the two newlines only produce a space)

Atributos[editar]

Most tags can have a style attribute. For example

<div style="font-size:80%">
This is <span style="color:red">red</span> text.
</div>

produces:

This is red text.

Most tags can have classes and IDs. They can be used in conjunction with stylesheets to give a piece of text a descriptive class (or unique identifier) and to refer to that in a stylesheet. For example

<div class="infobox">Example infobox</div>
Example infobox

Produces the box which floats on the right because infobox class is already defined in local Mediawiki:Common.css.

Classes and IDs can also be used by Javascript code, for example see how {Link FA} works in enwiki.

Etiquetas con efectos especiales[editar]

Pre[editar]

<pre> tags work as the combination of <nowiki> and the standard HTML <pre> tag: the content will preformatted, and it will not be parsed, but shown as in the wikitext source. If you want preformatted but parsed text, use a space in the beginning of the line instead. For example,

<pre>This word is <b>bold</b>.</pre>
  This word is <b>bold</b>.

will render as

This word is <b>bold</b>.
This word is bold.

Comentarios[editar]

HTML comments in the wikitext (<!-- ... -->) will not appear in the HTML code at all.

Encabezados[editar]

Headers (<h1>...<h6>) will be treated in a similar way as wikicode headers:

Sample header

Note that it appears in the table of contents and has an accompanying edit link. There are some minor differences though: editing such a section won't prefill the edit summary, and the browser won't jump to the beginning of the section when saving the page. Thus, you should use the wikitext equivalents instead.

Excepciones[editar]

In some pages in the MediaWiki namespace (typically the short messages like button labels) HTML does not work, and e.g. <span id=abc> produces the HTML &lt;span id=abc&gt; rendered by the browser as <span id=abc>. Some others are interpreted as pure HTML (thus any tag can be used, but wikicode won't be transformed to HTML).

User CSS and JS pages (see Help:User style) are interpreted as if inside a <pre> block. From MW 1.11 this also goes for sitewide CSS/JS; in earlier versions, you have to manually add /*<pre>*/ to the beginning and /*</pre>*/ to the end of those pages to avoid strange rendering.

Validación[editar]

The MediaWiki software attempts to catch HTML errors, but it does not catch all of them. If you use HTML in wikitext, it is helpful to verify it with the W3C Markup Validation Service.

Etiquetas de extensión y análisis sintáctico[editar]

The MediaWiki software adds elements that look and act like HTML tags. Parser tags are included in MediaWiki whereas extension tags are added by optional software extensions.

Parser tags 
<gallery></gallery>, <nowiki></nowiki>, <pre></pre>, <source></source>
Extension tags 
<categorytree></categorytree>, <charinsert></charinsert>, <hiero></hiero>, <imagemap></imagemap>, <inputbox></inputbox>, <math></math>, <poem></poem>, <ref></ref>, <references></references>, <syntaxhighlight></syntaxhighlight>, <timeline></timeline>

Enlaces externos[editar]