Headings
If you take any traditional printed media such as newspapers, books or even brochures, the content is usually well structured. They will have headings, paragraphs, and sections of text. These help in drawing attention to the most important details first. Similarly, in the case of web pages, we have different elements to represent different types of content. By default, HTML has six heading elements each with different level of importance. The most important is the <h1> heading and lease important is the <h6> heading. The browser displays the <h1> heading as the largest and reduces the font size for subsequent headings.
<h1>I am the biggest heading out there.</h1> <h2>I am smaller than h1.</h2> <h3>Third level heading here.</h3> <h4>Look at me! I am level 4.</h4> <h5>Atleast I am not the smallest in the family.</h5> <h6>I feel so tiny.</h6>
Paragraphs
We can make any section of continuous text as a paragraph by using the <p> tag. Using the <p> tag will result in the text having space above and below the paragraph.
<p>I need my personal space because I am a paragraph.</p>
Line brakes
Sometimes we may want to cut the line short and move onto the next line. In text editors, we press the Enter key to insert a line break. In case of HTML, we use the <br> tag to insert a line break. Since the element <br> is an empty element, we need to specify only the starting tag.
Horizontal Rules
The element <hr> is used for adding thematic breaks on the web page. This is used for separating sections from each other. Normally the browser displays this element as a horizontal line. Similiar to the <br> element, the <hr> element is an empty element and so requires only the starting tag.
Example page
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Common HTML elements</title> </head> <body> <h1>I am the biggest heading out there.</h1> <h2>I am smaller than h1.</h2> <h3>Third level heading here.</h3> <h4>Look at me! I am level 4.</h4> <h5>Atleast I am not the smallest in the family.</h5> <h6>I feel so tiny.</h6> <br> <p>I am a paragraph. I think I deserve my own standalone web page.</p> <hr> </body> </html>