Tutorial rápido de HTML / XHTML

Este es un pequeño tutorial de HTML (y XHTML) en el que intentaré explicar lo más importante del lenguaje de forma concisa.

HTML son las siglas de HyperText Markup Language (lenguaje de marcado de hipertexto).

La última versión de HTML es HTML 4.01, de Diciembre de 1999, aunque ya existe un borrador de HTML 5, y algunos de los navegadores más populares están empezando a implementar poco a poco parte de este nuevo estándar.

Como su nombre indica, HTML es un lenguaje de marcas, no un lenguaje de programación, es decir, no existe el concepto de variables, condicionales o bucles. Su objetivo no es otro que la creación de documentos, utilizando etiquetas para especificar la estructura y la semántica del contenido (pero NO el aspecto; para esto utilizaremos CSS).

Las etiquetas son palabras o caracteres rodeados por corchetes angulares (el signo menor que, ‘<‘, y mayor que, ‘>’). Un ejemplo de etiqueta sería <em> que se utiliza para marcar un texto como enfatizado. Por defecto los navegadores mostrarían este texto enfatizado en cursiva, a menos que indiquemos otra cosa utilizando CSS. El texto que queremos marcar irá entre la etiqueta de inicio <em> y la etiqueta de cierre </em>.

Hola <em>mundo</em>

HTML: Etiqueta em

Por cada etiqueta de inicio, existe una etiqueta de cierre correspondiente, con una barra oblicua después del signo menor que.

Una etiqueta puede contener, además de texto simple, otras etiquetas. En ese caso hay que tener cuidado con cerrar primero la etiqueta que se abrió en último lugar. En este ejemplo se utiliza la etiqueta <p>, que marca el texto etiquetado como un párrafo, y por lo tanto añade un margen antes y después del texto, combinada con la etiqueta <em>

<p>Hola <em>mundo</em></p>

Además las etiquetas pueden tener atributos con los que especificar distintos aspectos relevantes para su funcionamiento. Para crear un enlace, por ejemplo, se utiliza la etiqueta <a>, de anchor, ancla, y su atributo href. El valor del atributo va después del signo igual (=).

Visita <a href="http://mundogeek.net/">Mundo geek</a>

HTML: Etiqueta a

Para que un documento HTML o XHTML sea válido las etiquetas deben seguir un orden y unas reglas determinadas, dependiendo del tipo del documento. Dentro del estándar HTML 4.01 tenemos 3 tipos de documentos: strict, transitional y frameset.

Frameset incluye todas las etiquetas y atributos del estándar, incluidas las que han sido marcadas como obsoletas, y la etiqueta frameset, para crear frames. Para indicar que un documento debe renderizarse teniendo en cuenta las reglas definidas por este tipo, la primera línea del documento deberá ser:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
  "http://www.w3.org/TR/html4/frameset.dtd">

Transitional incluye todas las etiquetas del anterior, a excepción de la etiqueta frameset. Para utilizar este tipo la primera línea de nuestro archivo HTML deberá consistir en lo siguiente:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">

Strict es, como su nombre indica, el tipo más estricto: no acepta la etiqueta frameset, ni las etiquetas y atributos que han sido marcados como obsoletos. Si vamos a utilizar este tipo la primera línea del documento será:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

El tipo de documento puede tener enormes consecuencias en cómo se visualizará la página. Si no indicamos ningún tipo, o indicamos un tipo muy antiguo, el navegador entraría en lo que se conoce como quirks mode (literalmente, modo rarezas), un modo de renderizado pensado para mantener la compatibilidad con las prácticas y los navegadores antiguos. Los doctypes HTML 4.01 transitional y frameset lanzarían el modo de renderizado «casi-estándar» en la mayoría de los navegadores.

Después de la línea de doctype tendremos una etiqueta <html>, utilizada para marcar el principio y fin del documento. Esta contendrá a su vez una etiqueta <head> (la cabeza del documento) y una etiqueta <body> (el cuerpo del documento). Dentro de la etiqueta <head> podemos hacer cosas como indicar la codificación de caracteres mediante la etiqueta <meta> («simulando» una cabecera HTTP), o el título de la página con la etiqueta <title>, título que se mostrará en la parte superior de la ventana del navegador. Dentro de la etiqueta <body> tendremos el contenido que se mostrará en el navegador.

