Tutorial HTML

Todo lo que hace falta saber para estructurar páginas Web en HTML

Para comenzar debo advertir que este será un mega-artículo, donde intentaré explicar con un único tutorial todo el funcionamiento básico del lenguaje HTML, por supuesto no profundizaré en algunos aspectos específicos, pero me centraré en que comprendas la lógica en que se fundamenta este lenguaje, la cual es muy sencilla, así como también en aclarar detalles teóricos y prácticos que quizás puedan pasar por alto muchos de los tutoriales de HTML Básico y manuales de HTML que ya existen en Internet. Aquellos puntos que no se expliquen aquí, serán abordados en otros artículos más específicos que realizaré posteriormente. Recomiendo que si posees algunos conocimientos ya adquiridos o buscas algún punto en específico, utilices el índice o tabla de contenidos ubicada aquí a la derecha para encontrarlo.

Si pretendes formarte como desarrollador de sitios web, el primer paso que debes dar es aprender a crear la estructura interna de una página web y para ello el primer lenguaje que debes estudiar es el HTML. Actualmente este se encuentra en su versión número 5, la cual ha traído consigo toda una revolución en la forma en la que se le emplea y en la que se combina con otras tecnologías, tanto así, que conforma una trilogía casi indivisible junto al lenguaje de maquetación CSS en su versión número 3 y el lenguaje de programación JavaScript, por lo que comúnmente se suele llamar HTML5 no solo a este lenguaje, sino al conjunto que forma con estos otros dos lenguajes.

HTML5 cuenta con grandes avances en comparación con sus versiones anteriores, si bien sigue siendo un lenguaje de marcado de hipertexto, cuenta con variadas capacidades y excelentes características que al ser complementadas por CSS3 y JavaScript, lo convierten en una herramienta fundamental para la construcción de interfaces web acordes a la tecnología actual, en la que se emplean con gran frecuencia dispositivos móviles, pantallas táctiles y archivos multimedia en diferentes formatos.


El trabajo como desarrollador web pasa por el dominio de la estructuración, maquetación y diseño de la interfaz, así como la codificación mediante lenguajes de programación, de acciones que otorguen el dinamismo requerido por sitios y aplicaciones web que satisfagan las exigencias del cibernauta actual, en este tutorial de HTML, como ya he mencionado antes, abordare lo estrictamente referente al uso del lenguaje en la creación de la estructura en que se organiza el contenido de una página web.

Actualmente existen diversas aplicaciones de software que nos permiten diseñar páginas web mediante HTML de forma automatizada, sin necesidad de conocer su codificación, este tipo de entornos se conocen como de tipo WYSIWYG, el término es el acrónimo de la frase en inglés “What You See Is What You Get” que en español significa “lo que ves es lo que obtienes”. Algunos de estos programas son Dreamweaver, Visual Studio, iWeb, Kompozer… pero contar con el conocimiento adecuado sobre cómo se escribe el código, es fundamental para alcanzar un total control en el diseño y desarrollo web.

Sin embargo, creo que no es necesario memorizar exactamente cada una de las etiquetas que constituyen este lenguaje, sino más bien comprender correctamente el modo de emplearlas, aprender la lógica en que se basa el HTML, la cual es bastante sencilla y por lo tanto creo que es posible explicar todo el lenguaje en un único artículo, aunque obviando algunas etiquetas y parámetros que lo constituyen.

¿Qué es HTML?

Debemos saber que no se trata de un lenguaje de programación en la acepción estricta del término, sino de un lenguaje informático para el marcado de hipertexto, es decir un lenguaje de marcas o etiquetas para formatear contenidos web (texto, imágenes, sonido, videos…), su propósito es y ha sido desde su creación, servir como estándar para la definición de documentos que puedan ser compartidos por medio de la World Wide Web, la cual posee arquitectura Cliente-Servidor, haciendo posible que estos sean accedidos por diferentes computadoras conectadas a Internet a modo de clientes, mediante la utilización de un software al que se le conoce como navegador web y que es capaz de interpretar este código.

Es por ello, que a diferencia de los lenguajes de programación compilados (Pascal, C, C++…), el HTML no es traducido a lenguaje máquina y ejecutado por la computadora, sino que es interpretado por los diferentes navegadores de internet (Mozilla Firefox, Google Chrome, Internet Explorer, Safari, Opera…), los cuales se encargan de mostrar el contenido, siguiendo el formato establecido en la codificación estandarizada mediante este lenguaje. Inicialmente los sitios web estaban constituidos casi únicamente por HTML y eran totalmente estáticos, es decir que eran mostrados al visitante sin que este pudiera interactuar con ellos más que por sus enlaces o hipervínculos de forma unidireccional.

