When you create a web page using HTML, you follow a set of rules and use specific tags to structure your content. Here’s how it works:
1.HTML Document Tag: Every web page starts with a declaration. It tells the browser that this is an HTML document. While not mandatory, it’s good practice to include it.
<!DOCTYPE html>
<html>
– `<!DOCTYPE html>` declares that this is an HTML5 document.
– `<html>` marks the beginning of your HTML content, and `</html>` marks the end.
2.Head Section: Inside `<html>`, you have the `<head>` section. This section contains information about your page but isn’t displayed on the page itself. It includes things like the title of your page.
<head>
</head>
– `<head>` starts the head section, and `</head>` ends it.
<title>Your Page Title</title>
– `<title>` begins the title tag, and `</title>` closes it.
<body>
<!– Your content goes here –>
</body>
– `<body>` indicates the start of your page’s content, and `</body>` marks the end.
So, in a nutshell, an HTML page consists of these key parts:
– A declaration at the beginning (`<!DOCTYPE html>`).
– The HTML document itself, enclosed in `<html>` tags.
– The head section for metadata like the page title (`<head>`).
– The body section for the visible content of your page (`<body>`).
With these basic building blocks, you can create web pages and structure them as you like, adding text, images, and more to make your content come to life on the internet.
Example: This example illustrates the HTML basic structure.
<!DOCTYPE html>
<html>
<head>
<!– Information about the page –>
<!–This is the comment tag–>
<title>MurmuSoftware</title>
</head>
<body>
<!–Contents of the webpage–>
</body>
</html>
“This HTML code doesn’t display content but serves as a basic example of HTML structure, naming the page Murmusoftware using the <! — comment here –> comment tag. HTML offers six heading tags (<h1> to <h6>) to format text with varying styles and font sizes. Commonly used ones include Heading 1, Heading 2, and Heading 3. This example demonstrates the use of all six heading tags in HTML.”
<!DOCTYPE html>
<html>
<head>
<title>Murmu Software</title>
</head>
<body>
<h1>Hello Murmu software</h1>
<h2>Hello Murmu software</h2>
<h3>Hello Murmu software</h3>
<h4>Hello Murmu software</h4>
<h5>Hello Murmu software</h5>
<h6>Hello Murmu software</h6>
</body>
</html>
HTML Paragraph: These tags help us to write paragraph statements on a webpage. They start with the <p> tag and ends with </p>.
HTML Break: – These tags are used for inserting a single line type break. It does not have any closing tag. In HTML the break tag is written as <br>.
Example: This example illustrates the use of the <p> tag for writing a paragraph statement in HTML.
<!DOCTYPE html>
<html>
<head>
<title>GeeksforGeeks</title>
</head>
<body>
<h1>Hello GeeksforGeeks</h1>
<p> A Computer Science portal for geeks<br>
A Computer Science portal for geeks<br>
A Computer Science portal for geeks<br>
</p>
</body>
</html>
HTML Horizontal Line: The <hr> tag is used to break the page into various parts, creating horizontal margins with help of a horizontal line running from the left to right-hand side of the page. This is also an empty tag and doesn’t take any additional statements.
Example: This example illustrates the use of the <hr> tag for the horizontal line in HTML.
<!DOCTYPE html>
<html>
<head>
<title>GeeksforGeeks</title>
</head>
<body>
<h1>Hello GeeksforGeeks</h1>
<p>
A Computer Science portal for geeks<br>
A Computer Science portal for geeks<br>
A Computer Science portal for geeks<br>
</p>
<hr>
<p>
A Computer Science portal for geeks<br>
A Computer Science portal for geeks<br>
A Computer Science portal for geeks<br>
</p>
<hr>
<p>
A Computer Science portal for geeks<br>
A Computer Science portal for geeks<br>
A Computer Science portal for geeks<br>
</p>
<hr>
</body>
</html>
HTML Images: The image tag is used to insert an image into our web page. The source of the image to be inserted is put inside the <img src=”source_of_image“> tag.
Image can be inserted in the image tag in two formats: –
If the image is in the same folder, then we can just write the name of the image and the format as the path.
If the image is in another folder, then we do need to mention the path of the image and the image name as well as the format of the image.
Example: This example illustrates the use of the <img> tag for inserting the images in HTML.
<!DOCTYPE html>
<html>
<head>
<title>GeeksforGeeks</title>
</head>
<body>
<img src=
“https://media.geeksforgeeks.org/wp-content/cdn-uploads/Geek_logi_-low_res.png”>
</body>
</html>
Not a member yet? Register now
Are you a member? Login now