본문으로 건너뛰기

HTML Layout Fundamentals

HTML Layout Fundamentals

HTML (HyperText Markup Language) is the language used to define the structure and content of web pages, effectively forming the skeleton of the webpage.

A layout refers to the arrangement of the structure and information on a page.


Basic Structure

All HTML documents start with the following basic structure:

<!DOCTYPE html>
<html>
<head>
<!-- Basic information of the web page -->
<title>Page Title</title>
</head>
<body>
<!-- The part that is displayed to the user -->
</body>
</html>

The <head> contains metadata and styling for the document, 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 screen, and each element starts on a new line. Examples include <div>, <h1>, and <p>.
<div>This is a block element</div>
<p>This is a block element as well</p>

  1. Inline Elements: Inline elements only occupy as much space as their content, and they are displayed in a continuous line without breaking. Examples include <span>, <a>, and <img>.
<span>This is an</span> <span>inline element.</span>

Containers & Items

Containers are used to group several elements together into one collective unit. <div> and <section> are typical container elements.

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

Positioning

Positioning refers to the control of an element's placement, akin to arranging furniture within a house. You can use the position property to adjust the placement of elements.

  • static: This is the default value. It is the position given to elements not explicitly positioned.

  • relative: Moves an element relative to its original position.

  • absolute: Positions an element absolutely to its parent.

  • fixed: The element is fixed in position relative to the viewport.

We will delve into positioning in more detail in subsequent lessons. 🙂