De esta forma el documento HTML válido más sencillo que podemos encontrar tendría el siguiente aspecto:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <title>Ejemplo</title>
</head>
  
<body><p>Hola Mundo</p></body>
</html>

Documento HTML válido

Para probar este documento HTML basta abrir un editor de texto cualquiera, pegar el código, guardar el archivo con extensión .htm o .html, y abrir el fichero resultante en un navegador web. Para que otras personas pudieran ver este archivo, tendríamos que enviárselo de alguna manera, o subirlo a un servidor. Mundo geek, por ejemplo, está alojado en los servidores de RedCoruna (aunque Mundo geek está escrito en un lenguaje de programación llamado PHP, que permite generar HTML de forma dinámica).

Etiquetas HTML de uso común

Podemos añadir comentarios, entre <!-- y -->

<body>
  <!-- Saludamos -->
  <p>Hola Mundo</p>
</body>

Para asociar una o más hojas de estilo CSS (para definir el aspecto de la página) y un favicon (el icono que se muestra en la barra de direcciones y la pestaña) al documento actual, aunque también tiene otros usos, se utiliza la etiqueta <link>, etiqueta que sólo puede insertarse dentro de <head>. Con el atributo rel se indica el tipo de relación que tiene el documento enlazado con el actual, y con href la dirección en la que se encuentra el documento (que puede ser relativa o absoluta).

<head>
  <link rel="stylesheet" href="estilo.css">
  <link rel="shortcut icon" href="favicon.ico">
</head>

También se puede utilizar el atributo media para usar un recurso u otro dependiendo del medio que utilice el usuario. En el siguiente código, por ejemplo, utilizamos una hoja de estilo u otra dependiendo de si el usuario está viendo la página en una pantalla de ordenador (screen) o de si está viendo la vista previa antes de la impresión (print)

<head>
  <link rel="stylesheet" media="screen" href="estilo.css">
  <link rel="stylesheet" media="print" href="imprimir.css">
</head>

También podemos ofrecer al usuario varias hojas de estilo alternativas, teniendo una etiqueta <link> con rel="stylesheet" y otras con rel="alternate stylesheet". En las etiquetas de cada una de las hojas de estilo alternativas añadiremos un atributo title con el nombre tal y como queramos que aparezca en el navegador del usuario.

<head>
  <link rel="stylesheet" media="screen" href="estilo.css">
  <link rel="alternate stylesheet" media="screen" href="estilo-oscuro.css" title="Oscuro">
</head>

Para incluir un script (en JavaScript u otro lenguaje) se utiliza, cómo no, la etiqueta <script>.

<body><script type="text/javascript">alert('Hola mundo');</script></body>

HTML: Etiqueta script

Lo normal es escribir el código del script en un archivo externo e importarlo mediante el atributo src

<head>
  <script type="text/javascript" src="script.js">
</head>

Si queremos mostrar un cierto contenido sólo a los usuarios que tengan la ejecución de scripts desactivada, por ejemplo para informarles de la maravillosa funcionalidad que se están perdiendo, se puede utilizar la etiqueta <noscript>

<body>
  <script type="text/javascript">alert(new Date());</script>
  <noscript>Activa JavaScript para ver la fecha</noscript>
</body>

Para definir metadatos acerca del documento se utiliza la etiqueta <meta>, etiqueta que ya utilizamos anteriormente para especificar la codificación de caracteres que utilizaba nuestro archivo. Algunos usos que se le pueden dar a esta etiqueta son especificar una descripción del contenido de la página:

<meta name="description" content="Tutorial de HTML y XHTML">

o palabras clave que describan la página:

<meta name="keywords" content="tutorial, html, xhtml">

Para dividir la página en secciones se utiliza la etiqueta <div>. Esta etiqueta es la base de la maquetación utilizando CSS, aunque el siguiente ejemplo, al no utilizar ningún estilo, no resultará demasiado impresionante:

