HTML Etisref
Neon(etisref:escrito que contenga información sobre un conjunto de campos en forma de etiqueta)
Que es HTML
Cuando un navegador entra en una página web, pide al servidor un documento con información que va a utilizar para dibujar y dar interacción a los distintos elementos.
Este documento está escrito en HTML (HyperText Markup Language)
Que es una etiqueta HTML
El lenguaje HTML está compuesto por estructuras que se llaman etiquetas que el navegador las interpreta y dependiendo de la etiqueta hace una cosa u otra
Existen muchas etiquetas y cada una se utiliza para contener información y darle un cierto significado a dicha información
La estructura base de una etiqueta sería la siguiente:
<etiqueta>contenido</etiqueta>
En HTML no se puede utilizar cualquier palabra como etiqueta, ya que hay etiquetas específicas que hacen cosas específicas (en el ejemplo anterior «etiqueta» lo pusimos como ejemplo)
La semántica en HTML5
Uno de los principales objetivos de HTML5 es introducir información en un documento HTML5 de forma que sea semántico y no visual. Con esto queremos decir que todos los aspectos visuales deben dejarse para el apartado de presentación, que se gestiona desde el lenguaje CSS.
El HTML5 debe contener la información que va a tener tu web, independientemente del aspecto por defecto que tenga esta («ejemplo por defecto los links son azules») por ello lo que sería la apariencia de la información se debería de hacer desde un lenguaje auxiliar como CSS
Esto es lo que comúnmente se conoce como separación de la presentación del contenido.
Ejemplo de Semántica
Un ejemplo donde se ve claramente esto es con la etiqueta <b> de HTML4 y anteriores. Dicha etiqueta se utilizaba para poner en negrita (bold) un texto específico:
<b>Soy un texto en negrita</b>
En este caso, se está utilizando una propiedad de presentación (visual) en el HTML, algo que no se debe hacer en HTML5. La misión de HTML5 es mantener solo contenido e información semántica en HTML5. Por ello, la forma de hacerlo en HTML5 es la siguiente:
<strong>palabra</strong>
Aquí la etiqueta <strong> a diferencia de <b> tiene una información semántica que el navegador puede usar para posicionar tu web, en este caso strong indica (algo importante) ya desde el CSS se podría cambiar el estilo de la información que contiene la etiqueta
También es importante recalcar que <strong>, la información que guarda tiene un estilo por defecto (La información dentro de <strong> se muestra en negrita) pero esto es para diferenciar visualmente en fases de desarrollo, ya que a diferencia de <b> que tiene ese único objetivo, <strong> Indica algo importante, y ya al final usted podría darle su propio color a la información de <strong>
Con esto desde el CSS podríamos cambiar el estilo (negrita, colores, tipo de letra, etc.) independientemente de la información y contenido que existe en el HTML. Y aun así, el navegador sabría qué información es más importante que otra, aunque usted desde el CSS le ponga el mismo estilo visual
ESTRUCTURA DE UNA ETIQUETA HTML
La estructura de una etiqueta HTML puede tener el siguiente formato:
Estructura básica
Una etiqueta HTML básica se compone de una etiqueta de apertura, su contenido y una etiqueta de cierre
<etiqueta>Contenido</etiqueta>
Como puede ver lo primero que hay que poner es <etiqueta> (en donde etiqueta sería remplazada por el nombre de la etiqueta que le desea poner) luego el contenido que va a tener esa etiqueta (si es que tiene) y la etiqueta de cierre </etiqueta> (que es lo mismo que la etiqueta de apertura solo que se le pone un «/» para indicar el final de esta)
Otro detalle importante es que las etiquetas HTML, se deben poner siempre en minúsculas, aunque si no lo hace el navegador lo permitirá igualmente (esto se hace por temas de legibilidad)
Atributos HTML
En algunas etiquetas HTML, existen algunos atributos específicos (que pueden ser opcionales u obligatorios). Los atributos determinan cierta información sobre la etiqueta (o su modo de actuar) y generalmente van asociados a un valor determinado. Este par atributo-valor se escribe después del nombre de la etiqueta, separándola por espacio y antes del carácter > de la etiqueta de apertura:
<strong id="dato">Contenido</strong>
En este caso, la etiqueta sería <strong>, el atributo id, el valor de id sería dato. Por otro lado, y al igual que las etiquetas, cada atributo tiene una misión y comportamiento concreto.
«Aunque los valores pueden ir rodeados por comillas simples (''), se recomienda escribir el valor siempre entre comillas dobles ("")»
Existen 3 tipos de atributos dependiendo de sus valores:
- Conjunto de valores: Son aquellos atributos en los que solo se permiten unos valores concretos. Cualquier otro valor diferente no será válido.
- Valores libres: Son los atributos en los que puedes especificar un valor libremente, como una dirección URL o un texto, y no existe una serie de valores específicos para escribir.
- Valores Booleanos: Son los atributos que deben tener un valor verdadero (true) o un valor falso (false). En HTML5 un atributo sin valor (solo el atributo) significa verdadero y si se omite el atributo se considera falso.
Ten en cuenta que una etiqueta puede tener varios pares atributo-valor, pero nunca se debe repetir el mismo atributo en una misma etiqueta varias veces, ya que sobreescribiría al anterior.
Contenido de la Etiqueta
Una etiqueta puede contener desde un fragmento de texto hasta un grupo de etiquetas. Esto depende mucho de la etiqueta a utilizar, y se verá más adelante en el apartado de Etisref. Un posible ejemplo sería el siguiente:
<div id="pagina">
<strong>Contenido importante</strong>
</div>
Comentarios HTML
Los comentarios son una práctica muy común y habitual en los desarrolladores o programadores. Se basa en introducir breves fragmentos de texto que el navegador ignora y no tendrá en cuenta a la hora de crear la página visualmente, pero que a nosotros nos sirven de ayuda para documentar algún detalle, explicar algo importante o simplemente introducir algún texto que consideramos relevante:
<!-- Esto es un comentario de ejemplo que el navegador ignorará -->
Como se puede ver, para introducir estos comentarios en el código HTML, basta con escribir los fragmentos de texto <!-- y --> entre el comentario en cuestión que queramos incluir.
Referencias:
Tutorial muy completo sobre HTML:
https://lenguajehtml.com/html/