HTML5 Document Structure
HTML5 document structure helps arrange the elements of an HTML page. It tells the browser how the web page is organised and where each element is placed. A complete HTML5 document usually contains <!DOCTYPE html>, the <html> element, the <head> section, and the <body> section. The <head> section contains information about the page, while the <body> section contains the content that is visible to the user on the web page. The <body> section can also include different parts, such as the <header>, <nav>, <main>, <section>, <article>, <aside>, and <footer> sections. These parts can contain headings, paragraphs, links, images, lists, tables, forms, videos, audio, figures, and other HTML elements used to create a complete web page.
HTML5 Page Layout :
<h1> Website Heading </h1> <p> Introduction </p> <img> Logo
<a> Home <a> Tutorials <a> Contact
<h2> Section Heading </h2>
<p> Section Content </p>
<img> Image
<h2> Article Heading </h2>
<p> Article Content </p>
• Related Links
• Tips
• Notes
<h2>
<p>
<a>
<ul>
65% — Main
35% — Aside
<p> Copyright </p> <a> Privacy Policy </a> <a> Contact </a>
Different Parts of an HTML Document Structure
An HTML document is divided into different parts that organize the structure and content of a web page.
1. Document Declaration
The Document Declaration tells the browser that the document uses HTML5.
-
<!DOCTYPE html>– Declares the document as HTML5.
2. Root Section
The Root Section contains the complete HTML document structure.
-
<html>– Defines the root element of the HTML document.
3. Head Section
The Head Section contains information and resources used by the browser.
-
<head><title>– Defines the page title.<meta>– Provides document information.<link>– Connects external resources.<style>– Contains CSS styles.
4. Body Section
The Body Section contains the visible structure and content of the web page.
-
<body><header>– Defines the header area.<nav>– Defines the navigation area.<main>– Defines the main content area.<aside>– Defines related or additional content.<footer>– Defines the footer area.
5. Content Section
The Content Section contains the actual information
displayed on the page. It can be organized using
<main>, <section>, or
<article>.
<h1>to<h6>– Define headings.<p>– Defines a paragraph.<img>– Displays an image.<a>– Creates a link.<div>– Groups related content.
How to Create and Display an HTML5 Web Page
To create a webpage, first open a text editor such as Notepad or Visual Studio Code. Choose an application and write the HTML5 code, starting with . Then add the HTML elements needed to create the webpage. After writing the code, save the file with a file name and the .html extension. Open the saved HTML file in a web browser to display the webpage and check whether it works correctly. You can use CSS to style the webpage and make it more attractive. You can also use JavaScript and other web technologies to add features and improve the webpage.
Steps:
1. You write the HTML code in a text editor such as Notepad or Visual Studio Code, then use HTML elements such as <p> for paragraphs and <h1>–<h6> for headings. These elements help you arrange the content and create the webpage.
2. Again, you save this file with the .html extension.
3. After that, you open the HTML file by following the process below.
- First, go to the folder where you saved the file named index.html.
- Double-click the index.html file.
- The file will open in your default web browser, such as Chrome or Firefox.
- The webpage will be clearly visible in the web browser.
4. After opening the file in the web browser, you can see the webpage on the screen. You can see the heading, paragraph, image, and other content on the webpage.
5. Again, you check the webpage in different browsers and on different devices. On a computer, press Ctrl + U to view the HTML code and also press F12 to open the developer tools. Then, select a mobile or tablet screen size to check how the webpage looks on that device.
