Sintaxis del HTML

Descripción de la sintaxis con la que se trabaja en el lenguaje HTML, así como la estructura que tendrá el documento básico HTML.

El HTML es un "lenguaje de marcado". Basa su sintaxis en un elemento base al que llamamos marca, tag o simplemente etiqueta. A través de las etiquetas vamos definiendo los elementos del documento, como enlaces, párrafos, imágenes, etc. Así pues, un documento HTML estará constituido por texto y un conjunto de etiquetas para definir la función que juega cada contenido dentro de la página. Todo eso servirá al navegador para saber cómo se tendrá que presentar el texto y otros elementos en la página.

Existen etiquetas para crear negritas, párrafos, imágenes, tablas, listas, enlaces, etc. Así pues, aprender HTML es básicamente aprenderse una serie de etiquetas, sus funciones, sus usos y saber un poco sobre cómo debe de construirse un documento básico. Es una tarea muy sencilla de afrontar, al alcance de cualquier personas, puesto que el lenguaje es muy entendible por los seres humanos.

Anatomía de una etiqueta HTML

La etiqueta presenta frecuentemente dos partes, su apertura y cierre, y se encierran ambas partes entre símbolos "menor que" y "mayor que". Lo veremos a continuación.

Apertura

El inicio de una etiqueta se produce de la siguiente manera:

<etiqueta>

Cierre

El final de una etiqueta se produce de manera similar a su apertura, aunque agregando una barra:

</etiqueta>
Nota: Por razones de formato del texto, en DesarrolloWeb.com, cuando no estamos escribiendo un código y queremos referirnos a una etiqueta la escribimos con mayúsculas. Los códigos se diferencian fácilmente porque tienen su estilo particular. Donde escribimos las etiquetas sin los mayores y menores que y con mayúsculas es en los párrafos del texto.

Todo lo incluido en el interior de esa etiqueta sufrirá las modificaciones que caracterizan a esta etiqueta. Así por ejemplo:

La etiqueta B define un texto en negrita. Si en nuestro documento HTML escribimos una frase con el siguiente código:

<b>Esto esta en negrita</b>

Veremos que las palabras "Esto esta en negrita" aparecen en negrita. Es así de simple.

Otro ejemplo rápido. La etiqueta P define un párrafo. Si en nuestro documento HTML escribimos:

<p>Hola, estamos en el párrafo 1</p> 
<p>Ahora hemos cambiado de párrafo</p>

Como resultado obtendríamos dos párrafos con esos textos. En HTML los párrafos están separados por un doble salto de línea. Se verían más o menos de esta manera:

Partes de un documento HTML

Además de todo esto, un documento HTML ha de estar delimitado por la etiqueta HTML. Dentro de este documento, podemos asimismo distinguir dos partes principales:

La cabecera, delimitada por la etiqueta HEAD, donde colocaremos etiquetas de índole informativo, como por ejemplo el titulo de nuestra página. El contenido de la cabecera no suele aparecer en el cuerpo de la página, pero sirve a los navegadores y otros sistemas para encontrar información útil para entender y procesar el documento.

El cuerpo, flanqueado por la etiqueta BODY, que será donde colocaremos nuestro texto e imágenes delimitados a su vez por otras etiquetas como las que hemos visto.

El resultado de un documento básico tiene la siguiente estructura:

<html>
<head>
  <title>Mi documento básico</title>
</head>
<body>

  <p>Este es el cuerpo de mi primera página HTML</p>
  <p>Este segundo párrafo también forma parte del cuerpo</p>

</body>
</html>

Nota: A este documento básico le faltan todavía algunas cosas importantes que no queremos que nunca se te olviden. Sin embargo hablaremos de ellas en el siguiente artículo, dedicado a la página HTML básica.

Las mayúsculas o minúsculas son indiferentes al escribir etiquetas

En HTML las mayúsculas y minúsculas son indiferentes. Quiere decir que las etiquetas pueden ser escritas con cualquier tipo de combinación de mayúsculas y minúsculas. Resulta sin embargo aconsejable acostumbrarse a escribirlas en minúscula ya que otras tecnologías que pueden convivir con nuestro HTML (XML por ejemplo) no son tan permisivas y nunca viene mal hacernos a las buenas costumbres desde el principio, para evitar fallos triviales en un futuro.

Saltos de línea en HTML

Otra de las cosas importantes de conocer sobre la sintaxis básica del HTML es que los saltos de línea no importan a la hora de interpretar una página. Un salto de línea será simplemente interpretado como un separador de palabras, un espacio en blanco. Es por ello que para separar líneas necesitamos usar la etiqueta de párrafo comentada antes, o la etiqueta BR que significa un salto de línea simple.

Esto es una línea
<br>
Esto es otra línea
Ahora, aunque estoy escribiendo aparentemente en otra línea, no se verá el salto de línea porque no lo he separado por el BR (o P, o cualquier otra etiqueta que produzca el salto de línea
Nota: La etiqueta BR no tiene su correspondiente cierre. Es un detalle que quizás te haya llamado la atención. Volveremos sobre ello más adelante.

Es un detalle que choca al principio de usar HTML, pero al que te acabas acostumbrando con rapidez. Iremos viendo ejemplos a lo largo de todo el Manual de HTML, por lo que no debes preocuparte por ahora, sólo seguir leyendo.

Autor

Rubén Alvarez

Rubén es doctor en química y programador aficionado con experiencia en PHP.

Compartir

Comentarios

Andrea

30/6/2007
Muchas Gracias!!
no se nada de programacion y con su articulo estoy empezando a entender..muy claro el contenido.

giovannipumas

11/7/2009
XHTML
creo que deerian hablar más del XHTML que se convertirá en el estándar de las páginas, y ahí las etiquetas son con minúsculas.

Por cierto recomiendo mucho el Notepad++ ya que tiene sintexis para la mayoría de los lenguajes de programación y html no podría faltar, me ha servido mucho para aprender.

gif

25/7/2010
Sintacis de html (resumen)
Bueno yo resumiria que para comenzar a desarrollar en html es importante tener claro las especificaciones del programa por ejemplo todo pagina comienza con
<html> indistintamente si es mayuscula o minuscula y cierra con </html>
<head> cierra </html>
cuerpo <body> cierra </body>
parrrafo <p> cierra parrafo </P>
todos estos ejemplos pueden escribirse indistintamente en mayusculas o minusculas sin envargo es recomendable escribir todo en minusculas ya que mas adelante utilizaremos lenguajes con una sintaxis parecida pero que no toleran errores de este tipo

henry garavito avila

10/10/2010
aprendiendo html
vamos a conocer como se rraliza esto, para poder crear paginas web.

angelosigasm

11/1/2011
Sencillo
Agradesco permitirme entender desde un nivel basico.

joan

20/3/2011
no entiendo...
esta muy bien detallado el articulo pero aun asi no logro entenderrlo muy claramente..alguien me podria ayudar un poco mas?
tengo que entregar un trabajo,y tengo dificultades a la hora de comprender,para que haga mi pagina!!!por favor...graciasss!!!!

Mayte :D

01/3/2012
la verdad
PLATA ES MACHORRA :P

luis

03/9/2013
como abro el editor de texto???
donde encuentro o como abro el editor de texto?

wilson

11/2/2014
gracias
muy buena la inducción y bien explicado, espero sigas en ese ámbito.

Oscar

29/5/2014
parametros
Me podrían informar por favor la función de este elemento <dd> en una página Web ?

Muchas gracias