En este artículo, conoceremos el encabezado HTML y su implementación a través de los ejemplos. Una etiqueta de encabezado HTML se utiliza para definir los encabezados de una página. Hay seis niveles de encabezados definidos por HTML. Estos 6 elementos de encabezado son h1, h2, h3, h4, h5 y h6; siendo h1 el nivel más alto y h6 el menor.
<h1>se utiliza para el encabezado principal. (El más grande en tamaño)
<h2>se usa para subtítulos
si hay más secciones bajo los subtítulos, se utilizan los elementos <h3>.
<h6> para el encabezado pequeño (el más pequeño).
Los navegadores muestran el contenido de los títulos en diferentes tamaños. El tamaño exacto en el que cada navegador muestra el encabezado puede variar ligeramente. Los usuarios también pueden ajustar el tamaño del texto en su navegador.
Sintaxis:
// the 'h' inside the tag should be in small case only. <h1>Heading1</h1> <h2>Heading2</h2> . . . <h6>Heading6</h6>
Importancia del encabezado:
- Los motores de búsqueda utilizan encabezados para indexar la estructura y organizar el contenido de la página web.
- Los encabezados se utilizan para resaltar temas importantes.
- Aportan información valiosa y nos hablan de la estructura del documento.
Ejemplo 1: Este ejemplo ilustra las etiquetas de encabezado HTML.
HTML
<!DOCTYPE html> <html> <head> <title>Heading Tags</title> </head> <body> <h1>GeeksforGeeks</h1> <h2>GeeksforGeeks</h2> <h3>GeeksforGeeks</h3> <h4>GeeksforGeeks</h4> <h5>GeeksforGeeks</h5> <h6>GeeksforGeeks</h6> </body> </html>
Producción:
Encabezados HTML
Ejemplo 2: este ejemplo explica las diferentes etiquetas de encabezado HTML.
HTML
<!DOCTYPE html> <html> <body> <h1>Welcome to GeeksforGeeks</h1> <h2>A computer science portal for geeks</h2> <h5>Tutorial</h5> <h6>Geeks</h6> </body> </html>
Producción:
Cambiar el tamaño de los encabezados HTML: el tamaño predeterminado de los encabezados HTML se puede cambiar utilizando el atributo de estilo.
Ejemplo: este ejemplo explica las etiquetas de encabezado HTML especificando el tamaño de la fuente.
HTML
<!DOCTYPE html> <html> <body> <h1>H1 Heading</h1> <!-- With the help of Style attribute you can customize the size of the heading, As done below--> <h1 style="font-size: 50px">H1 with new size.</h1> <!-- Here font-size is the property by which we can modify the heading. Here we kept it 50px i.e. 50 pixels --> </body> </html>
Producción:
Estilo de la etiqueta <h1> con diferente tamaño de fuente
Regla horizontal: la etiqueta <hr> que representa la regla horizontal se utiliza para definir una ruptura temática en una página HTML. La etiqueta <hr> es una etiqueta vacía y no requiere ninguna etiqueta final. Básicamente se utiliza para separar contenidos. Consulte el artículo Etiqueta HTML <hr> para obtener información más detallada.
Ejemplo: Este ejemplo explica los encabezados HTML con reglas horizontales.
HTML
<!DOCTYPE html> <html> <body> <h1>Heading 1</h1> <p>I like HTML.</p> <!-- hr Tag is used here--> <hr /> <h2>Heading 2</h2> <p>I like CSS.</p> <!-- hr Tag is used here--> <hr /> <h2>Heading 3</h2> <p>I like Javascript.</p> </body> </html>
Producción:
Encabezado HTML con la línea horizontal
Navegadores compatibles:
- Google Chrome 93.0
- Microsoft Edge 93.0
- Internet Explorer 11.0
- Firefox 92.0
- Ópera 78.0
- Safari 14.1
Publicación traducida automáticamente
Artículo escrito por Shubrodeep Banerjee y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA