HTML and CSS Reference
Lesson 2. Getting to Know HTML
With our introduction to HTML and CSS complete, it's time to dig a little deeper into HTML
and examine the different components that make up this language.
In order to start building websites, we need to learn a little about which HTML elements
are best used to display different types of content. It's also important to understand how ele-
ments are visually displayed on a web page, as well as what different elements mean se-
Using the proper element for the job goes a long way, and we'll want to make well-informed
decisions in the process.
So what exactly are semantics? Semantics within HTML is the practice of giving content on
the page meaning and structure by using the proper element. Semantic code describes the
value of content on a page, regardless of the style or appearance of that content. There are
several benefits to using semantic elements, including enabling computers, screen readers,
search engines, and other devices to adequately read and understand the content on a web
page. Additionally, semantic HTML is easier to manage and work with, as it shows clearly
what each piece of content is about.
Moving forward, as new elements are introduced, we'll talk about what those elements actu-
ally mean and the type of content they best represent. Before we do that, though, let's look at
two elements— <div> s and <span> s—that actually don't hold any semantic value. They
exist for styling purposes only.
Identifying Divisions & Spans
Divisions, or <div> s, and <span> s are HTML elements that act as containers solely for
styling purposes. As generic containers, they do not come with any overarching meaning or
semantic value. Paragraphs are semantic in that content wrapped within a <p> element is
known and understood as a paragraph. <div> s and <span> s do not hold any such mean-
ing and are simply containers.