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. But most pages are built on “blocks” of content 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:

1. image
2. video
3. audio
4. social media sharing button for visitors to use

Within each of these areas there is 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 go on.

To describe the examples you’ve been seeing, elements on these pages work much like building “blocks” - separate bricks that come together to create the structure of the page.

These elements are primarily given two distinctions; block-level elements take up the full-width of the page, while inline elements do not cause line breaks and can neighbor each other naturally.

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>

So, for example, when you add in a <h1> element, it automatically places the text you use within that header on a new line. You don’t have to use the <br /> element.

In the example above with the gallery page, in order to section-off a row for each media gallery (image, audio, video, etc.) a new type of block-level element was used: the <div> element.

Inline Elements

Inline elements are not automatically given additional area on the page outside of their contents. Essentially, these means inline elements can be adjacent, rather than atop or below each other. Some inline elements are:

• Images <img>
• Semantic elements <em>, <b>, etc.
• Links <a>

So, for example, two images could be side by side on a webpage. They don’t automatically go on a different line.

In the example above, a new type of inline element was used (the <span>) to create the slider so you could scroll through the different media. Since <img> is also an inline element, the illustration can sit on the same block.