44.4 Etiquetas comunes

Etiquetas básicas en el elemento HEAD

Algunas etiquetas comunes en el encabezado son:

  • Meta etiquetas: Estas etiquetas son invisibles para el usuario y proveen información útil para el navegador, como también en los buscadores. Su sintaxis es:
<meta name="" content="">

donde ‘name’ indica el tipo de etiqueta y ‘content’ su contenido: <meta charset="utf-8"> Al especificar esta codificación el navegador interpretará los carácteres especiales, tales como vocales con tilde y eñes, como se desea. <meta name="viewport" content= "width=device-width initial-scale=1.0"> Esta etiqueta indica al navegador cómo manejar las dimensiones de la página en cada dispositivo donde se acceda. “width=device-width” indica que se use el ancho del dispositivo para el despliegue de la página, y “initial-scale=1.0” establece el nivel de zoom inicial.

  • Título
<title> Ejemplo de página 1</title>

Corresponde al título de la página que será desplegado en el marco superior del navegador:

Etiquetas dentro del elemento BODY

Estas etiquetas controlan el contenido visible para el usuario.

  • Etiquetas de encabezados: Se usan para títulos, subtítulos y resaltar temáticas de la página. Van desde h1 hasta h6, donde h1 corresponde a la de mayor tamaño.
<h1> Título </h1>  
<h2> Subtítulo en h2 </h2>  
<h3> Subtítulo de menor tamaño en h3 </h3>  
<h4> Subtítulo de menor tamaño en h4 </h4> 
<h6> Nota escrita en h6 </h6>
  • Párrafo: Los párrafos son útiles para dividir el contenido en bloques.
<p> Era todavía demasiado joven para saber que la memoria del corazón elimina los malos recuerdos y magnifica los buenos, y que gracias a ese artificio logramos sobrellevar el pasado. </p>
  • Negrilla.
<b> Texto en negrilla</b>
  • Salto de línea (no necesita cierre). Si se desea un salto de línea, sin colocar el espacio entre párrafos se puede usar la etiqueta br.
<p> Texto antes del salto de línea <br> ...después del salto de línea </p>
  • Insertar un espacio: colocar más de un espacio requiere el comando &nbsp.
<p> Espacios: 1,&nbsp 2, &nbsp &nbsp3, &nbsp &nbsp &nbsp 4,...</p>
  • Regla horizontal:
<hr>texto

Para más información: https://developer.mozilla.org/es/docs/Web/HTML

44.4.1 Atributos

Los elementos (etiquetas) HTML tienen atributos, estas son palabras que controlan el comportamiento o la apariencia de la etiqueta. Se colocan en la etiqueta de inicio y su sintaxis es

<etiqueta atributo="valor"> Contenido de la etiqueta </etiqueta>.

Ejemplo:

<hr width="50%" align="center">

En esta etiqueta width y align son atributos de la etiqueta hr, y el efecto que produce esta línea es que se mostrará una regla horizontal con una longitud del 50% centrada así:

Algunos atributos son requeridos y otros opcionales. No todos los atributos se pueden usar en todas las etiquetas, aunque algunos atributos funcionan en muchas etiquetas.

Algunos atributos que aplican a un gran número de etiquetas son:

  • id: establece un identificador al elemento.
  • title: Da un título al elemento, en la visualización dicho título se observa al colocar el mouse en el elemento.
  • style: Establece directamente los estilos del elemento.

Más información sobre atributos.