<div id="menu">
  <a href="http://mundogeek.net/">Inicio</a>
  <a href="http://mundogeek.net/contacto/">Contacto</a>
</div>

<div id="contenido">Hola mundo</div>

HTML: Etiqueta div

Las cabeceras o títulos se indican con las etiquetas <h1>, <h2>, <h3>, <h4>, <h5> y <h6>. Estas etiquetas son especialmente útiles para el SEO (Search Engine Optimization, u optimización para buscadores)

<h1>Título</h1>
<h2>Subtítulo</h2>
<h3>Sub-subtítulo</h3>

HTML: Etiquetas h1, h2 y h3

Para insertar saltos de línea se utiliza <br> (como vemos existen etiquetas en HTML que no necesitan ser cerradas; no así en XHTML, del que hablaremos más tarde)

<p>Primera línea<br>
Segunda línea<br><br>
Cuarta línea</p>

HTML: Etiqueta br

Para marcar un bloque de texto como una cita se utiliza <blockquote>. Esto hará, por defecto, que el bloque de texto tenga un cierto margen izquierdo.

<p>Y entonces él dijo:</p>
<blockquote><p>Le haré una oferta que no podrá rechazar</p></blockquote>

HTML: Etiqueta blockquote

Para marcar un texto como una cita inline se utiliza la etiqueta <q>. Por defecto esto hará, simplemente, que el texto aparezca entrecomillado.

<p>Y entonces él dijo... <q>¡Vamos a aprender HTML!</q></p>

HTML: Etiqueta q

Para marcar un texto como código fuente se utiliza <code>. Por defecto esto mostrará el texto con una fuente monoespacio.

<p><code>foreach($mensajes as $mensaje)
  echo $mensaje;
</code></p>

HTML: Etiqueta code

<code> se suele utilizar en conjunción con <pre>, que hace que se tengan en cuenta los espacios en blanco, tabuladores y retornos de carro del texto que encierra

<pre><code>foreach($mensajes as $mensaje)
  echo $mensaje;
</code></pre>

HTML: Etiquetas code y pre

Para dar el significado de una abreviatura:

<abbr title="HyperText Markup Language">HTML</abbr>

HTML: Etiqueta abbr

Para indicar que una palabra o frase es especialmente importante (más que el texto marcado con <em>) se utiliza la etiqueta <strong>. Esto se traducirá, por defecto, en que el texto etiquetado se verá en negrita.

<strong>HTML</strong> es un lenguaje de marcado

HTML: Etiqueta strong

Para mostrar una imagen se utiliza <img>. Es conveniente dar una descripción alternativa a la imagen para los invidentes y los navegadores que no muestren imágenes utilizando el atributo alt

<img src="imagenes/berners-lee.jpg" alt="Tim Berners-Lee, uno de los creadores de HTML">

Para crear listas se utiliza la etiqueta <ul> (de unordered list, o lista no ordenada). Cada elemento irá dentro de una etiqueta <li>

<ul>
  <li>Lunes</li>
  <li>Martes</li>
  <li>Miércoles</li>
</ul>

HTML: Etiqueta ul

También se pueden crear listas ordenadas con <ol>, lo que hará que cada entrada de la lista venga precedida por un número (o una letra, un número romano… si así se especifica en la hoja de estilo) en lugar de una viñeta, como ocurriría con <ul>:

<ol>
  <li>Lunes</li>
  <li>Martes</li>
  <li>Miércoles</li>
</ol>

HTML: Etiqueta ol

Para crear tablas se utiliza la etiqueta <table>. Dentro de esta tendremos una etiqueta <tr> (de table row) por cada fila, y a su vez, dentro de <tr>, una o más etiquetas <td>, para celdas de datos, o <th>, para celdas de la cabecera.

<table>
  <tr>
    <th>Lenguaje</th>
    <th>Año</th>
  </tr>
  <tr>
    <td>HTML</td>
    <td>1991</td>
  </tr>
  <tr>
    <td>CSS</td>
    <td>1996</td>
  </tr>
  <tr>
    <td>XHTML</td>
    <td>2000</td>
  </tr>
