HTML Heading 1 Element
HTML Heading 1 <h1>
tag is used to define heading of type 1 in an HTML document.
Example
A simple Heading 1 element is shown in the following example.
index.html
<!DOCTYPE html> <html> <body> <h1>Hello World</h1> </body> </html>
Note: HTML Heading 1 element starts with the tag <h1>
and ends with an end tag </h1>
.
Default CSS for HTML h1
By default, following CSS properties are set for a Heading 1 element.
display: block; font-size: 2em; margin-block-start: 0.67em; margin-block-end: 0.67em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold;
Inline Style for HTML Heading 1 Element
We can change the style of Heading 1 element through inline styling using style attribute.
In the following example, we have set the color as red for the Heading 1 element.
index.html
<!DOCTYPE html> <html> <body> <h1 style="color:red;">Hello World</h1> </body> </html>
Apply CSS for HTML Heading 1 Element
We can apply CSS for all Heading 1 elements using the h1
tag.
index.html
<!DOCTYPE html> <html> <head> <style> h1 { color:red; } </style> </head> <body> <h1>Hello World</h1> </body> </html>
Conclusion
In this HTML Tutorial, we learned about HTML <h1> tag and went through different examples that cover defining an HTML Heading 1 element, and styling it.