Entendiendo que es HTML y conociendo algunas etiquetas claves
Muchas personas erróneamente consideran a HTML un lenguaje de programación cuando en la realizada no es así. Se trata más bien de un lenguaje de etiquetas que define la estructura y el significado de una página web. En este artículo analizaremos este lenguaje de marcado y algunas etiquetas claves para comprenderlo mejor. De esta manera, sabremos por ejemplo, cómo insertar imagenes en html o las etiquetas más usadas en formularios en html.
Si no es un lenguaje de programación, ¿Qué hace realmente HTML?
Antes de adentrarnos en el mundo de HTML sería correcto explicar un poco el porqué no es un lenguaje de programación como tal. Resulta que con HTML no podemos crear un programa o aplicación como lo haríamos usando por ejemplo: Python, C++, Javascript, Java, etc. Sin embargo, esto no le quita importancia en el mundo de la web pues gracias a su esquema de etiquetas, podemos definir elementos vitales de una página tales como: párrafos, viñetas, encabezados, imágenes, etc.
Supongamos que queremos especificar la oración «la manzana es roja» como un párrafo en una página web. Para ello usamos la etiqueta <p>, luego agregamos la oración y la encerramos con </p>. Como vemos, no estamos programando como tal sino definiendo como se comportarán los contenidos en la página web que estemos creando.
Partes principales de un elemento definido en HTML
Los elementos en HTML se conforman principalmente por:
- Una etiqueta de apertura – en el ejemplo anterior sería la p
- Paréntesis angulares para abrir y cerrar – Con ellos indicaremos a la página donde comienza y finaliza la el efecto de la etiqueta HTML. En el ejemplo, estos son: <p></p>. Es importante señalar que para cerrar una etiqueta HTML se debe usar la barra /
- El contenido – Lo que queremos definir en HTML. En el ejemplo anterior sería la frase «la manzana es roja»:
Hay casos donde no se requieren etiquetas de cierre como lo es al insertar imágenes, ya que lo que deseamos en este caso es que sencillamente aparezca una imagen en particular. En estos casos la estructura de etiquetado sería algo así:
<img src= «imagen.png» alt=»imagen 1″> En esta estructura indicamos a la página donde se ubica la imagen a mostrar (src lo cual significa «Source» o fuente) y el texto alternativo que describe la imagen (alt). Si no se especificara este atributo (alt) el navegador interpretará la imagen como una parte clave del contenido web. En caso de dejarlo vacío, se interpretará que la imagen no es algo clave en la página por lo que un navegador no gráfico podrá omitir dicha imagen.
Algunas etiquetas claves en HTML
A continuación mostramos algunas etiquetas claves usadas en HTML:
Encabezados
Actualmente, con la importancia del SEO en una página web, usar encabezados resulta clave para lograr un buen posicionamiento en los principales motores de búsquedas. En la actualidad existen 6 niveles de encabezados en HTML aunque lo normal es utilizar 3 o 4 a lo mucho. Para definir los encabezados se usan las etiquetas <h> acompañada del nivel a usar.
<h1>Encabezado principal (solo se usa una vez, ya que vendría a ser el título principal del artículo</h1>
<h2>Es el encabezado de nivel superior en un artículo y se puede utilizar muchas veces</h2>
<h3>Serían los subtítulos del h2</h3>
Vínculos
Sin duda se trata de un elemento clave en una página web pues nos permite enlazar un texto o palabra de un contenido a otro dentro de la misma página u otra externa. Para realizar esto debemos usar el atributo a href= el cual significa lo siguiente: a = Anchor y href = hypertext reference. Supongamos que queramos enlazar la palabra windtux a la página principal. Para ello lo hacemos de la siguiente manera:
<a href=»https://www.windtux.com/»>windtux</a>
Hay que tener mucho cuidado al enlazar una página web, pues si esta usa el protocolo https y pusiéramos http, el enlace no funcionaría.
