Mastering HTML Headings | Create Structured Web Pages with Headings
HTML headings are used to define headings or titles for a web page or section of a web page.
There are six levels of headings in HTML, ranging from <h1>
to <h2>
, with <h1>
being the most important and <h6>
being the least important.
As an example:
Editor
In this example:
- The
<h1>
heading is used for the main heading of the web page, while the<h2>
headings are used for subheadings. - The
<h3>
heading is used for a sub-subheading, and so on. - The
<p>
tag is used to define paragraphs of text.
By default, different heading levels have different margins set by the browser's stylesheet.
Importance Of Headings
Headings are important in HTML because they provide a hierarchical structure to a web page's content, making it easier to read and understand.
Here are some reasons why headings are important:
Accessibility
Headings help screen reader users to navigate and understand the content of a web page. Screen readers read out the headings to users, allowing them to quickly skip to the content they are interested in.
Readability
Headings help break up long sections of text into smaller, more readable chunks. This can make the content more engaging and easier to understand, especially for users who are skimming the page.
SEO
Headings can also be important for search engine optimization (SEO). Search engines use headings to understand the structure of a web page and to identify the most important keywords and phrases on the page.
Organization
Headings help to organize the content of a web page into logical sections, making it easier for users to navigate and find the information they are looking for.
Headings size
The size of headings is determined by the default styles set by the browser's stylesheet. However, the size of headings can be adjusted using CSS (Cascading Style Sheets).
You can specify the size for any heading with the style
attribute, using the CSS font-size property.
As an example:
Editor
In this example:
- The
style
attribute is used to add inline CSS styling to the element, specifically thefont-size
property, which sets the size of the font to50px
.