HTML Structure and the Importance of Elements as Containers

Probably the most important concept you can learn about HTML is its structure in the form of containers.

HTML elements nest inside each other in their proper places.

HTML Element Syntax

But the first question is what are HTML elements and how can they be used semantically?

HTML elements are individual components of an HTML document and it represents semantics, or meaning. In a broader sense, it means that your site architecture separates presentation from content; essentially saying that HTML is used for structure and CSS is used for the style of your web design.

Writing semantic markup means understanding the hierarchy of your content and how both users and machines will read it. Much of it can seem like common-sense; when you write a heading, mark it with a heading tag (

<h1>, <h2>, etc.

). When you write a paragraph, mark it with a paragraph tag (

<p>

Elements are written with a start tag

<>

(or opening tag) and an end tag

</>

(or closing tag), with content in between. They can also contain attributes that defines its additional properties. For example, a paragraph, which is represented by the

element, would be written as:

Semantic markup means that HTML tags are never chosen based on the way they appear in a web browser — they’re chosen based on the importance and structure of the content.

Why containers are so important?

Containers are the basis for HTML documents because they define a logical structure for a document. If the purpose of HTML were to just mark up the appearance of a document, HTML would be a much simpler language, but it would also be less flexible and not as machine-readible. Knowing the container concept is key to your proper construction of WWW documents. Your ability to put content into HTML elements and put these elements inside the proper elements is key to your document's proper syntax.

The container, in HTML, usually intends another kind of containment. One that sometimes necessary to implement a behaviour or styling of multiple components. It serves the purpose of grouping elements both semantically and visually. As an example, Bootstrap has "container classes" that houses their grid system or contain various other components.

Here's an example of a general container:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>
       Title here
    </title>
  </head>
  <body>
    <div class="container">
        <h1>heading</h1>
        <p>This is very minimal HTML document.</p>
        <img src="#" alt="">
    </div>
  </body>
</html>

/**
 * 1. Centers the content.
 * 2. See the "width vs max-width" section
 * 3. See the "Additional Padding" section
 */
.container {
  margin-right: auto; /* 1 */
  margin-left:  auto; /* 1 */

  max-width: 960px; /* 2 */

  padding-right: 10px; /* 3 */
  padding-left:  10px; /* 3 */
}

Differences between width and max-width

Setting the width of a block-level element will prevent it from stretching out to the edges of its container (good for things like readable line lengths). Therefore, the element will take up the specified width. The problem occurs when the browser window is narrower than the specific width of the container. That will trigger a horizontal scrollbar, which is almost always undesirable. For example:

img {
  width: 600px;
}

Using max-width instead, in this situation, is better for narrower browser windows. This is important when making a site usable on small devices.

Like so:

img {
  width: 100%;
  max-width:700px;
}

This says that the fixed width of the image, should take up the entire size of its container — if the width of the parent element is explicitly stated, — all hundred percent of it, yet the image should never exceed 700px. It means that the image can be less than 700px, if that suits its situation better (e.g smaller window size) but it should never be more. So there are two conditions here, that the width of the image can be 100% of the parent element if it wants to but it must never be more than 700px.

Which HTML Element to Choose?

Elements can be placed in two distinct groups: block level and inline level elements. The former make up the document's structure, while the latter dress up the contents of a block.

Also, a block element occupies 100% of the available width and it is rendered with a line break before and after. Whereas, an inline element will take up only as much space as it needs.

The most commonly used block-level elements are

<div>

<p>

<h1>

through

<h6>

<form>

<ol>

<ul>

<li>

<section>

and so on. Whereas, the commonly used inline-level elements are

<img>

<a>

<span>

<strong>

<b>

<em>

<i>

<input>

<button>

, etc.

The

<div>

element can also be considered as a wrapper since it has no semantic meaning and it is just a generic container. It simply holds all visual elements and content on the page. In terms of semantics, when in doubt,

<div>

is the best choice.

One might also wonder if maybe

<section>

or another block element could be used as a generic wrapper, instead of

<div>

element. That would be a big HTML semantic mistake, here's what the W3C spec says:

The
<section>
element is not a generic container element.
When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.

The

<section>

element carries it's own semantics. It represents a thematic grouping of content. The theme of each section should be identified, typically by including a heading (h1-h6 element) as a child of the section element.

Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site's home page could be split into sections for an introduction, news items, and contact information.

I would conclude saying that if you're new to HTML take the time to learn how to use all of these different HTML elements semantically. If you aren't sure that you're using the right element, take a few minutes and do some research. As we've seen, using the right container is important.

As Internet access becomes more widespread, smart devices proliferate, and the web further integrates into the fabric of modern society, the need for markup to be semantically accurate becomes evident.