En la actualidad con la denominada web 2.0, los sitios de Internet están conformados por documentos interactivos y dinámicos, en los que el usuario interactúa de forma bidireccional con las páginas, ya que en ellas intervienen diferentes tecnologías y lenguajes (HTML, CSS, XML, JavaScript, PHP…), cada uno de ellos con su propósito bien definido. Particularmente el HTML tiene como finalidad, crear la estructura interna en la que se distribuye y organiza el contenido, es también capaz de dar formato al hipertexto, otorgándole propiedades como tamaño y color, sin embargo este último es un trabajo que ha venido siendo trasladado a las funciones que cumple el lenguaje CSS.

Algunas de estas tecnologías como CSS y JavaScript son al igual que HTML, ejecutadas por el cliente, es decir interpretadas por el navegador web en la computadora que accede a la web mediante Internet, por el contrario otras tecnologías adicionales como PHP, Pyhton, Perl o Ruby, que son lenguajes de programación orientados a la web bastante difundidos en Internet, para la creación de aplicaciones web, se ejecutan del lado del servidor, es decir que no son interpretados por el navegador, por lo cual el servidor en que se alojan debe procesarlos y enviar al cliente los resultados ya traducidos a lenguaje HTML, para que estos puedan ser visualizados mediante el navegador web.

Sabiendo esto, podemos entender mejor porque motivo un documento HTML puede ser visualizado mediante un navegador web, sin importar si este documento está ubicado en un servidor de internet o en cualquier carpeta o directorio local de una computadora, en cambio archivos de código en lenguajes como PHP requieren ser almacenados en un directorio especifico de un servidor web, bien sea remoto o local.

En este artículo solo estaremos estudiando HTML, pero es oportuno el momento para dejar claro que no todos los lenguajes informáticos orientados a la web, pueden ser comprendidos por los navegadores de Internet, sino únicamente aquellos que han sido especialmente diseñados para ello y se han convertido en un estándar (HTML, XML, CSS, JavaScript). Otros lenguajes y tecnologías como por ejemplo Java y Flash (ActionScript), requieren parches que se instalan al navegador para que pueda interpretarlas.

¿Qué se necesita para comenzar a trabajar con HTML?

Como mencioné anteriormente existen entornos que permiten diseñar webs visualmente, pero para trabajar con HTML no se requiere obligatoriamente un determinado software en particular, obviamente es necesario contar con un sistema operativo y una aplicación de edición de texto en la cual escribir el código, no obstante es indistinto cuál de ellos sea el que elijamos, en el caso del sistema operativo, bien podemos estar trabajando sobre Windows, Mac OS X, GNU/Linux o cualquier otro, ya que en realidad el software que debe ser compatible con el sistema operativo es el editor de código que utilicemos para realizar la codificación.

Para cada sistema operativo existen distintos editores de texto y específicamente editores de código fuente, algunos a los que se denomina Entornos de Desarrollo Integrados (IDE), son toda una batería de herramientas para el desarrollo, entre ellos están Dreamweaver, Visual Studio, iWeb, Kompozer, Aptana Studio, BlueGriffon…, en otros casos se trata de simples editores mucho más ligeros y sencillos, pero a la vez profesionales, versátiles y potentes, los cuales son mis preferidos y de los ellos recomiendo Sublime Text, Atom y Visual Studio Code.

También es posible crear Páginas Web HTML utilizando simplemente editores de texto plano como el Bloc de notas de Windows, para lo cual solo es necesario guardar el archivo de texto, no con la extensión de archivo comúnmente utilizada por el editor para definir archivos de texto plano (TXT), sino la extensión propia de las páginas web que es HTML o también HTM. Algunas personas aseguran que esta es la forma en que se demuestra mayor dominio del lenguaje, pues al no ser un editor especializado, no otorga facilidades a quienes realizan la codificación, personalmente creo que lo más profesional es utilizar la herramienta adecuada para el trabajo, la que proporcione mayor comodidad y productividad, sin perjudicar la calidad del resultado, por ello recomiendo editores de código fuente especializados y ligeros como Atom.

Como ya he mencionado, no es necesario alojar las paginas HTML en un lugar específico para poder visualizarlas con un navegador web, por supuesto me refiero a visualizarlas en modo local, es decir dentro de una misma computadora, si por el contrario deseamos que cualquier persona conectada a Internet pueda acceder a estas páginas, sin importar si nuestra computadora está conectada a la red o no, tal como sucede con cualquier Sitio Web Online, entonces será necesario poseer un servidor conectado a la red o contratar los servicios de una empresa de Hosting la cual nos ofrezca un Servidor Web para alojar nuestras páginas.

