¿Cómo se escribe en código HTML?

En esta sección veremos los elementos y la forma en la que se debe escribir el código de hipertexto o HTML.

Como ya dijimos, el HTML, o HyperText Markup Language, es un lenguaje de marcado simple y define la estructura de la página web además de su contenido. La idea es que se forman estructuras de árbol con elementos individuales.

Un ejemplo de elemento es:



Como podemos ver, estos elementos tienen un nombre. En el ejemplo es "div", y se colocan entre los signos <> para la apertura y < / > para el cierre. Al medio de la apertura y cierre se encuentra el contenido del elemento que a su vez puede tener otros elementos combinados con el texto, por ejemplo:



Nombres de elementos HTML

El código HTML tiene nombres de elementos específicos para ciertos elementos. La lista completa llega casi a los 150 elementos, pero muchos ya quedaron en desuso o son demasiado modernos para algunos navegadores.

En esta lista te mostramos los más utilizados:

  • 

html Es la etiqueta que engloba a todo el contenido de una página.
  • head Es la etiqueta en la que colocamos los metadatos de una página, por ejemplo, el título y descripción de la misma. Estos elementos, a excepción del título, no son visibles en el navegador.
  • body Es la etiqueta que contiene a todos los elementos visibles de la página. Dentro de esta podemos encontrar:
  • header Es la etiqueta donde colocamos el encabezado de una página.
  • sidebar Es la etiqueta donde colocamos la barra lateral de una página.
  • footer Es la etiqueta donde colocamos el pie pie de página.
  • div Es una etiqueta genérica para cualquier bloque de contenido o texto.
  • h1, h2, h3, h4, h5, h6 Son los encabezados o títulos que van de mayor a menor importancia.
  • p Es la etiqueta de un párrafo.
  • a Es la etiqueta para los enlaces a otra página interna o externa al sitio.
  • strong Es la etiqueta para resaltar un texto en negrillas.
  • em Es la etiqueta para colocar un texto en cursivas.
  • ul Es la etiqueta para una lista no ordenada.
  • ol Es la etiqueta para una lista ordenada.
  • li Es la etiqueta para un elemento de una lista
  • img Es la etiqueta para colocar imágenes.
  • audio Es la etiqueta para colocar archivos de audio.
  • video Es la etiqueta para colocar videos en un sitio.
  • form Es la etiqueta para crear un formulario.
  • input Es la etiqueta para crear elementos de un formulario como una caja de introducción de texto, botón de radio o casillas de verificación.
  • button Es la etiqueta para crear botones en los formularios.

No vale la pena conocer a todos los elementos pues los más usados no pasan de una veintena, el resto se quedan solo como referencias. En todo caso nunca esta por demás revisar la lista oficial de las especificaciones de la W3C.

Atributos de los elementos

Cada elemento, además del nombre y del contenido, puede tener atributos. Estos se escriben en la apertura del elemento, por ejemplo:



Cada atributo tiene un nombre y un valor escrito entre comillas. En el ejemplo anterior vemos que el elemento div tiene los atributos "class" y "id", ambos con valores "titulo_rojo" y "titulo_principal" respectivamente.

Algunos elementos tienen atributos especiales, pero la mayoría comparte los siguientes:

  • id - Es el identificador único de un elemento, en una página no deberían existir dos elementos con el mismo id.
  • class - Es la clase del elemento, sirve para crear grupos de elementos, por ejemplo " los parrafos rojos", o "los enlaces importantes".
  • style - Es un atributo para colocar el estilo visual de un elemento.
  • lang - Es un atributo que define el idioma en el que esta el contenido del elemento.

  • src - Es la fuente desde la cual se debe leer el contenido de un elemento imagen, video o audio.
  • href - Es el atributo para escribir la dirección URL de un enlace

¿Qué sucede si escribo mal mi código HTML?

Muchas veces los desarrolladores web olvidamos cerrar alguna etiqueta, o colocamos etiquetas adyacentes como:

Lo sorprendente es que, en la mayoría de los casos, el sitio web se verá de la misma forma que si estuviera escrito bien. Eso sucede pues estos errores eran bastante comunes en los primeros desarrolladores y los navegadores web logran corregir la mayoría en el momento de mostrar un sitio.

Sin embargo, si los errores son realmente evidentes sucederá que se verá el sitio web se verá mal, probablemente con contenido cortado o inexistente.

66 me gusta
258 vistas
Siguiente Esquema de una página HTML
Programar en HTML y CSS

Programar en HTML y CSS

En esta lista de tutoriales veremos como programar de forma clara y directa en código HTML y CSS que son la base de la web.

¿Cómo se escribe en código HTML?

En esta sección veremos los elementos y la forma en la que se debe escribir el código de hipertexto o HTML.
Tiene video

Esquema de una página HTML

En este artículo veremos el esquema básico de una página en HTML5, la última version de código HTML que existe.

¿Existen reglas para escribir código HTML?

En este artículo analizaremos la forma correcta de escribir en código HTML.

¿Para qué sirve el código CSS?

Aquí veremos para que sirven las hojas de estilo y su uso en los sitios web.

Unidades de medida CSS

En esta sección analizamos todas las unidades de medida que existen en CSS

Propiedades de estilo CSS de bloques

En este artículo vemos las propiedades de estilo que tienen los bloques utilizando una hoja de estilos CSS.

Propiedades CSS para los textos

Aquí veremos como se puede dar estilo a los textos utilizando las propiedades de estilo CSS.

Selectores de estilo CSS

En esta sección vamos a analizar lo básico sobre los selectores de estilo CSS.

¿Qué sucede si no uso estilos CSS en mi página?

En esta sección analizaremos qué es lo que sucede cuando no se utiliza ninguna hoja de estilos CSS en un sitio web.

¿Debería utilizar un framework CSS?

Muchas veces nos preguntamos si vale la pena utilizar un framework como Bootstrap o MaterialUI. En este artículo analizamos la situacion.