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 articles.

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 charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <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 the 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 charset="UTF-8"> element to specify that our document uses UTF-8 encoding (typical for web pages)
  • The <meta name="viewport" content="..."> element to set up the width and scale of the viewport for responsive design
  • The <link rel="stylesheet" href="..."> element to give us access to an external icon library
  • 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 the 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

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. They take the form:

  • .component {}

Subcomponents are child entities of their parent components. They take the form:

  • .component_subcomponent {}

Modifiers are used to define multiple styles of the same components and subcomponents. They take the form:

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

Sections are used to uniqely define components and subcomponents only for a specific part of the document. They take the form:

  • #section .component {}
  • #section .component_subcomponent {}

This system 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 appeals to you.