Es igualmente importante mencionar que son dos servicios diferentes, aunque muchas veces se encuentran en un mismo paquete de servicios, el hospedaje o Hosting Web y el nombre o dirección de dominio, que permitirá localizar la página en la red. Estos dominios poseen una terminación que generalmente indica el propósito de las páginas o sitios web, por ejemplo un dominio de extensión .com, el cual es el más popular de todos actualmente, indica que el contenido de las páginas tiene un uso comercial, la terminación .net corresponde a sitios web relacionados con las telecomunicaciones y los dominios .org están destinados a organizaciones, además existen muchas otras extensiones más específicas de las que no comentare más ahora mismo.

Codificación en lenguaje HTML

Comenzando, ahora sí, con el aprendizaje del código HTML, debemos saber que este lenguaje presenta dos posibles sintaxis estandarizadas que podemos emplear, una de ellas es la clásica, a la que se le conoce simplemente como HTML y la segunda es a la que se le denomina XHTML, la cual es más estricta en sus reglas. En términos generales, la sintaxis clásica simplemente es más permisiva, es decir admite infringir o hacer excepciones a algunas reglas, en cambio XHTML es más rigurosa y añade una que otra norma extra. Para especificar que un archivo contiene código XHTML se utilizan la extensión de archivo .xhtml o también .xht, sin embargo para este tutorial no utilizaremos la segunda sintaxis, solo debo recomendar, que siempre cumplamos con las reglas sintácticas, sin importar que no estemos trabajando en un documento expresamente definido como XHTML.

El código básico de una página web, está compuesto en su totalidad por lo que se denomina etiquetas, las cuales no son más que palabras clave ubicadas entre los signos que en matemáticas tienen como significado “menor que” y “mayor que”, y también se conocen como corchetes triangulares o ángulos. Por ejemplo la que se utiliza para delimitar todo el contenido de un documento HTML es la etiqueta <html>.

Las Etiquetas en HTML son simples marcas que conceden una identificación y un formato determinado al hipertexto, el cual no es más que la combinación de texto, enlaces o hipervínculos y archivos multimedia, como documentos, imágenes, videos y sonidos. Cuando hablo de la identificación del hipertexto, me refiero al establecimiento de una especie de rótulos a los diferentes bloques de contenido, que pueden ser posicionados posteriormente en diferentes partes de la interfaz web, mediante el empleo de la maquetación web, esencialmente por medio del lenguaje CSS.

En realidad la mayor parte de las etiquetas conceptuales (por denominarlas de algún modo) están compuestas por dos etiquetas textuales (también para llamarlas de alguna manera), que son la de inicio, tal como acabo de describirla y otra que es la etiqueta de cierre, la cual contiene la misma palabra entre los símbolos <>, pero que en esta ocasión también posee un Slash (/), por lo general antes de la palabra clave, indicando el fin de la acción que ejerce esta etiqueta, por ejemplo </html>.

Algunas etiquetas, dado su propósito particular, solo están constituidas por una única etiqueta que marca el inicio y el fin de la acción que representan, un buen ejemplo de este tipo de etiquetas es <br>, la cual indica un salto de línea y por lo tanto no debe contener nada en su interior, por lo que no es necesario cerrarla, como si es necesario en la etiqueta <html>, la cual contiene todo el código de la página web. Es común que para representar este tipo de etiquetas, se utilice directamente la etiqueta de cierre, es decir la que incluye el slash, sin utilizar la etiqueta de inicio, por ejemplo </br>.

En el espacio comprendido entre la etiqueta de apertura y la de cierre, se coloca el contenido al cual se aplicará la estructura definida por la etiqueta, normalmente se trata de un simple texto y también pueden contener otras etiquetas anidadas, es decir más etiquetas unas dentro del contenido de otras, siempre que sigan un ordenamiento lógico de tipo árbol, donde todas las etiquetas que se inicien dentro de otra, estén también cerradas dentro de ella, no que se inicien dentro de una etiqueta y se cierren fuera.

Por ejemplo, si tenemos la etiqueta <html> y dentro de ella la etiqueta <body> con un pequeño contenido, la estructura correcta será similar a la siguiente:

Se puede notar claramente que la etiqueta <body> la cual esta anidada dentro de la etiqueta <html>, se inicia y finaliza dentro del contenido de la etiqueta <html>, si esto no fuese así y la etiqueta <body> hubiera sido cerrada fuera del contenido de <html>, la estructura estaría mal desarrollada. A continuación te muestro un ejemplo de cómo estaría mal estructurado este contenido:

También es importante mencionar que los márgenes que se suelen colocar al inicio de las líneas de código que se encuentran dentro de una etiqueta, son meramente decorativos o de carácter estético para hacer más agradable visualmente y fácil de comprender el código que estamos escribiendo, sin embargo esto es totalmente irrelevante para el buen funcionamiento del código al ser interpretado por el navegador web.

