So, from part 1, you have your favorite text editor open… check! I’m going to use Sublime Text on Mac. You have your favorite browser ready… check! I’m using Google Chrome (version 95.x). You know that HTML will help render your web page… check! So you’re ready to go!
Objectives
After reading this post, you will be able to:
- Correctly apply basic HTML syntactical terminology.
- Recall the basic structure of an HTML tag.
- Recall the tags that build the main structure of an HTML document.
- Correctly apply nesting for the top-level HTML elements.
Let’s get started by talking about the basic building blocks of HTML, the tag. HTML tags are core elements of HTML that send instructions to your browser to display an element in a certain way (either through formatting or structuring). Tags have a very specific structure, and there are specific tags you can use in HTML, unlike XML. Very few people have memorized the complete list of valid HTML5 tags, so it is helpful to have a reference on hand (like the ones from Mozilla or W3C) and a situation or format you’re trying to replicate.
Structure of the HTML Tag
Remember, a tag is sending instructions, so the tag tells the browser when to start and stop those instructions. The start tag begins the instructions, and the end tag stops the instructions. Start tags are indicated as below.
<INSTRUCTION>For HTML, the actual instruction goes between the “less than” and “greater than” symbols. Of course in the example above, the word “INSTRUCTION” should be replaced with a valid HTML tag. The end tag is usually indicated as below. There are some exceptions, which we’ll discuss in an upcoming post.
</INSTRUCTION>The end tag is very similar to the start tag (with the “less than” and “greater than” symbols), but notice just after the “less than” symbol, there is a slash (/) symbol. This is the HTML equivalent of “end”. The combination of the start tag, the end tag and all other instructions included within the tag is called an element.
<instruction> = start tag
</instruction> = end tag
<instruction...>...</instruction> = element
Let’s start with some real examples — the instructions to the browser to interpret the file as an HTML document. That’s indicated by the HTML element, or the root element. You should include this element for each HTML document.
<html>
</html>See? It’s that simple to add tags to your document! Keep this HTML element in mind, because we’re going to build on it.
HTML Document Structure
HTML documents are usually broken into several sections. There are a couple main ones:
- The head section (noted by the HEAD element) contains all of the page’s metadata, or stuff that doesn’t actually show up on the page. For example, you can define the page’s title (that shows in the browser’s title bar) by using the TITLE element. Here, you’d also want to define any styles your page will be using by either linking the .css file using the LINK tag, or adding the styles directly using the STYLE element.
- The body section (noted by the BODY element) contains the instructions that will be shown within the browser. For example, text, media (images, video), embedded objects, etc. Also, all formatting and structure is rendered within the body through instructional tags.
We’re going to build our head and body sections. But first, let’s talk about a concept called nesting.
Nesting
You nest HTML elements when you want to apply additional elements hierarchically (in order of rendering or interpretational importance) to an existing element. Usually this is done when elements containing more specific instructions are applied within higher-level elements. For example, within the HTML element, you want to define the head and body sections. These would not be defined outside of the HTML instructions (outside of the HTML element), because if they were, they wouldn’t be visible to the browser. So these sectional elements (HEAD and BODY) would be nested within the HTML element.
So putting together what we have:
<html>
<head>
</head>
<body>
</body>
</html>Indentation, line breaks, and color-coding is for ease of reading, but indentation is also automatically done by some text editors for readability when nested elements are detected. Line breaks are also recommended for readability.
Note, HTML tags are case-insensitive, but it is best practice to type them in lowercase, for readability.
Stay tuned for part 3, where we dive into more HTML tags!
Check Your Understanding (2 Activities)
Relevant Vocabulary
| Term | Definition |
|---|---|
| Element | The combination of the start tag, end tag and other attributes contained within the tag. |
| End tag | Ends a set of instructions to the browser. |
| Nesting | A concept of hierarchically arranging HTML elements within elements of higher importance. |
| Start tag | Begins the instructions to the browser. |
| Tag | The foundational instructional element in HTML. Sends rendering instructions to the browser. |