Page Content

Posts

Content elements in html with examples

content elements in HTML are structuring the text on a web page. The text-based elements include headings (<h1> to <h6>), paragraphs (<p>), and line breaks (<br>).

What are the 6 headings in HTML?

HTML headings are defined with the <h1> to <h6> tags. There are six levels of headings, with <h1> is the most important or main heading on a page and <h6> is the least important. The lower the number of the heading tag (e.g., <h1>), the larger and more projecting the heading will  appear in a browser.

Headings are critical for providing structure to a document, allowing users to quickly understand the content’s order. Search engines use headings to index the structure and content of web pages, use them correctly. An article should have one <h1> element for the main title, followed by <h2> subtitles, and so on, to show the order of information. Browsers add an empty line before and after headings.

Here’s an example of how to use heading tags:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Example Page</title>
</head>
<body>
<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>
</body>
</html>

Paragraph tag in html

The <p> tag is used to define paragraphs in HTML documents. The <p> element represents a paragraph of text. HTML documents are divided into paragraphs using these tags.

Browsers automatically insert a line break and some space after each </p> tag. The <p> element is one of the most basic HTML elements. Each paragraph’s text enclosed within an opening <p> tag and a closing </p> tag. Most browsers will also add some space between paragraphs when displaying the page.

Example:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Example Page</title>
</head>
<body>
<p>This is the first paragraph. It contains several sentences that form a coherent unit of discourse.</p>
<p>This is the second paragraph. Browsers typically add some spacing between paragraphs to improve readability.</p>
</body>
</html>

What are line breaks in HTML?

The <br> tag inserts a single line break. It is a one-sided tag (also called an empty element or a void element) and does not require a closing tag.

The <br> tag is used when you need to start a new line within a paragraph or other block of text, without creating a new paragraph element. It used when line breaks are part of the content itself, such as in poems or addresses, and not for creating spacing between paragraphs or other content groupings (for which you should use the <p> tag or CSS).

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Example Page</title>
</head>
<body>
<p>This is a paragraph of text.<br />
This line will start on a new line because of the &lt;br&gt; tag.<br />
And this line will start on yet another new line.</p>
</body>
</html>

Read more about the <head> elements and Meta tags

HTML5 Tools for web development

Index