Un tercer factor que junto con la palabra clave y el contenido, componen la totalidad de una etiqueta en HTML, son los atributos, se trata de propiedades que se pueden configurar modificando los valores que las definen. Por ejemplo la etiqueta <body> que utilizamos en el ejemplo anterior, se emplea para delimitar todo el contenido que será visible en el cuerpo de la página web, el significado en español de la palabra clave “body” es precisamente “cuerpo”, esta etiqueta posee varios atributos que podemos utilizar para configurarla.

Los atributos correspondientes a la etiqueta <body> son los siguientes:

  • Bgcolor establece el color de fondo de la página.
  • Text establece el color del texto de la página.
  • Link establece el color de los enlaces de la página.
  • Alink establece el color del enlace activo.
  • Vlink establece el color de los enlaces que han sido visitados.
  • Background establece un archivo de imagen que se emplea como fondo.
  • Bgproperties establece el desplazamiento vertical del fondo.

Los valores o variables que dan concreción al formato establecido por cada atributo, se colocan regularmente entrecomillados y precedidos por el signo de igualdad, por supuesto a continuación del título del atributo, dentro de la etiqueta a la que pertenecen, en este caso <body> como se puede observar en el código de ejemplo. Para separar un atributo de otro o de la misma palabra clave correspondiente a la etiqueta, se utiliza simplemente un espacio en blanco. Las etiquetas de cierre como </body>, no contienen atributos.

Sabiendo esto, podemos afirmar que conocemos el funcionamiento básico de HTML, obviamente apenas estamos comenzando a comprender sus capacidades, pero todo el funcionamiento de su código, se basa en esa lógica tan simple que te he mostrado hasta ahora. Lo demás consiste en sumar mayor cantidad de etiquetas y atributos, combinándolos para obtener una estructura mucho más completa y funcional, sin embargo todo se reduce a etiquetas, atributos y los contenidos encerrados entre las etiquetas.

Comentarios en HTML

Antes de adentrarnos en mayores profundidades, voy a explicar cómo se crean comentarios en HTML, cuando se escribe código fuente y específicamente en este caso el código de una página web, muchas veces es conveniente dejar mensajes explicativos o informativos dentro de ese código, pero que solo estén dirigidos a los seres humanos que lean ese código (programadores o diseñadores web), no a los navegadores, buscadores o cualquier otro sistema que pueda interpretarlo, a esos mensajes que son ignorados por el software, se les denomina comentarios.

En el lenguaje HTML, un comentario se inicia mediante la colocación de un corchete angular de apertura seguido por un signo de exclamación y luego dos guiones, estos cuatro símbolos consecutivos sin separaciones (<!–), para cerrar el comentario se colocan consecutivamente dos guiones y un corchete triangular de cierre (–>), y por supuesto el texto que se ubique entre ambas combinaciones de signos, constituirá el comentario propiamente dicho.

Colores en HTML

