Almost every day, I interact with people that are using the Web to have their voices heard. Software like WordPress facilitates this process, but it is also beneficial to understand the basic technologies that underlie content creation.
You start with the basics, and then move on to increasing levels of complexity as you demand more advanced functionality. I think this is an instructive path, and I want to share what I have learned to help those willing to take a step beyond WYSIWYG editors.
Let us talk about HTML.
The Hypertext Markup Language
The Hypertext Markup Language (HTML) is the language of the World Wide Web. The term is kind of a mouthful, so let us break it down:
- Hypertext: This refers to the ability to create links to other pages or resources. Essentially, the Web is a collection of linked pages. Hypertext and hyperlinks are what make this possible.
- Markup: The term markup refers to HTML's ability to create pages of formatted text, along with images and other embedded resources.
These technologies include:
- drag and drop
- offline storage
HTML Document Structure
No matter how complicated an HTML document may become, it always has the same basic structure. The first line in an HTML document is the DOCTYPE declaration. This statement tells the browser which version of HTML it should be expecting.
For previous versions of HTML, this statement was more complicated. For HTML5, this is all we need. This should be the very first thing in an HTML document, even before any white space.
To create a comment in HTML, you use the following syntax:
<!-- Some deep, insightful comment -->
Do not use the
-- character inside of a comment.
HTML content is comprised of elements. For example, these elements can be used for paragraphs, blockquotes, and bolded text, respectively:
The most basic HTML document requires several of these elements. Here is a basic template that is recommended for most content creators:
As previously stated, the DOCTYPE declaration comes first. Then, comes the html element, which represents the root of the HTML document itself. Inside of the html element, you have the head and body elements.
Tags are the working basis of HTML and make up HTML elements. Beginning tags may contain attributes. For example, the beginning tag in the meta element from the example above has a charset attribute that is set to UTF-8. Ending tags (e.g.,
</html>) never have attributes.
Note: Keep in mind, the DOCTYPE is not a tag. It is just an HTML element, with its own rules and syntax.
The head section contains the title of the page and additional information about the page, e.g., head matter. This information applies to the entire document and how it is processed.
The body section contains the actual content of the page. This is where the majority of your work is going to be focused.
Think of an HTML document as a tree, which begins with the html element at its root. This is a metaphor we will come back to later as we talk about the DOM.
Elements, Tags, and Containers
As previously stated, each HTML element is made up of tags. Many elements are container elements, i.e., they have a beginning tag, an ending tag, and content in between.
Other elements are stand-alone elements, with only a single tag, like the meta element in our previous example.
<meta charset="UTF-8" />
Content Models in HTML5
In HTML5, content models define what types of content are expected in certain contexts. A given element may only have content that matches the requirements of its content model, and the element's content model may include 0 or more categories of content. Also, an element may belong to 0 or more categories.
HTML5 has 7 content models:
- Metadata content
- Flow content
- Sectioning content
- Heading content
- Phrasing content
- Embedded content
- Interactive content
Most of the elements that are used in the body of an HTML document belong to the Flow content model. For a better idea of which elements these content models include, check out the following lists:
- content that sets up the presentation or behavior of the rest of the content, or that establishes the relationship of the document with other documents; conveys out-of-band information
- embedded media
- heading elements h1-h6
- h group element
- content that imports another resource that is inserted into a document (e.g., video, audio, flash and other plugins, as well as images, canvas, and math objects)
- content that is specifically used for user interaction (e.g., hyperlinks, form elements, menus, and media, if it has the controls attribute)
Not too bad, right? Before we go on, we are going to solidify our understanding of the fundamentals of HTML, starting with whitespace and comments.