Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Document Flow | Document Structure
Ultimate HTML
course content

Course Content

Ultimate HTML

Ultimate HTML

1. Web Development
2. Tags and Attributes
3. Document Structure
4. Media and Tables
5. Forms

bookDocument Flow

Flow

The flow of a web page determines the order in which elements are displayed vertically and horizontally. By default, elements are shown in the order in which they appear in the HTML document, from top to bottom. The horizontal flow typically moves from left to right; however, the flow is also reversed from right to left in languages that read from right to left.

Every element in HTML is a rectangular area that takes up a position on a line, similar to words on a lined sheet. There are two primary types of elements: block-level and inline elements.

html

index

css

index

js

index

copy

After inspecting the example, we can conclude:

Block-level element: occupies the entire width of its container, regardless of the content size. Block elements stack on top of each other, one after another.

Inline element: occupies only as much width as its content requires. This allows inline elements to sit on the same line. If there isn't enough space on one line, they will wrap to the next line.

Note

The display property of HTML elements is predefined according to standards and conventions established by the HTML specification. These standards dictate the default rendering behavior of elements across various web browsers. You can find the specific type of any element in the reference or specification links provided: HTML Reference and HTML Specification.

Element Types

As previously mentioned, every element in the browser style sheet has a type represented by the display property, which determines its behavior. The two main types of elements are block-level and inline elements, and there are also additional types, such as inline-block elements.

Inline elements: Primarily used for styling and highlighting small parts of content, such as links, buttons, and images. They remain on the same line until the space is filled, at which point they wrap to the next line.

Block-level elements: Used to define larger content structures like headings, paragraphs, lists, and sections (e.g., headers, footers). They are visually displayed as rectangular blocks that stack vertically on top of each other.

1. By default, elements can be displayed on a webpage in any order the browser chooses.
2. What are two main types of elements?
3. Paragraph (`<p>` tag) is …
By default, elements can be displayed on a webpage in any order the browser chooses.

By default, elements can be displayed on a webpage in any order the browser chooses.

Select the correct answer

What are two main types of elements?

What are two main types of elements?

Select a few correct answers

Paragraph (`<p>` tag) is …

Paragraph (<p> tag) is …

Select the correct answer

Everything was clear?

How can we improve it?

Thanks for your feedback!

Section 3. Chapter 4
We're sorry to hear that something went wrong. What happened?
some-alt