AgerNic.com
WEB DEVELOPER SITE, HTML, CSS, PHP, SQL

HTML headings <h1> ... <h6>


<< Previous Page
HTML div class container
Next Page >>
HTML font color

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:

<h1> your_text</h1>
Note: You can have several
elements in one HTML document

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

Example

<!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 &lt;h1&gt;</p>
<hr>
<h2> this is h2 title, your text here</h2>
<p> this is a paragraph font-size: 22px for &lt;h2&gt; blue color</p>
<hr>
<h3> this is h3 title tag, your text here</h3>
<p> this is a paragraph font-size: 18px for &lt;h3&gt; red colored</p>
<hr>
<h4> this is h4 title, your text here</h4>
<p> &lt;h4&gt; heading by default</p>
<hr>
<h5> this is h5 header, your text here</h5>
<p> &lt;h5&gt; heading by default</p>
<hr>
<h6> this is h6 title tag, your text here</h6>
<p> &lt;h6&gt; heading by default</p>
</body>
</html>

 

How to make heading center, simple code

Here is an example of titles with a central alignment

Example

<!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 &lt;h1&gt;</p>
<hr>
<h2> this is h2 title, your text here</h2>
<p> this is a paragraph font-size: 22px for &lt;h2&gt;, 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 &lt;h3&gt; red colored, text-align: center</p>
<hr>
<h4> this is h4 title, your text here</h4>
<p> &lt;h4&gt; heading by default</p>
<hr>
<h5> this is h5 header, your text here</h5>
<p> &lt;h5&gt; heading by default</p>
<hr>
<h6> this is h6 title tag, your text here</h6>
<p> &lt;h6&gt; heading by default</p>
</body>
</html>

Note: The text size of the labels is decreasing from the h1 with a larger size to the h6 which is the smaller one.

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

Example

<!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 &lt;h1&gt;,<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 &lt;h2&gt; 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 &lt;h3&gt; 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.

<< Previous Page
HTML div class container
Next Page >>
HTML font color

 



html heading sizes, tag, color, levels, center, definition, padding, align center, types
HTML headings tag, size, color, padding, align - html tutorial

Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


HTML Img Background
HTML Image Link
HTML Image Size
HTML Text Style
HTML Text Align
HTML Text Size
HTML Text Color Style
HTML Text Color
HTML Table Color
HTML Table Row Colspan
HTML Table Width
HTML Table Style
HTML Table Border
HTML Table
HTML Font Face
HTML Font Size
HTML Font Color
HTML Headings
HTML div border color
HTML div class
HTML class container
HTML form action
HTML comment
HTML link new tab
HTML link underline
HTML link tag
HTML button action
HTML button onclick
HTML button link
HTML table style
HTML image
HTML colors
HTML div style
Text, paragraf in HTML
HTML Tags Attributes
HTML - Elements
HTML Introduction
Home HTML Tutorial
Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


jQuery replace...
jQuery replaceClass...
jQuery click ()...
jQuery switchClass()...
jQuery draggable()...
jQuery HTML...
jQuery scroll smooth...
jQuery scroll()...
jQuery stop()...
jQuery animate()...
jQuery SlideToggle()...
jQuery slideDown()...
jQuery slideUp()...
jQuery fadeToggle...
jQuery fadeOut()...
jQuery fadeIn()...
jQuery Effects - hide () and show ()...
jQuery Events...
jQuery Attributes...
jQuery Selectors...