Los lenguajes HTML y XML son lenguajes de marcas, esto quiere decir que se utilizan palabras reservadas para definir marcas que permiten marcar el inicio y final de los elementos que forman un documento.

Por ejemplo, algunas marcas son:

<strong></strong> o bien <p></p>

La marca 'strong' permite definir texto resaltado y la marca 'p' párrafos. Es importante darse cuenta de que existe una marca para abrir (por ejemplo <strong>) y otra para cerrar (por ejemplo </strong>).

Lo que está escrito entre las marcas, es el contenido. Las marcas pueden anidarse (escribirse unas dentro de otras) pero deben abrirse y cerrarse en el orden correcto.

<p>Estas palabras forman un párrafo.</p>
<p>Estas palabras forman un párrafo con <strong>texto en negrita.</strong></p>

Hay algunas marcas que sólo tienen una etiqueta, por ejemplo la marca utilizada para referenciar a una imagen. En HTML es posible utilizar una sóla marca, pero en XHTML debe utilizarse la marca de un modo especial que indica que se abre y se cierra. En XHTML todas las etiquetas se deben abrir y cerrar o bien escribir de este modo abreviado.

En el siguiente ejemplo se indica como poner una imagen tanto en HTML como en XHTML (segunda línea).

<img src="foto.jpg" alt="Una foto">
<img src="foto.jpg" alt="Una foto" />

Si está escribiendo para la web del IES Puig Castellar, debe utilizar la sintáxis de XHTML

Si tiene dudas sobre el código que está escribiendo, puede utilizar un validador para encontrar errores de sintáxis.

Símplemente escriba la URL (dirección) del documento a validar en el formulario, y el validador le mostrará los errores que contiene el documento.

Superar la prueba del validador es la mejor garantía de que su documento se va a ver bien en todas las situaciones.

Los enlaces son fundamentales en los documentos WWW. Gracias a ellos se pueden establecer referéncias entre diferentes documentos para permitir al usuairo moverse entre ellos.

Para crear un enlace, se utilizan las etiquetas <a href=""> y </a> del siguiente modo:

<p>Este párrafo tiene un enlace con <a href="http://www.google.es">Google</a>.</p>
<p>Este párrafo enlaza con la web del <a href="/">Puig</a></p>
<p>Este párrafo enlaza con el <a href="/node/view/46">Dept. Informática</a></p>

Los ejemplos anteriores, tienen el siguiente aspecto en un navegador:

Un enlace tiene dos partes:

1. La etiqueta que el usuario verá marcada como un enlace, es aquella que está delimitada entre la marca <a href=""> y la marca </a>
2. La URL sirve para referenciar al documento con el que se enlaza. Debe escribirse como valor del atributo href="" en la etiqueta que abre el enlace.

Puede observar que en los tres ejemplos, se ha escrito la URL en un formato diferente. El primer ejemplo sirve para enlazar con documentos que están en otro sitio web. El segundo ejemplo, sirve para enlazar con el inicio (raíz) del sitio web en el que estamos. El último ejemplo enlaza con un determinado documento del sitio web en el que estamos. Sólo hay que indicar 'http://maquina.subdominio.dominio' cuando sea distinto del actual.

Puede insertar la imágen en cualquier punto del documento en el que pueda escribir. Por ejemplo, puede insertar una imágen entre las palabras de un párrafo.

<p>Este <img src="enlaces/ficheros/Logo.png" alt="Logo IES Puig Castellar" />
es el Logo del Puig</p>

Lo que en un navegador se vería:

Sobre las imágenes:

1. Sólo tienen una etiqueta, por eso en XHTML hay que escribirlas con /> al final. En HTML no es necesario y se acaban en >
2. El atributo src sirve para indicar la URL del fichero imagen
3. El atributo alt sirve para indicar un texto alternativo a la imagen en navegadores sin soporte de gráficos o bien para los lectores de pantalla que utilizan las personas con deficiencias visuales

Se definen distintos tipos de lista según se trate de información ordenada, no ordenada o bien una lista de definiciones.

La lista ordenada presenta los elementos numerados. Para construir una lista ordenada se utilizan las etiquetas <ol> y </ol>. Los elementos que componen la lista se definen mediante las etiquetas <li> y </li>.

Por ejemplo, la siguiente lista:

<ol>
	<li>Primer elemento</li>
	<li>Segundo elemento</li>
	<li>Tercer elemento</li>
</ol>

En un navegador se vería:

La lista no ordenada muestra los elementos sin numerar. Para construir una lista no ordenada se utilizan las etiquetas <ul> y </ul>. Los elementos que componen la lista se definen mediante las etiquetas <li> y </li>.

Por ejemplo, la siguiente lista:

<ul>
	<li>Primer elemento</li>
	<li>Segundo elemento</li>
	<li>Tercer elemento</li>
</ul>

En un navegador se vería:

La lista de definiciones sirve para presentar términos (o títulos) y la definición (o contenido) de estos. Para construir una lista de definiciones se utilizan las etiquetas <dl> y </dl>. Los elementos que componen la lista están formados por las etiquetas <dt>, </dt> para los términos y <dd>,</dd> para las definiciones.

Por ejemplo, la siguiente lista:

<dl>
	<dt>Primer elemento:</dt>
	<dd>Aquí viene la definición del primer elemento.</dd>
	<dt>Segundo elemento:</dt>
	<dd>Aquí viene la definición del segundo elemento.</dd>
	<dt>Tercer elemento:</dt>
	<dd>Aquí viene la definición del tercer elemento.</dd>
</dl>

En un navegador se vería: