In this chapter we have learned how to set up a basic HTML document with a doctype, how to organize our content with headings, and how to write paragraphs. These are the building blocks of any web page.
What is a Doctype?
Doctype stands for Document Type. It tells the browser which version of HTML the document is written in. This helps the browser to read and display the page correctly.
The doctype is not an HTML tag. It is a declaration. You must always place it at the very top of the HTML file, before the <html> tag.
Where to Place the Doctype
The doctype is not an HTML tag. It is a declaration. You must place it at the very top of the HTML file, before the <html> tag.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Doctype Example</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This page starts with a doctype.</p>
</body>
</html>
If you remove the <!DOCTYPE html> line, the page may still load, but the browser might not display it correctly.
HTML5 Doctype
Older versions of HTML (like HTML 4.01 or XHTML) had very long and confusing doctype declarations. For example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" <br>"http://www.w3.org/TR/html4/loose.dtd">This is hard to remember.
But HTML5 made it very simple. Now you only need:
<!DOCTYPE html>That’s it. This short declaration tells the browser the page uses HTML5.
Doctype and Case Sensitivity
The doctype is case-insensitive. This means the browser accepts any combination of upper and lowercase letters. For example:
<!doctype html>
<!DocType html>
<!DOCtyPE html>
All of these are valid. But the best practice is to write it in uppercase like this:
<!DOCTYPE html>This is the most common format, and all developers use it.
What are Headings in HTML?
Headings are used to show titles and subtitles on a webpage. They make content easier to read and understand.
HTML has six levels of headings:
<h1>→ biggest heading, most important<h2>→ slightly smaller<h3>→ smaller again<h4>→ even smaller<h5>→ small heading<h6>→ smallest heading, least important
Example of Headings
<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<h3>Sub-Sub Heading</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>Here:
<h1>is the main heading.<h2>is a subheading under<h1>.<h3>is a subheading under<h2>, and so on.
When you open this in a browser, you will see the text size reduce step by step from <h1> to <h6>.
Why Headings are Important
Headings are not just for bigger or bolder text. They have a semantic meaning:
- Helps Readers → A reader can quickly scan the headings to understand what the page is about.
- Helps Search Engines (SEO) → Google and other search engines use headings to figure out the main topics of your page.
- Helps Screen Readers → Visually impaired users often navigate web pages by jumping between headings.
Correct Heading Structure
You should not use headings randomly. Use them in a logical order.
- Use only one
<h1>for the main title of the page. - Use
<h2>for main sections. - Use
<h3>for subsections under<h2>. - Go deeper with
<h4>,<h5>,<h6>only if needed.
Example:
<h1>My Website</h1>
<p>Welcome to my website. This is the introduction.</p>
<h2>About Me</h2>
<p>I am a computer science student.</p>
<h3>Education</h3>
<p>I study programming and web development.</p>
<h3>Hobbies</h3>
<p>I like coding and reading books.</p>
<h2>Contact</h2>
<p>You can contact me via email.</p>
This structure is clear and easy to follow.
What is a Paragraph in HTML?
In HTML, paragraphs are the most basic and important elements. A paragraph is a block of text that is separated from other blocks. Using paragraphs makes your content easier to read and organized.
HTML provides a few tags to work with paragraphs and text formatting:
| Tag | Purpose |
|---|---|
<p> | Defines a paragraph |
<br> | Inserts a single line break |
<pre> | Defines pre-formatted text |
<p> Element
The <p> tag defines a paragraph. You start a paragraph with <p> and end it with </p>. Here is an example:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
When displayed in a browser, each <p> creates a separate block of text with some space above and below it.
Important Notes About Paragraphs
- HTML ignores extra spaces and lines
You cannot control spacing by adding more spaces or empty lines in your HTML code. The browser will remove extra spaces automatically. For example:
<p>This is another paragraph, extra spaces will be removed by browsers</p>
The browser will display this as a normal paragraph, ignoring the extra spaces.
- Line Breaks with
<br>
If you want to break a line without starting a new paragraph, you can use<br>:
<p>This is a paragraph.<br>This text is on a new line.</p>
- Pre-formatted Text with
<pre>
The<pre>tag keeps spaces and line breaks exactly as you write them. This is useful for code examples or poems:
<pre>
Line 1
Line 2 with spaces
Line 3
</pre>Display Notes
HTML display changes depending on the screen size and browser. Large or small screens, or resized windows, may display paragraphs differently. Always check your page on multiple devices to see how it looks.
Try it Yourself
- Write three paragraphs about your favorite hobby using
<p>tags. - Insert a line break
<br>in one paragraph to split a sentence. - Use
<pre>to write a short poem or a code snippet.
Also Read: