HTML: Etiquetas más utilizadas
Párrafos y saltos de linea
Un párrafo es una oración o un conjunto de oraciones que abordan un mismo tema. En HTML, todo lo que esté contenido entre las etiquetas <p> y </p> se presentará separado por un espacio vertical con respecto al párrafo siguiente. Dentro de un párrafo, también es posible insertar saltos de línea utilizando la etiqueta <br>.
<p>
Este es el primer párrafo de nuestra página. Aquí podemos escribir varias oraciones sobre un tema específico. Los
párrafos nos ayudan a organizar el texto de manera que sea más legible.
<br>
Podemos agregar saltos de línea dentro del párrafo si es necesario para mejorar la legibilidad o para separar ideas.
</p>
<p>
Este es el segundo párrafo, que aparece con un espacio vertical respecto al primer párrafo. Los párrafos se utilizan
para dividir el contenido en secciones claramente diferenciadas.
</p>
En esta página HTML, tenemos dos párrafos. Cuando el navegador interpreta la página, separa el contenido de los dos párrafos con un espacio horizontal. Además, el primer párrafo contiene varios saltos de línea. Agrupar el texto en párrafos ayuda a organizar mejor el contenido y a darle mayor coherencia. Cuando se modifica el tamaño de la ventana del navegador, los párrafos se ajustan automáticamente al ancho disponible. Para recordar el nombre de este elemento HTML:
<p> proviene de la palabra "paragraph".
No es recomendable usar únicamente la etiqueta <br> para dar formato a un texto. En su lugar, deberíamos utilizar párrafos y, si es necesario, insertar saltos de línea dentro de ellos. Para forzar un salto de línea en el navegador, usamos el elemento HTML <br>. Este elemento hace que el texto continúe en la siguiente línea y no necesita una etiqueta de cierre. Puedes colocar <br> en la misma línea que el texto o en la siguiente; ambos métodos son válidos. El nombre <br> proviene de la palabra en inglés "break".
Encabezados
En HTML, los elementos para definir títulos son fundamentales para estructurar el contenido de una página. Los elementos que utilizamos para esto son:
<h1> <h2> <h3> <h4> <h5> <h6>
El elemento <h1> representa el título de mayor nivel, el cual generalmente se muestra con una fuente de mayor tamaño. Más adelante, aprenderás cómo puedes modificar el tamaño de la fuente, así como otros estilos, utilizando CSS. Es importante elegir el nivel de título adecuado según la importancia y jerarquía del contenido. Todos los elementos de título requieren una etiqueta de cierre, como hemos visto con otros elementos HTML. Los motores de búsqueda, como Google, Bing y Yahoo, utilizan los títulos para identificar el tema principal de cada página web. Por ello, es crucial no confundir los títulos que se definen con las etiquetas <h1>, <h2>, etc., con el título de la página que se especifica en la sección <head> del HTML. A continuación, vamos a crear una página de ejemplo con un título de primer nivel (<h1>) y dos títulos de segundo nivel (<h2>). Cada título de segundo nivel estará acompañado de un párrafo descriptivo.
<h1>Matrix</h1>
<h2>Introducción</h2>
<p>
"Matrix" es una saga de ciencia ficción que comienza con una película de 1999 dirigida por las Hermanas
Wachowski.<br> La historia sigue a Thomas Anderson, un programador y hacker conocido como Neo, quien descubre
que su realidad
es una simulación creada por máquinas.
</p>
<h2>El Mundo de la Matrix</h2>
<p>
En este universo, las máquinas han dominado el mundo y utilizan la simulación para mantener a los humanos bajo
control mientras extraen su energía.<br> Neo es contactado por rebeldes que le revelan la verdad y creen que él
es "El Elegido" destinado a liberar a la
humanidad.
</p>
<h2>Impacto y Temáticas</h2>
<p>
La saga explora temas profundos como la realidad y la libertad,<br> y es conocida por su innovadora mezcla de
filosofía, acción y efectos especiales.<br> Ha tenido un impacto significativo en la cultura popular y ha dado
lugar a secuelas y otros medios relacionados.
</p>Recuerda que HTML no define el tamaño de las fuentes. El navegador determina el tamaño de la fuente para cada nivel de título, siendo <h1> el de mayor tamaño. La etiqueta <h1> proviene de la palabra inglesa "heading", que significa "título".
Énfasis
Enfatizar algo significa destacarlo, como una palabra o un grupo de palabras. En HTML, usamos <strong> tiene más énfasis y suele mostrarse en negrita y <em> se usa para un énfasis menor, a menudo en cursiva.
<p>
<strong>Tipos de datos</strong>
</p>
<p>
<em>TEXTO</em>: Se almacenan en cadenas entre comillas simples. Ejemplos: varchar, char, text.
</p>
<p>
<em>NÚMEROS</em>: Se usan para valores enteros y decimales. Ejemplos: integer, float, decimal.
</p>
<p>
<em>FECHAS Y HORAS</em>: Se almacenan con date, datetime, time, year y timestamp.
</p>En los navegadores, <strong> se muestra en negrita y <em> en cursiva. Estos elementos no crean saltos de línea como los títulos (<h1>, <h2>, etc.). Recuerda que <em> viene de "emphasis" (énfasis) y <strong> significa "fuerte".