El lenguaje de marcado de hipertexto (HTML) es el componente básico de las páginas web que les define una estructura. Los navegadores utilizan este lenguaje de marcado para manipular datos como texto, imágenes y otro contenido para que puedan mostrarse en el formato requerido. Hipertexto se refiere a los enlaces que conectan las páginas web y el marcado define el documento de texto dentro de las etiquetas.
Agregue subtítulos usando HTML: la forma más frecuente de agregar subtítulos en HTML es usando solo encabezados HTML o usando encabezados HTML y div HTML. Exploremos ambas formas de agregar subtítulos.
Adición de subtítulos mediante encabezados HTML: la etiqueta de encabezado HTML (<h1>, <h2> . . . .<h6>) define el encabezado de una página. Hay seis niveles de encabezado definidos que son h1, h2, h3, h4, h5 y h6. En estos, h1 es el nivel más alto y h6 es el encabezado de nivel más bajo.
Los encabezados son utilizados por los motores de búsqueda para indexar la estructura y el contenido de su página web.
El nivel del encabezado se define en función de la importancia de un encabezado. Así que tome cualquier etiqueta de encabezado de dos niveles, digamos h1 y h2. El más importante es nuestro encabezado principal, por lo que estará dentro de nuestra etiqueta h1 y el encabezado menos importante, que es nuestro subtítulo aquí, estará dentro de la etiqueta <h2>.
Ejemplo: Este ejemplo muestra la primera forma de agregar subtítulos en HTML usando solo encabezados HTML. Escriba el encabezado dentro de una etiqueta de encabezado de nivel superior, mientras que el subtítulo debe escribirse en una etiqueta de encabezado de nivel inferior en comparación con el encabezado.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Adding Sub Heading</title>
<style>
.container {
height: 200px;
width: 600px;
background-color: green;
color: black;
border-radius: 10px;
border: 2px solid gray;
}
</style>
</head>
<body>
<div class="container">
<h1>GeeksforGeeks - Main Heading</h1>
<div>
<h2>About GeeksforGeeks - Sub Heading</h2>
<p>
A Computer Science portal for geeks.
It contains well written,well thought
and well explained computer science
and programming articles, quizzes
</p>
</div>
</div>
</body>
</html>
Producción :
Nota: los encabezados HTML tienen un tamaño y estilo predeterminados. Los usuarios pueden modificarlos según sus necesidades.
Agregar encabezado a través de una combinación de encabezados HTML y etiquetas HTML div: la etiqueta <div> , más conocida como etiqueta de división, define alguna división de contenido en la página web o una sección en un documento HTML. Esto puede ser encabezado, pie de página, barra de navegación, etc.
Digamos que la división es un subtítulo, entonces, ¿cómo podemos usar una etiqueta <div> para el subtítulo en HTML?
¿Cómo se puede usar la etiqueta <div> para el subtítulo? Como la etiqueta <div> es una etiqueta contenedora genérica y se usa para crear alguna sección específica en nuestra página web, aquí la usamos para el subtítulo. Es una etiqueta a nivel de bloque (igual que una etiqueta de encabezado). Ahora, esta sección o contenedor específico que contiene nuestro subtítulo se puede diseñar fácilmente a través de CSS y podemos proporcionar estilo como cualquier etiqueta de encabezado de nivel.
Ejemplo: este ejemplo muestra otra forma de agregar subtítulos en HTML usando una etiqueta de encabezado y una etiqueta div en combinación. La etiqueta <div> es una etiqueta contenedora genérica, también una etiqueta de nivel de bloque y se puede diseñar de forma personalizada y, por lo tanto, se puede usar para agregar un subtítulo en lugar de una etiqueta de encabezado de bajo nivel.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Adding Sub Heading 2</title>
<style>
.container {
height: 200px;
width: 600px;
background-color: green;
color: white;
border-radius: 10px;
border: 2px solid gray;
}
.subHeading {
display: block;
font-size: 1.5em;
margin-top: 0.83em;
margin-bottom: 0.83em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h1>GeeksforGeeks - Main Heading</h1>
<div>
<div class="subHeading">
About GeeksforGeeks - Sub Heading
</div>
<p>
A Computer Science portal for geeks.
It contains well written,well thought
and well explained computer science and
programming articles, quizzes
</p>
</div>
</div>
</body>
</html>
Producción :
Publicación traducida automáticamente
Artículo escrito por siddharthredhu01 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA