3. HTML Semantics
Basic Construction of a HTML Page
The tags outlined below should be placed at the top of every HTML page that you create.
<!DOCTYPE html> — This tag specifies the language you will write on the page. In this case, the language is HTML5.
<html> — This tag signals that from here on out we are going to write in HTML code.
<head> — This is where all the metadata for the page resides (marked by the <meta> tags) – most of this information is used for search engines and other computer programs.
<body> — This is where the content of the page goes.
This is how your average HTML page is structured visually.
How to Close a HTML Document
Congratulations! You’ve now reached the end of our absolute beginners HTML tutorial.
Here is a repl.it example of the full basic construction of a HTML Page:
Try to run this code in Repl.it:
The final step we need to complete is to close the <body> and <html> tags at the end of each page using the following HTML code:
</body>
</html>
Semantics Overview
So what exactly is 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 actually 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 Spans, or <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 an opening <p> tag and a closing </p> tag is known and understood as a paragraph. <div>s and <span>s do not hold such meaning and are simply containers.
Block vs. Inline Elements
Most elements are either block- or inline-level elements. What’s the difference?
Block-level elements begin on a new line, stacking one on top of the other, and occupy any available width. Block-level elements may be nested inside one another and may wrap inline-level elements. We’ll most commonly see block-level elements used for larger pieces of content, such as paragraphs.
Inline-level elements do not begin on a new line. They fall into the normal flow of a document, lining up one after the other, and only maintain the width of their content. Inline-level elements may be nested inside one another; however, they cannot wrap block-level elements. We’ll usually see inline-level elements with smaller pieces of content, such as a few words.
Both <div>s and <span>s, however, are extremely valuable when building a website in that they give us the ability to apply targeted styles to a contained set of content.
A <div> is a block-level element that is commonly used to identify large groupings of content, and which helps to build a web page’s layout and design. A <span>, on the other hand, is an inline-level element commonly used to identify smaller groupings of text within a block-level element.
We’ll commonly see <div>s and <span>s with class or id attributes for styling purposes. Choosing a class or id attribute value, or name, requires a bit of care. We want to choose a value that refers to the content of an element, not necessarily the appearance of an element.
For example, if we have a <div> with an orange background that contains social media links, our first thought might be to give the <div> a class value of orange. What happens if that orange background is later changed to blue? Having a class value of orange no longer makes sense. A more sensible choice for a class value would be social, as it pertains to the contents of the <div>, not the style.
As an illustration, the repl.it below shows the id of “social-description” on line 11 and the class of “social” on line 12. Note how both the sentence and social media icons group takes up their own line on the webpage? This is the definition of block-level element. Also, on line 12, because we named our class “social”, if we wish to change the background-color from orange to blue in the future, our class name “social” still makes sense.
Try to run this code in Repl.it:
In this repl.it example below, line 10 shows a <span> tag with the class of “large-text”. According to the output, the inline text within the <span> tag, “writing HTML” looks different from all the other text in that sentence.
Try to run this code in Repl.it: