Skip to main content
Practice

What is Layout in a Web Page?

HTML is a language used to define the structure and content of a web page, serving as the skeleton of the webpage.

Layout refers to the arrangement of a page's structure and information.


Basic Structure of a Web Page with HTML​

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

Basic HTML Structure
<!DOCTYPE html>
<html>
  <head>
    <!-- Basic webpage information -->
    <title>Page Title</title>
  </head>
  <body>
    <!-- Visible section for users -->
  </body>
</html>

The <head> section includes the document's metadata and styles, while the <body> contains the content visible to users.


Block Elements and Inline Elements​

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

  1. Block Elements: Block elements occupy the full width of the screen and begin on new lines. <div>, <h1>, <p>, etc., are examples of block elements.
HTML Block Elements
<div>div is a block element</div>
<p>p is a block element</p>
  1. Inline Elements: Inline elements take up only as much width as the content itself and are displayed consecutively without line breaks. <span>, <a>, <img>, etc., are examples of inline elements.
HTML Inline Elements
<span>span is</span> <span>an inline element.</span>

Containers & Items​

A container groups multiple elements into one unit. <div> and <section> are representative container elements.

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

In the code above, the <div> groups the <p> elements into a single unit.

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

Want to learn more?

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