Skip to main content
Crowdfunding
Python + AI for Geeks
Practice

What is a Webpage Layout?

HTML (HyperText Markup Language) defines the structure and content of a web page, forming the skeleton of the webpage.

Layout refers to the structure and arrangement of information on the page.


Basic Structure of a Webpage Composed of HTML​

An HTML document that makes up a webpage has the following basic structure:

Basic HTML Structure
<!DOCTYPE html>
<html>
  <head>
    <!-- Basic information of the webpage -->
    <title>Page Title</title>
  </head>
  <body>
    <!-- Content displayed to the user -->
  </body>
</html>

The <head> includes the document's metadata and styles, while the <body> contains the content displayed to the user.


Block Elements and Inline Elements​

HTML elements are broadly categorized into Block elements and Inline elements.

  1. Block Elements: Block elements take up the full width of the parent container and always start on a new line. Elements such as <div>, <h1>, and <p> are block elements.
HTML Block Elements
<div>The div element is a block element</div>
<p>The p element is a block element</p>

  1. Inline Elements: Inline elements only take up as much width as necessary and are displayed consecutively without a line break. Elements such as <span>, <a>, and <img> are inline elements.
HTML Inline Elements
<span>span is</span> <span>an inline element.</span>

Container & Item​

A container groups multiple elements together. <div> and <section> are representative container elements.

div Container Element
<div>
  <p>Hello!</p>
  <p>Nice to meet you!</p>
</div>

In the above code, the <div> groups the <p> elements together.

Here, the <div> acts as the Container, and the <p> elements act as Items.

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.