</table>

HTML: Etiqueta table

Entidades de caracteres HTML

Para evitar problemas con la codificación de caracteres podemos utilizar las llamadas entidades de carácter en sustitución de los caracteres que no pertenezcan a ASCII, como vocales acentuadas o la ñ.

Entidad Carácter
&amp; &
&lt; <
&gt; >
&Aacute; Á
&Eacute; É
&Iacute; Í
&Oacute; Ó
&Uacute; Ú
&aacute; á
&eacute; é
&iacute; í
&oacute; ó
&uacute; ú
&ntilde; ñ
&euro;

XHTML

XHTML son las siglas de eXtensible Hypertext Markup Language (lenguaje extensible de marcado de hipertexto). Se trata de una versión algo más estricta de HTML basada en XML. La última versión de este estándar es la 1.1, de Mayo de 2001.

Para que un documento XHTML sea válido:

  • Todas las etiquetas deben estar cerradas. Para elementos vacíos, como <br> se puede cerrar la etiqueta añadiendo una barra invertida antes del signo de mayor que (<br/>)
  • Todas las etiquetas y atributos deben ir en minúsculas
  • Los valores de los atributos deben ir entre comillas

El doctype para XHTML 1.1 será:

<!DOCTYPE
 html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Además la etiqueta <html> debe tener un atributo xmlns indicando el espacio de nombres. Un ejemplo de documento XHTML válido sería, entonces:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
  <title>Ejemplo</title>
</head>

<body><p>Hola Mundo</p></body>
</html>


