HTML Document Structure and CSS Naming Convention

Web Development Post by Christopher Spicer

In web development, as in all creative projects, it's important to stay organized. To that end, let's take a moment to discuss some of the design standards that we'll use throughout this series of web development tutorials.

Skip Ahead

Looking for something specific? Select a topic in this article to read more:

HTML Document Structure

All of the examples and demonstrations in this blog will begin with the following HTML document structure:

HTML

<!DOCTYPE html>

<html lang="en-US">

  <head>

    <title>My Page</title>

    <meta name="viewport"
    content="width=device-width, initial-scale=1">

    <meta charset="UTF-8">

    <link rel="stylesheet"
    href="https://fonts.googleapis.com/css?family=Montserrat">

    <link rel="stylesheet"
    href="https://fonts.googleapis.com/css?family=Open+Sans">

    <link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <!-- HTML Head Code -->

    <style>

      /* CSS Code */

    </style>

  </head>

  <body>

    <!-- HTML Body Code -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script>

      // JavaScript Code

    </script>

  </body>

</html>

We begin with the <!DOCTYPE html> declaration to identify that our document uses the HTML5 specification. This allows us to utilize the complete set of semantic elements not available in previous versions of HTML. The proper use of semantic markup elements is an essential component of Search Engine Optimization (SEO), as it provides contextual meaning to our content in a way that is readable by search algorithms.

Next we insert the <html lang="en-US"> element to establish the root of our document and to specify the language as United States English (feel free to change the value of this attribute if you’re defaulting to a different language).

The first element inside the <html> root is the <head>. This element will contain all of our document metadata (information that is not visually rendered on the page, but is used by web browsers and search engines). Here we insert:

  • The <title> element to specify a title for our document
  • The <meta name="viewport" content="..."> element to set up the width and scale of the viewport for responsive design
  • The <meta charset="UTF-8"> element to specify that our document uses UTF-8 encoding (typical for web pages)
  • The <link rel="stylesheet" href="..."> elements to give us access to external font and icon libraries
  • The <style> element to contain all of our CSS rules

The second element inside the <html> root is the <body>. This element will contain all of our document content (information that is visually rendered on the page). Here we insert:

  • The <script src="..."> element to give us access to an external JavaScript library
  • The <script> element to contain all of our JavaScript functions

Note that we've place our JavaScript libraries and functions at the end of the document. This practice optimizes user experience by allowing our visible page content to load first.

HTML documents can be created with any text editor of your choice, including basic applications like Notepad. To create a working web page, simply save your text document with UTF-8 encoding and use the .htm file extension.

To customize any of the web page demonstrations presented in this blog, first use your web browser to save a local copy of the document on your computer. Then open the file in your text editor to add, remove, and modify code to create your own web design masterpiece.

CSS Naming Convention

The examples and demonstrations in this blog will also use the following CSS naming convention:

Components are standalone or parent entities that are meaningful in any context. They take the form:

  • .component {}

Subcomponents are child entities that are meaningful only in the context of their parent components. They are preceded by an underscore (_) prefix and take the form:

  • .component_subcomponent {}

Modifiers are used to define multiple styles of the same component or subcomponent. They are preceded by a hyphen (-) prefix and take the form:

  • .component-modifier {}
  • .component_subcomponent-modifier {}

This system is essentially a simplified version of the standard Block Element Modifier (BEM) technique. And it is one that I have found to be clear, concise, and versatile. However, there is absolutely no requirement that you adopt it as well. You should feel empowered to use any naming convention that makes sense to you.