HTML headings <h1> ... <h6>
HTML Tutorial » HTML headings tag
Headings are HTML tags embedded in the code of a website, which have the role of highlighting the most important elements of the content of a page and to indicate to search engines what is on that page.
Syntax for h1 tag:
There are up to 6 tags in HTML to define titles or sections. All of them as default there are bold text: <h1>, <h2>, <h3>, <h4>, <h5> and <h6>. All of them have their respective closing tag, and as in the paragraphs, the title text is enclosed between the opening and closing tags:
<h1> Level 1 title text </h1>
<h2> Level 2 Title Text </h2>
Generally, a heading is used as an introduction to a specific section of content.
Therefore, we should use a single H1 tag, associated with a heading that indicates the subject of a web page.
Further more, we can use the tags H2, H3, H4, H5 and H6 to indicate other important sub-sections of content, each tag being secondary to the previous tag.
HTML code headings sizes and color
Here is an example of code titles to which we add size and color
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML code titles with size and color</title>
<style type="text/css">
h1 {
font-size: 22px;
}
h2{
font-size: 22px;
color: #03C;
}
h3{
font-size: 18px;
color: #C30;
}
h4, h5, h6 {}
</style>
</head><body>
<h1> this is h1 title, your text here</h1>
<p> this is ah1 header with font-size: 22px for <h1></p>
<hr>
<h2> this is h2 title, your text here</h2>
<p> this is a paragraph font-size: 22px for <h2> blue color</p>
<hr>
<h3> this is h3 title tag, your text here</h3>
<p> this is a paragraph font-size: 18px for <h3> red colored</p>
<hr>
<h4> this is h4 title, your text here</h4>
<p> <h4> heading by default</p>
<hr>
<h5> this is h5 header, your text here</h5>
<p> <h5> heading by default</p>
<hr>
<h6> this is h6 title tag, your text here</h6>
<p> <h6> heading by default</p>
</body>
</html>
How to make heading center, simple code
Here is an example of titles with a central alignment
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>How to make heading center, simple code</title>
<style type="text/css">
h1 {
font-size: 22px;
text-align: center;
}
h2{
font-size: 22px;
color: #03C;
text-align: right;
}
h3{
font-size: 18px;
color: #C30;
text-align: center;
}
h4, h5, h6 {}
</style>
</head><body>
<h1> this is h1 title, your text here</h1>
<p> h1 header with: text-align: center; and font-size: 22px for <h1></p>
<hr>
<h2> this is h2 title, your text here</h2>
<p> this is a paragraph font-size: 22px for <h2>, blue color and text-align: right;</p>
<hr>
<h3> this is h3 title tag, your text here</h3>
<p> this is a paragraph font-size: 18px for <h3> red colored, text-align: center</p>
<hr>
<h4> this is h4 title, your text here</h4>
<p> <h4> heading by default</p>
<hr>
<h5> this is h5 header, your text here</h5>
<p> <h5> heading by default</p>
<hr>
<h6> this is h6 title tag, your text here</h6>
<p> <h6> heading by default</p>
</body>
</html>
Tags: html heading sizes, tag, color, levels, center, definition, padding, align center, types
Creating HTML heading padding
Here is an example of titles with a central alignment
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Creating HTML heading padding</title>
<style type="text/css">
h1 {
font-size: 22px;
text-align: center;
padding: 12px;
background-color: #FFC;
}
h2{
font-size: 22px;
color: #6FF;
text-align: right;
background-color: #009;
padding: 6px;
}
h3{
font-size: 18px;
color: #C30;
text-align: center;
}
h4, h5, h6 {}
</style>
</head><body>
<h1> this is h1 title, your text here</h1>
<p> h1 header with: text-align: center; and font-size: 22px for <h1>,<br />
padding 12px for each side with background-color: #FFC;</p>
<hr>
<h2> this is h2 title, your text here</h2>
<p> We have for <h2> title thisthese characteristics:<br />
font-size: 22px, color: #6FF, text-align: right, background-color: #009, padding: 6px;</p>
<hr>
<h3> this is h3 title tag, your text here</h3>
<p> this is a paragraph font-size: 18px for <h3> red colored, text-align: center</p></body>
</html>
Like the paragraphs, these are block labels, so they always start at the beginning of a new line and cause the next element to always be placed at the beginning of a new line.
html heading sizes, tag, color, levels, center, definition, padding, align center, types
HTML headings tag, size, color, padding, align - html tutorial
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.