Page Structure and Extra Markup
Up to this point, we’ve added HTML elements to pages singularly, in that they really had no defined groupings. However, most pages are built on “blocks” of content that are placed in relation to each other.
Consider an HTML file “gallery.html,” that might be on your website:
The gallery page has 4 defined areas that display different content based on their type:
- image
- video
- audio
- social media sharing button for visitors to use
Each area has a section for files, a slider (or scrollable gallery) to present those files interactively, and a decorative illustration.
These sections, or divisions, help us control how content looks en masse rather than element-by-element. This will become more apparent as we proceed.
To describe the examples you’ve seen, elements on these pages work much like building “blocks” - separate bricks that come together to create the page’s structure.
These elements are primarily divided into two categories: block-level elements, which take up the full width of the page, and inline elements, which do not cause line breaks and can be positioned naturally next to each other.
Block-Level Elements
Block elements appear on their own block on a new line. Each of these (unless told otherwise through styling) appears on a new line in HTML pages. Some block elements are:
- Headings
<h1>-<h6> - Paragraphs
<p> - Lists
<ol>,<ul> - Horizontal rules
<hr>
In the example above, a new type of block-level element was used (the <div>) to section off a row for each media gallery, which altogether fills the page edge-to-edge.
Inline Elements
Inline elements do not start on a new line. Instead, they sit next to other elements on the same line. Some examples of inline elements include:
- Images
<img> - Semantic elements
<em>,<b>, etc. - Links
<a>
The example above used a new type of inline element (the <span>) to create the slider. The illustration can sit on the same block since <img> is also an inline element.