Syeda Maira Saad's blog

[3] Headings in HTML

Photo by Christina @ wocintechchat.com on Unsplash

[3] Headings in HTML

Syeda Maira Saad's photo
Syeda Maira Saad
·

1 min read

Today we will discuss about heading element in HTML.

The heading defines headings for contents such as images and text. They specify a hierarchical structure of a web page by grouping the contents into different headings.

HTML defines six levels of heading that range from H1 to H6. the H1 element specifies top-level heading, which displayed with the largest font size. the H6 element specifies lowest level of heading, which is displayed with the smallest size. 

<!DOCTYPE html>
<html>
<head>
    <title>HEADINGS</title>
</head>
<body>
    <H1>H1 HEADING</H1>
    <H2>H2 HEADING</H2>
    <H3>H3 HEADING</H3>
    <H4>H4 HEADING</H4>
    <H5>H5 HEADING</H5>
    <H6>H6 HEADING</H6>
</body>
</html>

HEADINGS.png

HGROUP

The hgroup element is a new element defined in HTML5. it is used to group titles and their subtitles. this element is used to group a set of h1-h6 elements. they are used for headings that have multiple levels that can include sub-headings, alternative titles, taglines and so on. The main advantage of using this element is to create document outline. 

<!DOCTYPE html>
<html>
<head>
    <title>HEADINGS</title>
</head>
<body>
    <hgroup>
    <H1>TITLE HEADING</H1>
    <H2>SUB-TITLE HEADING</H2>
</hgroup>
</body>
</html>

HGROUP.png

Html beginers2Articles1WeekWeb Development