Skip to content

HTML Tidy: Ponga sus páginas web en forma

febrero 6, 2009

Qué es

HTML Tidy es un software libre que tiene las funciones de corrector, validador y simplificador de código HTML.

Ejemplo de uso

Supongamos que tenemos un archivo HTML generado por Word 2003 a partir de un archivo .doc:

<html>

<head>
<meta http-equiv=Content-Type content="text/html; charset=windows-1252">
<meta name=Generator content="Microsoft Word 11 (filtered)">
<title>HTML Tidy is a computer program and a library the purpose of which is to
fix invalid HTML and to improve the layout and indent style of the resulting
markup</title>
<style>
<!--
 /* Font Definitions */
 @font-face
	{font-family:Wingdings;
	panose-1:5 0 0 0 0 0 0 0 0 0;}
 /* Style Definitions */
 p.MsoNormal, li.MsoNormal, div.MsoNormal
	{margin:0cm;
	margin-bottom:.0001pt;
	font-size:12.0pt;
	font-family:"Times New Roman";}
@page Section1
	{size:595.3pt 841.9pt;
	margin:70.85pt 3.0cm 70.85pt 3.0cm;}
div.Section1
	{page:Section1;}
 /* List Definitions */
 ol
	{margin-bottom:0cm;}
ul
	{margin-bottom:0cm;}
-->
</style>

</head>

<body lang=ES>

<div class=Section1>

<p class=MsoNormal><span lang=EN-US>HTML Tidy is a computer program and a
library the purpose of which is to fix invalid HTML and to improve the layout
and indent style of the resulting markup.</span></p>

<p class=MsoNormal><span lang=EN-US>&nbsp;</span></p>

<p class=MsoNormal><span lang=EN-US>It was developed by Dave Raggett of W3C,
then passed on to become a Sourceforge project. Its source code is written in
ANSI C for maximum portability and precompiled binaries are available for a
variety of platforms. It is available under the W3C license (a permissive,
BSD-style license).</span></p>

<p class=MsoNormal><span lang=EN-US>&nbsp;</span></p>

<p class=MsoNormal><span lang=EN-US>Examples of bad HTML it is able to fix:</span></p>

<p class=MsoNormal><span lang=EN-US>&nbsp;</span></p>

<ul style='margin-top:0cm' type=disc>
 <li class=MsoNormal><span lang=EN-US>Missing or mismatched end tags, mixed up
     tags </span></li>
 <li class=MsoNormal><span lang=EN-US>Adding missing items (some tags, quotes,
     ...) </span></li>
 <li class=MsoNormal><span lang=EN-US>Reporting proprietary HTML extensions </span></li>
 <li class=MsoNormal><span lang=EN-US>Change layout of markup to predefined
     style </span></li>
 <li class=MsoNormal><span lang=EN-US>Transform characters from some encodings
     into HTML entities</span></li>
</ul>

</div>

</body>

</html>

Después de aplicar HTML Tidy a este código monstruoso tendremos algo así:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="generator" content="HTML Tidy for Linux/x86 (vers 6 November 2007), see www.w3.org">
<title>HTML Tidy is a computer program and a library the purpose of which is to fix invalid HTML
and to improve the layout and indent style of the resulting markup</title>
</head>
<body>
<div class="Section1">
<p>HTML Tidy is a computer program and a library the purpose of which is to fix invalid
HTML and to improve the layout and indent style of the resulting markup.</p>
<p> </p>
<p>It was developed by Dave Raggett of W3C, then passed on to become a Sourceforge
project. Its source code is written in ANSI C for maximum portability and precompiled
binaries are available for a variety of platforms. It is available under the W3C license
(a permissive, BSD-style license).</p>
<p> </p>
<p>Examples of bad HTML it is able to fix:</p>
<p> </p>
<ul type="disc">
<li>Missing or mismatched end tags, mixed up tags</li>
<li>Adding missing items (some tags, quotes, ...)</li>
<li>Reporting proprietary HTML extensions</li>
<li>Change layout of markup to predefined style</li>
<li>Transform characters from some encodings into HTML entities</li>
</ul>
</div>
</body>
</html>

Lo cual es más manejable.

Para GNU/Linux Debian Lenny

Cómo instalarlo

1. Como root ejecute lo siguiente:

apt-get install tidy

Simple.

Cómo configurarlo

Eso no es tan simple pero tampoco es difícil. Hay que modificar, siempre como root, un archivo de texto llamado /etc/tidy.conf, el cual por default viene así:

# This file is the default tidy configuration file
# /etc/tidy.conf
# tidy - validate, correct, and pretty-print HTML files
# see tidy manpage for config examples

Podemos dejarlo así:

// Configuración de prueba
ascii-chars: yes
bare: yes
break-before-br: no
char-encoding: utf8
clean: yes
drop-empty-paras: yes
drop-font-tags: yes
drop-proprietary-attributes: yes
enclose-text: yes
indent: no
indent-spaces: 2
input-xml: no
join-styles: no
logical-emphasis: yes
markup: yes
merge-divs: yes
numeric-entities: yes
new-blocklevel-tags: cfoutput, cfquery
new-empty-tags: cfelse
new-inline-tags: cfif, cfelse, math, mroot, 
  mrow, mi, mn, mo, msqrt, mfrac, msubsup, munderover,
  munder, mover, mmultiscripts, msup, msub, mtext,
  mprescripts, mtable, mtr, mtd, mth
output-xml: no
quote-ampersand: no
quote-marks: yes
quote-nbsp: yes
show-body-only: no
show-warnings: yes
uppercase-attributes: no
uppercase-tags: no
vertical-space: no
word-2000: yes
wrap: 0

Para una explicación a fondo sobre estos parámetros, consulte la ayuda en línea.

Cómo integrarlo con un editor de texto (gedit)

Ahora veremos cómo configurar esta herramienta para integrarla con un editor de texto común en ambientes GNOME: gedit.

1. Abra el editor gedit y vaya al menú Editar / Preferencias. En esa ventana navegue a la pestaña Complementos y ahí active la casilla Herramientas externas como se ve en el ejemplo:

pantallazo-preferencias_de_gedit2. Presione el botón Configurar el complemento para abrir el Gestor de herramientas externas.

3. En esa ventana presione el botón Nuevo para dar de alta una herramienta externa a la que llamaremos HTML Tidy. Capture los demás datos como se ve en pantalla:

pantallazo-preferencias_de_gedit-gestor_herramientasDe esta manera configuramos gedit para que cada vez que presionemos las teclas Ctrl+t se aplique HTML Tidy sobre el texto en el editor.

Para Windows

Cómo instalarlo

1. Descargue la última versión del archivo ejecutable desde el sitio de HTML Tidy para Windows. El archivo viene comprimido en formato zip.

2. Extraiga el archivo zip y coloque el programa .exe en una carpeta que se encuentre en el PATH. Este programa trabaja en modo de consola.

Cómo usarlo

1. Abra una ventana de comandos.

2. La sintaxis del programa es:

C:\>tidy [-parámetros] archivo.htm

Para una explicación a fondo sobre los parámetros, consulte la ayuda en línea.

Otra opción para usar el programa es mediante una interfaz gráfica como GUITIDY. O bien puede usar un editor de textos libre como Notepad++, el cual recomiendo ampliamente y que tiene incluido el programa html tidy como parte del menú TextFX.

pantallazo-notepadMás información:

One Comment leave one →
  1. noviembre 2, 2013 3:02 pm

    Excelente artículo y manual sobre Tidy … y en Español. La verdad me ha sido de gran ayuda … Gracias ..

Deja un comentario

Por favor, inicia sesión con uno de estos métodos para publicar tu comentario:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: