Skip to main content
Practice

Layout Basics

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

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


Reviewing Basic HTML Structure​

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

Basic HTML Structure
<!DOCTYPE html>
<html>
  <head>
    <!-- Basic information about the webpage -->
    <title>Page Title</title>
  </head>
  <body>
    <!-- The visible part to users -->
  </body>
</html>

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


Block Elements and Inline Elements​

HTML elements are broadly divided into block elements and inline elements.

  1. Block Elements: Block elements occupy the full width of the screen, and each element starts on a new line. <div>, <h1>, and <p> 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 occupy only the space bounded by the tags, appearing continuously without line breaks. <span>, <a>, and <img> are examples of inline elements.
HTML Inline Elements
<span>span is</span> <span>an inline element.</span>

Containers & Items​

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>

Positioning​

Positioning refers to adjusting the location of elements. The position property can be used to control this.

  • static: This is the default value for element positioning.

  • relative: Moves relatively from its normal position.

  • absolute: Has an absolute position based on its parent element.

  • fixed: Has a fixed position based on the viewport.

Positioning
<div>Basic element</div>
<div style="position: fixed; bottom: 60px; right: 60px;">
  Element with a fixed position relative to the viewport
</div>

We will explain positioning in more detail in future lessons 🙂

Want to learn more?

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