La representación de los colores en HTML puede realizarse de varias formas, una de ellas es la que acabo de emplear, mediante una palabra predefinida o nombre de color, pero esta forma es limitada en cantidad de colores, por lo que suelen emplearse diferentes códigos de color de los cuales el más popular es el conocido como HEX o Forma Abreviada Hexadecimal, compuesto por el carácter numeral (#) seguido por 6 caracteres alfanuméricos o en algunos casos solo tres (3) de ellos, debido a la posibilidad de abreviación que existe cuando se repite un mismo carácter, como por ejemplo el color blanco es representado por #FFFFFF o por #FFF, así como el color negro se expresa con #000000 o #000 en su forma abreviada.

Realmente este formato representa el color indicando en cada par de caracteres, la intensidad de los colores RGB, pero dado que utiliza un rango de dígitos hexadecimal (en base a 16), expresados con el valor mínimo 00 y el valor máximo FF, entonces se le denomina código de colores HEX.

También otro formato bastante común es el que si lleva por nombre RGB, en este se expresa el color mediante tres números en escala de 0 a 255 (1 byte u 8bits) que corresponden a la proporción de Rojo (Red), Verde (Green) y Azul (Blue) presente en el color que se representa, para expresar el código se colocan las letras rgb seguidas de, entre paréntesis, estos tres números separados por comas (,). Por ejemplo el color amarillo en este formato se expresa como rgb(255,255,0) y el gris como rgb(125,125,125). A demás en algunos casos se hace uso de un canal Alfa (transparencia) que determina la opacidad del color y presenta un rango de valores entre cero (0) y uno (1), en este caso se añade la letra A como en el siguiente ejemplo rgba(125,125,125,0.5), donde 0.5 representa una opacidad del 50 por ciento.

Una variante del formato RGB es la que se expresa con porcentajes en vez del rango numérico de 256 valores, en este caso cada color rgb tiene un porcentaje de intensidad, por ejemplo el color morado se expresa como rgb(50%,0%,50%). Este método no es tan utilizado como los anteriores.

Para utilizar cualquiera de esos códigos yo recomiendo recurrir a material de apoyo al momento de requerirlos (para no tener que memorizarlos todos), como puede ser esta lista de colores web o el selector de color que te dejo a continuación, en el cual en su parte derecha puedes obtener diferentes codificaciones para cualquier color que elijas.

Texto en HTML

Etiquetas <H1>, <H2>, <H3>, <H4>, <H5> y <H6>

Estas etiquetas permiten definir títulos o encabezados de texto, los cuales presentan una jerarquía de relevancia expresada por el número que acompaña a la letra H (inicial de la palabra inglesa head), el número menor corresponde a una mayor jerarquía o relevancia del título, también un mayor tamaño de la letra. Se recomienda por razones de SEO utilizar un único H1 por página.

Etiquetas <FONT>

Esta etiqueta se usaba, pues fue eliminada de HTML5, aunque la incluire en esta explicación porque es muy común, específicamente para dar formato a porciones de texto, la etiqueta <Font> contiene la palabra inglesa Font que significa Fuente (letra) y se utiliza para formatear fragmentos de texto o frases, los atributos propios de esta etiqueta son los siguientes:

  • Size establece el tamaño de la fuente, con valores posibles de un rango que va del 1 al 7.
  • Color establece el color del texto.
  • Face establece el tipo de fuente o tipos de fuentes para el texto, ya que pueden indicarse varios tipos como alternativas en caso de que el primero no este soportado por el navegador.

Otras etiquetas para dar formato al texto




  • <p> Indica que el texto corresponde a un párrafo.
  • <b> Texto en negrita.
  • <strong> Texto en negrita.
  • <i> Texto en cursiva.
  • <em> Texto en cursiva.
  • <u> Texto subrayado.
  • <small> Texto más pequeño.
  • <big> Texto más grande (eliminada de HTML5)..
  • <sub> Texto subíndice.
  • <sup> Texto superíndice.
  • <strike> Texto tachado.
  • <s> Texto tachado (eliminada de HTML5).
  • <del> Texto tachado.
  • <center> Para centrar el texto (eliminada de HTML5).

Listas en HTML

Listas no ordenadas: Etiquetas <ul> y <li>

Las listas no ordenadas son aquellas que no tienen numeración, solo un carácter normalmente en forma de punto, al inicio de cada uno de los ítem de la lista. Las listas de este tipo deben estar delimitadas o contenidas por la etiqueta <ul> y su etiqueta de cierre </ul>, mientras que cada ítem de la lista estará encerrado entre las etiquetas <li> y </li>. Es muy común que este tipo de listas se empleen para crear los ítems de un menú y posteriormente, mediante CSS, se modifique la apariencia de la lista.

Listas ordenadas: Etiqueta <ol>

A diferencia de las anteriores, en este tipo de listas se presenta cada ítem numerado, es decir en lugar del punto al inicio de los ítems, se ubica un número en orden ascendente comenzando desde el uno (1). Para crear cada ítem, también se emplea la etiqueta <li> la cual determina el inicio y fin (con </li>) de cada uno de ellos.

Listas de definiciones: Etiquetas <dl>, <dt> y <dd>

En caso de que la lista que necesitamos crear contenga definiciones de términos en cada uno de sus ítems, entonces las etiquetas que deberemos emplear serán <dl>, <dt> y <dd>. La etiqueta <dl> hace referencia al inglés “Definition list” y por supuesto indica que dentro de ella se ubica una lista de definiciones. La etiqueta <dt> corresponde a “Definition term”por lo que tiene como función delimitar el término a definir, es decir que dentro de ella estará el título de la definición. La etiqueta <dd> significa “Definition description” y por ende tiene como propósito delimitar la descripción de la definición.

Enlaces en HTML

Hipervínculos: Etiqueta <a>

Los enlaces, links o hipervínculos son uno de los elementos más característicos e importantes que presenta una página web, ellos hacen posible que el usuario sea capaz de “navegar” entre diferentes páginas web u otros documentos, es decir desplazarse de uno a otro, con tan sola hacer clic sobre el texto o grafico que posee el vínculo. Para crearlos en HTML se utiliza la etiqueta <a>, dentro de ella se establecen los atributos necesarios para definir las características del enlace. Los atributos que posee son:

  • Href que define la URL a la que se establecerá el vínculo.
  • Target que indica el método con el cual se abrirá el documento. Sus posibles valores son: _self para abrir el documento vinculado en la misma ventana, _blank que sirve para indicar al navegador que abra el enlace en una nueva pestaña (o ventana en caso del navegador no contar con pestañas) y por ultimo tanto _parent como _top que ambos abren enlaces que se encuentran dentro de algún iframe, obligando al navegador a crear una nueva ventana y reemplazar la actual.
  • Rel que define el tipo de relación que existe entre ambos documentos vinculados. Admite los valores: alternate, autor, bookmark, external, first, last, next, prev, help, license, nofollow, noreferrer, search, tag.
  • Media este atributo indica para que medio de difusión está destinado el enlace, entre las posibles opciones que admite están: screen, tty, tv, projection, handheld, print, braille, aural y all (el valor por defecto).
  • Hreflang que indica el idioma de la página o documento vinculado.
  • Type que indica el tipo de archivo al cual se está vinculando, los valores utilizados son convenciones o especificaciones como la siguiente: “image/jpeg“.

Imágenes en HTML

Etiqueta <IMG>

La etiqueta <IMG> tiene como propósito incorporar imágenes en la página, las cuales corresponden a archivos gráficos en formatos como JPG, PNG, SVG…. Los atributos que admite esta etiqueta son los siguientes:

  • Width Establece el ancho, en píxeles, que tendrá la imagen.
  • Height Establece el alto que tendrá la imagen.
  • Border Grosor del borde que tendrá la imagen, por defecto es cero (0).
  • Align Permite alinear la imagen horizontal y/o verticalmente mediante los valores: right (derecha), left (izquierda), top (arriba), middle (en medio) y bottom (abajo).
  • Alt permite añadir una descripción de la imagen para los navegadores de sólo texto o como etiqueta emergente (tool tip).
  • Hspace Se usa para añadir espacio vacío horizontalmente.
  • Vspace Se usa para agregar espacio verticalmente.


Estructura de una página web HTML5

Si bien un documento HTML puede contener simplemente texto sin formato, como por ejemplo una única línea en la que solo este escrita la palabra “Hola”, aun cuando este sea un contenido no formateado, se mostrara sin problemas en el navegador web, aunque esa obviamente no es la estructura correcta del código escrito en este lenguaje. Este está diseñado para estructurar páginas web y por lo tanto el deber ser es, respetar una estructura básica en toda página web que se desarrolle.

Etiqueta <!DOCTYPE>

Como primer elemento de esa estructura a respetar, tenemos a la etiqueta <!DOCTYPE>, la cual tiene como finalidad indicar el estándar con el que se ha desarrollado el documento con el que se estará trabajando, de este modo el navegador tendrá total certeza de la versión exacta del lenguaje en el que se presenta el contenido de dicho archivo, evitando que el navegador se vea en la necesidad de utilizar el modo de compatibilidad (Quirks Mode). Esta etiqueta es herencia de otros lenguajes de los que proviene HTML como lo son XML y SGML que utilizan este método para definir el tipo de documento, más allá de la extensión de archivo que posea el fichero.

En versiones anteriores de HTML, esta etiqueta contenía información referente a la versión del lenguaje, idioma y otros elementos, lo cual generaba líneas de código algo complicadas y extrañas. En HTML5 esta etiqueta solo contiene como atributo la palabra “html” lo cual le indica al navegador que el documento contiene código HTML5 para que este procese la información según esta especificación o de no ser posible por incompatibilidades, entonces ignore las características propias de este estándar. La ubicación de esta etiqueta debe ser la primera línea del código sin que sea precedida por ningún otro elemento ni espacio en blanco. No requiere etiqueta de cierre.

<! DOCTYPE html>

Etiqueta <HTML>

Habiendo definido el tipo de documento con el que se está trabajando, lo siguiente será colocar la etiqueta <html>, ya que dentro de ella debe estar ubicado todo el contenido de un documento HTML, tanto el que será visible en la página como el que estará oculto al visitante de la web. Esta etiqueta solo admite un único atributo que es lang, el cual corresponde al idioma en que estará escrito el contenido.

El valor que se debe asignar a este atributo, es un par de letras que representan al idioma que se pretenda emplear, como por ejemplo “es” para el idioma español o “en” para el inglés. A diferencia de la etiqueta que les expliqué anteriormente, <html> si posee una etiqueta de cierre.

Etiqueta <HEAD>

Dentro del contenido de la etiqueta <html> todo se divide en dos grandes secciones, la primera corresponde a la parte de la web que no se muestra directamente dentro de la ventana del navegador, es decir, en este bloque de código, se encuentran elementos que no serán visualizados por el usuario o al menos no se mostrarán en la parte central del navegador web. El segundo bloque es en contraposición, todo lo que se muestra directamente en el espacio destinado por el navegador para mostrar las páginas web.

Al primer bloque o sección, la de elementos no necesariamente visibles, se le delimita con el uso de la etiqueta <head>, la cual contiene a la palabra clave “head” que en español significa Cabeza, al igual que la etiqueta <html>, <head> también presenta su correspondiente etiqueta de cierre </head>, pero en este caso no posee ningún atributo que podamos definir en ella.

Etiqueta <TITLE>

Esta etiqueta permite establecer el título de la página web, el cual generalmente se muestra en la pestaña del navegador en la parte superior no de la web sino del propio programa explorador de internet. Junto a este título muchas veces se muestra también un icono que se conoce como favicon que debe ser definido en el código de la página y que corresponde a un archivo de imagen en formato ICO o PNG.

Etiqueta <META>

Esta etiqueta tiene como función la definición de datos e información que puede ser relevante para los motores de búsqueda de internet como Google, Bing, Yahoo…, no requiere de una etiqueta de cierre y puede emplearse en múltiples ocasiones para indicar diferentes datos, siempre que se ubique dentro de la etiqueta <head>.

Su modo de uso es algo peculiar, pues posee dos atributos muy importantes que son imprescindibles para su correcto funcionamiento, se trata de name (nombre) y content (contenido), estos dos atributos están estrechamente relacionados, por ejemplo si se desea indicar el autor de la web, se debe colocar en el atributo name, el valor “author” y en el atributo content el nombre del autor, de este modo se pueden indicar infinidad de datos a cualquier motor de búsqueda que esté escaneando la web.

Los datos que se pueden definir mediante esta etiqueta no están definidos, por lo tanto se puede emplear cualquier palabra como name y cualquier valor en content, sin embargo lo más común es utilizar datos que generalmente están predefinidos en los buscadores, como por ejemplo autor (autor), description (descripción del contenido de la web) o keywords (palabras clave).

Etiqueta <LINK>

Esta etiqueta permite establecer una vinculación o enlace con un recurso externo al documento, dos de los casos más comunes en los que se utiliza esta etiqueta son la definición del favicon de la web, que es una pequeña imagen que se muestra en la pestaña del navegador junto al título de la web y el establecimiento de hojas de estilos en lenguaje CSS.

Los atributos más importantes de esta etiqueta son rel, el cual permite indicar el tipo de relación que se establecerá con el recurso que se enlazara, type que especifica el tipo de documento que se vinculara y href que permite definir la ruta en que se encuentra el documento a vincular.

Etiqueta <BODY>

La parte de la web que si será visible directamente en el espacio central del navegador web, se la delimita mediante la etiqueta <body>, la palabra clave “body” traducida al español significa Cuerpo, también posee etiqueta de cierre, pero en este caso, como ya dije anteriormente, si podemos definir varios atributos en su etiqueta de inicio.

Etiquetas <SPAN> y <DIV>

Uno de los propósitos más importantes del código HTML actualmente, es la identificación de partes del contenido con la finalidad de poder aplicar estilos CSS a dichas porciones del contenido, como pueden ser color, tamaño y posición entre otras características de diseño, por ejemplo ubicando grupos de párrafos unos al lado de otros, diferentes tamaños y colores de texto para diferentes porciones de contenido e imágenes de fondo distintas para diferentes partes de la web.

La etiqueta <span> tiene como propósito identificar y agrupar pequeñas porciones de contenido o texto, regularmente dentro de un mismo párrafo, por su parte la etiqueta <div> tiene por finalidad la agrupación e identificación de porciones más grandes de contenido, normalmente se trata de varios párrafos contenidos dentro de esta etiqueta, esa es la diferencia entre SPAN y DIV, por lo demás ambas tienen como atributos principales TITLE que simplemente sirve como texto informativo o nombre del elemento, ID que se refiere al identificador, una especie de título para reconocer el contenedor en el código y CLASS que define una clase, de programación, a la que pertenece el contenedor.

Ambas etiquetas soportan otros atributos, pero considero que su utilización requiere un nivel algo más avanzado, por lo que prefiero no profundizar en ello ahora mismo. También debo mencionar que aunque hasta ahora estoy haciendo mención a los atributos ID y CLASS, estos no son exclusivos de este par de etiquetas, por el contrario pueden emplearse en muy diversas etiquetas, tanto las ya mencionadas como las que explicaré próximamente, siempre con la finalidad de identificar elementos en el código y poder aplicarles programación y estilos al elemento identificado específicamente.

Etiquetas semánticas de HTML5

Antes de la aparición de la versión 5 de HTML, siempre que se necesitaba definir e identificar porciones del contenido con un tamaño considerable, se empleaba la etiqueta <div> y se le daba un identificador coherente con el tipo de contenido que agrupaban, ahora HTML5 trajo consigo etiquetas que presentan nombres representativos para las principales partes de una página web. Por lo tanto es recomendable utilizar la etiqueta DIV solo cuando no exista una etiqueta cuyo nombre haga referencia directa a la zona de la web a la que corresponde.

Estructura HTML5

Etiqueta <HEADER>

Como su nombre lo sugiere, esta etiqueta está destinada a almacenar e identificar el contenido que corresponde a la cabecera de la página web. Por lo general contiene una imagen o slider de imágenes, que muestran banners con mensajes promocionales sobre el contenido que se puede encontrar en la web. También en esta parte de la página se suelen ubicar el logo, los botones de redes sociales, quizás pequeños menús secundarios, entre otros elementos. Solo se emplea una zona delimitada por estas etiquetas en una misma página web y su ubicación siempre será en la parte superior.

Etiqueta <NAV>

Por su parte esta etiqueta está diseñada para almacenar el menú de la página, es por ello que suele contener dentro de sí, una lista no ordenada, la cual posteriormente mediante estilos CSS, se modifica su apariencia para convertirla en un menú de navegación, bien sea de orientación horizontal o vertical y pudiendo ubicarse en la parte superior de la web, en un lateral o en alguna otra ubicación que le otorgue el diseñador mediante el código. También pueden existir varias áreas delimitadas por etiquetas de este tipo en una misma página.

Etiqueta <SECTION>

Esta etiqueta suele emplearse para agrupar la zona central de la web, esa que se encuentra debajo del cabezal (header), por encima del pie de página (footer) y entre los menús de navegación y la barra lateral (sidebar o en HTML aside), sin embargo puede presentar diferentes ubicaciones según el diseño de la página. Su contenido es el principal de la web y por lo tanto es común que dentro de esta región, se encuentren los artículos delimitados por las etiquetas <article> aunque esto no es una regla estricta. Por lo general se presenta una única sección de este tipo, aunque podrían existir más de una por página.

Etiqueta <ARTICLE>

Estos son los contenedores semánticos más reducidos, ya que hacen referencia a contenido más específico y al mismo tiempo son los más numerosos pues se utilizan recurrentemente, sobre todo si se trata de una página web perteneciente a un blog. Su propósito es contener porciones de contenido que están estrechamente relacionados o condensados, por ejemplo artículos de noticias, por lo que en una misma página suelen existir varios de estos. Por lo general se ubican en la parte central de la web, entre las etiquetas <section> aunque esto no es una norma definitiva.

Etiqueta <ASIDE>

Igualmente puede considerarse como una zona en la que se agrupan contenidos independientes que bordean el contenido central de la página, como por ejemplo el perfil del autor, calendarios, publicidad, widgets… Su ubicación más común es en la parte derecha de la página, aunque puede ubicarse a la izquierda o incluso en otras regiones de la interfaz, incluso pueden haber más de una zona delimitada por estas etiquetas.

Etiqueta <FOOTER>

Como su nombre lo indica esta etiqueta sirve para delimitar y agrupar los elementos que pertenecen al pie de página, por lo tanto solo existe una región de este tipo por cada página web y se ubica en la parte baja de la página. Dependiendo el diseño puede contener tan solo información sobre los derechos de propiedad del sitio o una serie de widget con contenido de contacto, perfil del autor, entre otros.

Existen otras etiquetas que forman parte del lenguaje HTML, especialmente las etiquetas <table>, <tr>, <td>, para la creación de tablas, <form>, <label>, <input>, <button>, <select>, <option>, <object> … para la creación de formularios, la etiqueta <cambas> para dibujar gráficos y animaciones en combinación con javascript, la etiqueta <style> para incorporar código CSS o la etiqueta <script> para insertar algoritmos en lenguajes como JavaScript, de las cuales estaremos hablando en próximos artículos.

Sin embargo, conociendo la forma en que funciona este lenguaje, con lo que he explicado hasta ahora, creo que es suficiente para que puedas estructurar páginas web y que usando material de apoyo con la descripción de las etiquetas aquí faltantes, como por ejemplo este listado de etiquetas html, es posible afrontar proyectos de estructuración web con total confianza en que si conoces lo explicado aquí, estas en capacidad de realizarlos.

El artículo resultó ser enorme, me gustaría saber tu opinión sobre él, si cumplió con el propósito de explicar el funcionamiento de todo el lenguaje HTML, si crees que fue demasiado extenso, si crees que se quedó mucho contenido sin explicar, cualquiera que sea tu opinión, por favor comunícamela mediante los comentarios, también comparte en las redes sociales si es que te ha parecido un artículo útil para aprender HTML.

Califica este artículo...
[Total: 3 Average: 5]

Autor: Néstor Gómez

Académicamente: Ingeniero de Sistemas y TSU en Informática. Empíricamente: Profesor Universitario, Desarrollador de Software, Webmaster/Blogger, Diseñador Digital, Generalista 3D, Freelancer y Emprendedor Online.