HTML Web Page Structure

HTML web page structure helps organise the elements of a web page. A complete HTML5 document usually contains <!DOCTYPE html>, <html>, <head>, and <body>. The <head> contains information about the page, while the <body> contains the visible content of the web page.

Web Page Layout :

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 HTML Web Page

To create a web page, write the HTML code in a text editor such as Notepad or Visual Studio Code. Add the required HTML elements to create the page, and save the file with the .html extension. Then open the saved HTML file in a web browser to display the web page and check how it works.

Steps:

1. Open a text editor such as Notepad or Visual Studio Code.
2. Write the HTML code and add the required HTML elements, such as <h1> for headings and <p> for paragraphs.
3. Save the file with the .html extension, for example, index.html.
4. Go to the folder where you saved the HTML file and double-click index.html. It will open in your default web browser.
5. View the web page in the browser and check that the heading, paragraph, images, and other content are displayed correctly.
6. Test the web page on different browsers and screen sizes to check how it looks on computers, tablets, and mobile devices.
7. On a computer, press F12 to open Developer Tools and use the device preview to check the page on different screen sizes.

You can later use CSS to style the web page and JavaScript to add interactive features.