62 pensamientos en “Tutorial rápido de HTML / XHTML”

  1. Excelente, el empujon necesario para aprender algo nuevo(ni bien termine de leer paython para todos(: ). Espero que sigas poniendo tutoriales, son uno mejor que otro.

      1. Ya. Si escribes HTML en los comentarios, WordPress lo mostrará como HTML. A menos que se trate de etiquetas no admitidas, en cuyo caso las obviará simplemente. Puedes usar &lt; y &gt; en lugar de < y > si quieres que se vea el código. Te lo edito.

  2. Por cierto, yo soy el primero que hace cosas que no se deberían hacer, como en esta misma entrada, usar el atributo border de la etiqueta table.

    Pero ya se sabe… Haz lo que yo diga y no lo que yo haga

  3. Pingback: Tutorial rápido de HTML

  4. Pingback: Tutorial rápido de HTML y XHTML « SomosGeeks

  5. Excelente yo estoy aprendiendo algo de html para mi blog y esto es muy útil,me gustaría que siguieras con este tipo de tutoriales,pero seria bueno que mostraras como queda cuando modificas algo,digamos si le pones una etiqueta como se vería aplicada ya en la pagina web.

    1. Depende de a quién se lo preguntes. En realidad no importa mucho, y nunca se pondrán de acuerdo.

      Yo siempre cierro todas las etiquetas, escribo en minúsculas las etiquetas y los atributos, y encierro los valores de los atributos entre comillas, así que…

  6. Justo yo estoy en estos días preparando un tutorial de HTML (que verá la luz próximamente en mi blog) y, ante la duda, he terminado decantándome por explicar tomando como base el HTML 5. Claro, algunas cosas se hacen más complicadas: hay unas cuentas etiquetas populares como el subrayado y el tachado que ahora son «deprecated» (¿lo escribí bien?) y toca tirar de CSS aunque sea metiéndolo dentro del código de la página con style.
    Pero, dejando aparte todas esas posibilidades de las que todo el mundo habla, un pequeño detalle me llamó la atención: lo del doctype. Ahora, simplemente es , sin tanto rollo.
    Y hablando de rollo, ya he metido bastante. Felicitaciones por tutorial. Muy interesante y completo para dar los primeros pasos. A ver si lo enlazo por ahí.

    1. Para tachado se puede usar la etiquta del, y para subrayar (si es como sustitución de lo tachado) ins. Claro, es tontería usar una span con clases.

      Por cierto, si tachas con del en vez de con s, IE te pone el tachado un poco más bajo para hacerlo más difícil de leer (con mala intención).

  7. Felicidades por el tutorial, me ha venido al pelo, porque estaba haciendo una pequeña pagina web y no me acordaba de los codigos de los carcteres no estandar

  8. Gran tutorial zootropo!, una pregunta que espero que no caiga en el offtopic pero estoy buscando mucho eso y seguro me comprenderás: ¿qué plugin usas para mostrar el código?, yo usaba el wp-syntax pero le faltan opciones (como la de mostrar el texto plano pulsando un botón) y solo admite html estricto y no el transicional. Te agradecería mucho si me ayudas en eso.

  9. A todo esto, nadie ha comentado que el mime de XHTML es application/xhtml+xml, y no text/html. Porque si lo sirves como HTML, pierdes el valor de los avisos estrictos, los namespaces, y todas las ventajas del XML.

  10. Pingback: Tutorial rápido de CSS

  11. Pingback: Tutorial rápido de HTML / XHTML « El Blog de JUARAMIR

  12. muy buen tutorial, les felicito..!!

    QUisiera preguntarles, cómo se pone el texto en forma de Aorcoiris, quisiera saber la etiqueta para hacer eso!!

    Saludos!

  13. Hola
    Estoy usando Aptana Studio para hacer un sitio web
    y estoy usando xhtml
    pero en Aptana cuando valida el codigo

    me dice que el input esta en mal locacion

    buscando con google econtre que despues del
    debe haber un o un

    ¿porqué?

  14. muchas gracias muy didactico ..
    puntual preciso….y los ejemplos
    y todo gracias por tomarte el tiempo
    de hacer un buen tutorial..Gracias!!

  15. Pingback: >ARR # 2: Tutorial rápido de HTML / XHTML

  16. Pingback: Doom en tu navegador

  17. With the 32 markets that this PS4 does launch within by the end of
    2013, House said Sony could provide a solid supply for consumers during the entire holiday season.

    It also supports high definition audio including Dolby True – HD
    and DTS-HD Master Audio. This is how NCAA football
    roster providers are available in handy. Intrapreneurship may be successfully used by corporations, partnerships,
    and non-profit firms inside US, Europe, Asia, and Africa.

  18. Since the recording and audio content streams online, it won’t actually download into
    one big file which can be copied and moved around. A Play
    – Station network card, lets you buy products and items from online retailers of Play –
    Station that you could freely use in case you have a PSN Code Generator card.
    However, most users just like the Invisible Speakers
    that are also unique to others within the line. You have to be prepared to put a bit of effort so that you can locate a retailer who can give you the best PS4 deals as well as early delivery.

  19. Step One: Acquiring Themes You have two ways to obtain a
    XMB theme for the Playstation 3: either create one or find one.
    Inform your doctor if you suffer from conditions such
    as gall bladder disorders or chronic malabsorption syndrome.

    Chock-full Games Available created Download: On create day of
    your portable you will dsicover 25 games obtainable
    about launch evening and greater one in development.

  20. Have you ever thought about including a little bit more than just your articles?

    I mean, what you say is important and all. But
    think about if you added some great photos or video clips to give your posts more, «pop»!
    Your content is excellent but with images and video clips, this website could certainly be one of the greatest in its niche.

    Good blog!

  21. It’s the best time to make some plans for the future and it’s time to be happy.

    I have read this post and if I could I want to suggest you
    some interesting things or tips. Maybe you can write next articles referring to this article.
    I wish to read even more things about it!

  22. Websites that offers such products can give you pictures and details about chandelier, so it would be easier for you to choose the right one for your home.. Choosing small chandelier can produce insufficient light for the room while the huge ones can make the room over exposed with the light.. Chandelier is best illuminations solutions which can provide light based avenues which can sustain the idiosyncrasies of providing illumination in a better predomination..

  23. Buen tutorial, sencillo y bien explicado. Se presentan las etiquetas básicas de html y de XHTML, sería muy interesante si continuara con CSS y Javascript o quiza con las nuevas etiquetas de html5.

  24. Pingback: Chuck Norris es un color (en HTML)

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.