Learn HTML headings





Part 1


In HTML5 we use the < h(number) > tags to define Headings


< h1 > defines the most important heading with the largest text size


< h6 > defines the least important heading with the smallest text size.


Code Example:

                
                
                <h1>How to learn programming</h1>
<h2>How to learn programming</h2>
<h3>How to learn programming</h3>
<h4>How to learn programming</h4>
<h5>How to learn programming</h5>
<h6>How to learn programming</h6> 
                
                
            
Try yourself >>


Example

Example

Example

Example

Example
Example





Part 2

Why use heading and not pure CSS?


We can create headings with CSS easily, but we suggest you to use HTML headings, why?


Gooele. yes Headings allow google to understand the structure of the page, and are great for SEO.


Don't use headings to increase text size, for that use < strong > or other elements.






Part 3

HTML Horizontal rule


< hr > tag is used to insert a horizontal rule or a thematic break in an HTML page to divide or separate document sections, it does not require an end tag


Code Example:

                
                
                <h1>Learn programming</h1>
<p>We recommend to start with HTML </p>
<hr>
<h2>Learn coding</h2>
<p>the next subject to learn is CSS </p>
<hr> 
                
                
            
Try yourself >>





Part 4

Heading default size


Each browser will set default size for Headings, if you want to change the size you can use CSS:


Code Example:

                
                
                <h1 style="font-size:50px;">Heading</h1>
                <h1>Heading</h1>
                
                
            
Try yourself >>





Part 5

< head > Element


The < head > Element is the area we place our metadata tags and Title


We place there our description and keyword meta tags and for example if you have google ads in your website, you will place the script google provide in the < head > Element.


We place the < head > Element between the < html > and the < body > tags:


Code Example:

                
                
                <!DOCTYPE html>
<html>

<head>
  <title>Title </title>
  <meta charset="UTF-8">
  <meta name="description" content="Your keywords.... ">
<meta name="keywords" content="Your keywords....">
</head>

<body>
<h1>Heading</h1>
<p>Text....</p>
</body>

                

            
Try yourself >>


If you want to Inspect HTML page, to learn about their CSS and more, click F12 in the kwyboard, and use the Dev tools.


If you want to exlore other website HTML page's structure, right click in the page you want to explore, and click "View page source".











Enjoy this html5 tutorial, our main goal is to create easy and free html course, learn html5 free.



Navigation