The goal for this lesson
By the end of this lesson, I want you to clearly understand the following:
- What is HTML?
- What is the Document Object Model? (DOM)
- How to write a basic webpage
At the end of the lesson, we will be building this:
Useful series links
This is part of my full-stack developer series, where you’ll go from never having written a line of code to deploying your first full-stack web application to the internet. Click this link to get an overview of what this series is all about.
- Series Table of Contents
- Github Repository — where you’ll find all the code we write in this series
- YouTube Playlist
- Series Overview
- 100 Days of Code Challenge — I highly recommend you take this on while reading this series!
- My CodeWars Profile — Follow me and I’ll follow you back. This is where we will do our coding challenges throughout the series!
Building a House
If we were building a house, we would have to follow three main steps:
- Build the structure (i.e. wood, concrete, brick, roofing, etc.)
- Set up plumbing, electric, water lines, and other functional requirements
- Make the house look good with paint, siding, and landscaping
You could live in your house with only the structure (HTML), but it wouldn’t be pleasant.
You could live in your house with only the structure (HTML) and decorative touches (CSS), but unfortunately, you’d be living in a beautiful house where the toilets don’t flush and the light switches don’t turn on the lights.
We’re skipping CSS… For now
While you might see a few lines of CSS within this lesson (where necessary for an explanation of an HTML concept), the goal is not to learn CSS in this lesson.
We have plenty to learn with HTML alone! Don’t worry though, the next lesson will be a CSS crash course :)
Remember, CSS is the styling of the web, and is not necessary to build a functional webpage.
Essential Concepts of HTML (HyperText Markup Language)
For example, HTML has a “tag” (we’ll talk more on this) called
<table> which allows you to create tables. I could spend an entire lesson teaching you how to create and style tables in HTML, but I won't because even to this day, I use a table generator like this to create my HTML tables and styles. Here's a table that I created in a few minutes using the table generator tool.
This code above is hosted on Codepen, which we will be using frequently for the next few lessons. I recommend creating a free account so you can follow along.
Instead of spending all our time on something like HTML tables, we will be spending a lot of time on things like:
- Commonly used HTML tags (
- HTML attributes (
Let’s get started!
Basic Structure of an HTML document
This is what we call “HTML boilerplate”, which just means that no matter what type of webpage you are creating, it will ALWAYS follow this structure.
While this is all that is necessary for a webpage, here is a more “real world” version of HTML boilerplate.
You don’t have to memorize this, but keep it handy.
(Optional section) For those curious, here is what some of that cryptic stuff means:
!doctype html- Tells the web browser to expect an HTML document. This is not an HTML element.
lang="en"- Tells search engines and web browsers what language this webpage is written in. Here are all the valid country codes.
charset="utf-8"- This defines what character set to use and is a very involved topic.
<html></html>- The HTML container
<head></head>- Stores all the metadata about the webpage
<title></title>- Look up at the text in your browser's tabs. The contents of this will represent the tab name.
<meta>- Nope, not
<meta></meta>. Some HTML tags are "self closing". This just defines useful information for the browser and search engines to use when viewing the webpage.
<link>- This allows you to connect your CSS stylesheet. We will be talking more about this in a future lesson.
HTML Tags and Attributes
Here is the basic structure of an HTML element.
Let’s walk through each piece here. Here is the most basic way to write HTML:
<p> is the "opening" tag that tells the webpage that we are starting an HTML element.
</p> is the "closing" tag (notice the
/) that says to the browser, "hey, I'm done with the contents of this HTML element.
There are many HTML tags available to you (you can see them all here), but as a web developer starting out, you will only need a handful of them to create beautiful webpages and apps.
Let’s add some content.
You can write whatever you want within the bounds of the two HTML tags,
</p>. Now, let's add an attribute.
class is the attribute, and
Just like you can use a variety of HTML tags, you can also use a variety of HTML attributes that will affect the behavior of that element.
We will talk about these tags shortly, but first, we need to make a few distinctions.
Tags vs. Elements
Before we get any further, let’s distinguish between a “tag” and an “element”. The terms are often used interchangeably, but I generally view an “element” as a complete unit while I think of a “tag” as a symbol.
Here’s an element:
And here’s a tag:
I will use “tag” to speak about function and “element” to speak about general structure.
Types of HTML tags
In my head, there are two levels of classification when it comes to HTML tags. This page classifies HTML tags into many more categories, but I think my simplified view will help you as a beginner.
- Normal vs. “self-closing” tags
- Container vs. Standalone tags
Normal vs. Self-Closing Tags
Most HTML tags have an “opening” and “closing” component to them. Here are some examples.
But some elements are what we call “self-closing”. Here are common examples.
You can nest elements within a normal HTML element while you cannot nest elements within a self-closing HTML element.
Container vs. Standalone tags
We know that we cannot “nest” or “embed” elements within a self-closing HTML element, but when should we be nesting HTML elements within the “normal” elements?
For example, the following HTML is valid, but should we write it this way?
NO!! While this HTML will render in the browser, it is improperly using the HTML tags. Some HTML tags such as
body are meant to have nested elements within them. Other HTML tags such as
strong are not good as "containers" for other elements.
To learn more, let’s look at a list of common HTML tags.
Common HTML Tags
To avoid being a complete redundancy of all the great resources that document HTML tags, this section will provide you with the most common HTML tags that I use as a full-stack developer.
Remember, this is not an exhaustive list, but rather the essential tags you’ll need to know. You can visit this reference page for all available tags.
The Codepen below has two sections. On the left is the HTML code. On the right is the output.
Study these common tags for a few minutes, but don’t obsess over memorizing them. We will do a challenge exercise later in this lesson that will help you apply the concepts. Additionally, you can always look them up in the documentation. I suggest opening this in Codepen for a full-screen view.
HTML is NOT case-sensitive!
As you were looking through the HTML, you might have noticed that all of the tags were written in lowercase letters. This is generally how you should write HTML, but the following code is valid too.
Line breaks do not affect HTML
You also might have noticed when looking through the code that there was a significant space between blocks of HTML code, but in the output, those same spaces did not exist.
You might think that the following code would result in a large space between the paragraphs:
Global Attributes vs. Element Attributes
Again, here is an HTML element.
class is a global attribute, but what exactly does this mean?
It would be useless for me to walk you through ALL of the possible attributes for ALL HTML tags. Instead, you need to understand how they work.
And remember when we tried to call an Array method on a String data type?
HTML attributes are very similar to these object methods. Each HTML tag (
img, etc.) has a set of element attributes that can be used on them to modify their behavior and styling. There are also a set of global attributes that can be used on ALL HTML tags.
For example, you CAN put a
src attribute on an
But you CANNOT put
src on a
It won’t throw an error, but it won’t do anything useful. This is because
src is NOT a global attribute. It is an element-specific attribute that pertains to
On the other hand, you COULD do the following:
Above, we are using the
class attribute on both elements because it is a global attribute.
Mid-Lesson Code Challenge
To check your knowledge, we are going to stop here and apply the concepts we just learned.
- Create a Codepen account for free
- Open this Pen and click “Fork” in the bottom right corner of your screen. This will allow you to edit it on your own account.
- Solve the challenge below, and tag me with your solution on Twitter @zg_dev! Be sure to use the #100DaysOfCode hashtag in your Tweet!
A few hints:
- The big text is an
- Don’t worry about the colors, borders, and text styles. They will happen automatically if you build it correctly with the HTML
- Be sure to personalize the content (including links) so you can share it! You can share it on Twitter by clicking that share link at the bottom right corner of your Codepen page.
- Here is the solution, but don’t cheat yourself! Give it a try first!
How to follow along for the rest of this tutorial
- Use Codepen’s built-in Console (bottom left corner)
- Use the browser console
Unfortunately for us, option #1 isn’t great because Codepen’s console isn’t very interactive. Option #2 isn’t great because within the Firefox browser (which we have been using in this series), the dev tools console does not properly connect with Codepen.
I hate to come up with a workaround solution for us, but here it is… I suggest using Google Chrome with your Codepen Pens. Don’t worry, these problems won’t exist once we start developing locally, but for now, it’s what we have to deal with. So open Google Chrome, and once there, you can use the dev tools to interact with your Codepen.
The Document Object Model (DOM)
And that is a shame, because a strong understanding of the DOM will go a long way in today’s world where front-end frameworks like React, Vue, and Angular dominate the web. All of these frameworks heavily leverage the DOM and the React framework even defines its own “virtual DOM”.
Why are we talking about the DOM?
While you don’t need to be an expert in this topic, you should understand what the DOM is and how it plays into the code you are writing.
So what is the DOM (Document Object Model)?
The DOM is an API for an HTML document. What is an API? Here is the definition I came up with in my post explaining APIs:
A software API can be thought of as a “user manual” that allows developers to do something useful with 3rd party software/hardware without knowing the inner-workings of that software/hardware.
In other words, you want to do something programmatically with your webpage, but you don’t want to become an expert in the low-level details of how HTML actually works (i.e. how it is actually rendered on a webpage, NOT how to write it).
I know your head is probably spinning, so let’s make this real. Take a look at the following HTML document.
And here is what it looks like (I put some basic CSS styles on it, but again, don’t worry about them YET).
Go ahead, click that button.
What does it do?
NOTHIN. IT’S USELESS.
But how do we make that happen? Somehow, we need to identify that button HTML element and tell it to do something when someone clicks it. So it’s a two-step process:
This is where the DOM comes in. As we said, the DOM is an API for accessing HTML elements.
Here’s how we identify that button:
btn. But what is
document? And what is this
querySelector() method on it?
An Analogy for Understanding the DOM (Document Object Model)
At this point, I’m assuming you kind of understand what I’m saying, but it’s still fuzzy. That’s okay.
To aid our discussion, think of an HTML document as a paper map, and think of the DOM combined with HTML as Google Maps.
There’s not much you can do with a physical, paper map. But with Google Maps (or something similar), we have unlimited potential.
With Google Maps, we can build applications like Uber because it has a pre-defined structure (API) for using it! We can “plug in” all sorts of integrations.
An HTML document is a bit boring on its own; just like a paper map. But once we define a structural representation of that HTML document (the DOM), we have unlimited possibilities!
The Structure of the DOM (HINT: it’s a tree!)
We call this a
We call this a
We call this an
And we call this an
This is just one of many “leaves” that makes up the “DOM Tree”. More on this soon.
A 10,000 Foot View of the DOM
Before we get into this, let me give you four things to consider as we explore this:
- The DOM is complex, and at your current skill level (assuming you’re following along with this series), you will NOT fully grasp it. That’s okay. Try to follow the high-level themes, but don’t stress over the details. This will not make or break your ability to program web apps.
- Each browser has a slightly different implementation of the DOM, but these differences shouldn’t matter to most web developers.
- The DOM is not a programming language, but rather a “model” or “representation” of an existing structure (HTML). It adapts a lot of OOP (Object Oriented Programming) concepts which can be confusing since we haven’t learned it yet, but just remember, each piece of the HTML can be “modeled” according to properties and methods (what it is made of and what it can do).
To understand this as a beginner, we’re going to need some visuals and work our way slowly into the details.
First, I want you to get clear on a couple of things.
- The browser itself is programmable
- Each browser tab contains exactly 1 HTML “Document” (this is technically not true if you have an
iframe, but not important here)
The Window Object
So what can that browser of yours do that you would want to program? Here are a few ideas:
- Scroll up and down through the content of a webpage
- Refresh the page
- Resize the browser window
To programmatically control the browser itself, we will use a global DOM object called
Here is the link to its official documentation that I recommend you quickly glance at.
Per the photo above, you can think of the
window object as a representation of the Browser. More specifically, it represents a single tab within your browser.
Some common Window methods
To get you started, go ahead and open up your browser dev tools and execute the following code.
window is a globally available object in the browser, you don't need to preface all of your commands with it. The following code will work the same as the code above.
Some Common Window Properties
While these are some of the common “methods” that you might be using, here are some of the common “properties” that belong to the global
window object. Feel free to type these into your dev tools Console.
Some Common Window Events
This one might be a bit confusing at first, but with the DOM, you can trigger code based on certain events. Here’s a simple example of how that works:
Above, we are creating a function and assigning it to the
onscroll event, which is one of many events you can "plug in to" on this object. Every time you scroll on the page, you will see "stop scrolling me!!" printed to your dev tools Console.
We will come back to “events”, but there are a few more things we need to learn first.
The “Document” Object
No, not the “Document Object Model”. There is a literal object called
document. Let's look at that picture again.
We just talked about the Browser, represented by the
Since the HTML document is within the browser window, it makes sense that this object is a property of the
window object. Even so, it is globally available, which means you don't have to precede it by
window. Type any of the following code into your dev tools console and it should work just fine.
While you can scroll, refresh, and manage tabs in your browser via
document object allows you to manipulate the actual contents of the webpage. Here are a few things you can do:
- Add/Remove HTML elements to the page
- Modify existing HTML elements
- Add “event listeners” to HTML elements
You can think of
document as a representation of the HTML Document. This HTML Document is structured like a tree and believe it or not, you already have a basic understanding of this! Let's look at a very simple HTML document.
When we type
document into our console, we will get an "object representation" of the HTML code we see above (please note that if you are typing this into your Codepen console, you might see something slightly different, which is because Codepen inserts additional HTML and CSS for certain functionality of their service).
Now compare the object in the photo above to something like this:
If these two “objects” look different to you, that is good, because they are different. While the HTML
This is valid:
This is NOT valid:
So… How do we access the various HTML elements that are clearly stored in the
The “DOM Tree”
Here is our HTML document from earlier with a few additions:
Here’s how we draw this in “DOM Tree” format:
li tags within the
ul tag are siblings because they are at the same level in the hierarchy. Likewise, the
p tags in the
div with the
main-body class are siblings.
Body is the child of
HTML while both of the
div nodes are children of the
The above picture is a simplified view. Each “Node” has unique characteristics, and there are a couple common node types (here’s a comprehensive list):
- Element Nodes
- Text Nodes
- Attribute Nodes
I’m going to bring back a diagram that you’ve probably seen before:
Now let’s relate this to these “Nodes”.
<p></p> tag is an "Element Node". The
class="some-class" is an "Attribute Node". The
appendChild() will take an existing node and insert it between another node.
What is the point of doing this though? I can think of a few examples:
- A user creates a calendar event and you need to display it in an existing webpage
- A user adds an item to their todo app
- A user creates a post on facebook
Now that we have covered some basics of the DOM, let’s see how we can use it. Please know that in the following example, we will not be covering everything there is to know about the DOM API. As I mentioned earlier, the goal is to get acquainted with the DOM and understand how and why it is used; not master it.
A DOM Example
Now that you have a baseline understanding of how the DOM works, let’s put it in action! Let’s take a look at that HTML document from earlier:
Let’s say our objective is to add a line of text (i.e. a
p element with some text in it) every time we click the button. Here are the steps we must take:
- Find a way to identify the
buttonHTML element using the DOM API
- Register a “click event” on this HTML element (i.e. tell it what to do when it is clicked)
- Write a function that will add a
pelement to the HTML Document (DOM) every time the button is clicked
Step 1: Identify the button
To identify an
Element type using the DOM, we have several ways of doing this. First, let me show you what the HTML looks like for the button above, because without seeing it, you cannot effectively identify it.
Let’s walk through this. The
id attribute is a global HTML attribute that can be used on ANY type of HTML element. I have assigned
btn-1 as the ID for this element, but you could have named it anything you want. You could even name it
my-btn; the same exact name given to the
class attribute, which is also a global attribute available to all HTML elements.
We as the developer have assigned this button HTML element an ID and a class, which means we have many ways to identify it. The first way we can identify this is the most generic:
In this case, we are using the
querySelector() built-in method and selecting based on the tag name (
button) of the element, which will return the first occurrence of an HTML tag in the HTML document. Here, you can learn more about this method.
There is no problem with this method in our HTML example because we only have 1 button in the entire HTML document! But if later, we added another button, this method of selection will cause us problems because we are not being specific enough. Here’s a better way to identify it.
But wait a second… When using this method, we are not returned a single element! That is because in HTML, you can assign a single class name to multiple HTML elements. Therefore, the
getElementsByClassName() will return an
HTMLCollection type, which is basically a fancy Array of
HTMLElement types. That's probably not what we're looking for here since we only want to identify a single button.
Read more about
Let’s try another way.
Ahhhh, that’s better! Unlike the
class attribute, you can only assign an ID to one element within the document. This would be INVALID:
We CANNOT have two button elements that both have an ID of
btn! So going back to our
getElementById() method, we know that we are being specific AND we will only be searching for a single HTML element within the document.
But to this point, I’ve been leading you in unnecessary directions. We could have modified our first method,
querySelector() to identify this button by its tag, class, or ID!
Notice anything in this code above? I do. It looks like we are adding in
# before the identifier to look for a class and ID respectively. Keep this in mind, you'll see it again when we start talking about CSS in the next lesson.
While all three of these methods will return us the same result for this specific HTML document, that will not always be the case. Remember, be as specific as possible when identifying HTML elements.
Below, I have written all the ways we could identify that button in our HTML. The first couple methods will return you an individual
HTMLElement while the second section will return an
HTMLCollection (again, just a fancy Array of
I know we haven’t discussed
NodeList, etc. yet, but stick with me. Now that we have our button identified, let's do something cool with it.
Step 2: Register a “click” event on the button
C’mon Zach, you’re teaching me ANOTHER new concept??
I know, this is a lot. But we are about to talk about something called “event handling”, which is a big part of programming front-end applications. “Events” are not specific to front-end programming though; you will soon learn that events are a huge part of programming in general.
In front-end programming, an “event” is something that occurs as a RESULT of a user action. Here are some examples:
- A user hovers their mouse over an HTML element (like a button)
- A user scrolls down to read the rest of an article
- A user clicks a button
- A user starts typing into an
There are many more events that can occur, but if I had to pick the most common one based on my experience, it would be a “click” event.
But how do we work with these “events”?
So far, you know how we can identify a single HTML element within the HTML document by using the DOM. Once you have identified that element, you can assign it to a variable.
Hint: within the Codepen editor for this HTML example, you can right-click and “Inspect Element” to get to the console still. I suggest doing so and following along here!
myButton now represents an Element, which has properties, methods, and events attached to it. I suggest you take a look at each for a minute or two:
There are two ways that we can register an “event listener” on this specific HTML element.
Here’s the first:
And here’s the second:
There is nothing remarkable about what we are doing here. We select an element from our HTML document using the DOM (
document.querySelector()), write a function that prints a random number to the console, and then instruct our HTML element,
myButton to respond to click events by running that function,
You might ask, how did I know to pass in
click to the
addEventListener() method, or how did I know to use
onclick in the second version?
The easiest way to learn about events is by reading through the Events Reference page on MDN. I suggest clicking around (no pun intended) in that documentation for a few minutes to get a sense of what events are available to you in the browser as a developer.
Step 3: Add an element to the HTML Document Programmatically
We’re almost there! We now just have to adapt our
respondToClick function so that it will add a new
p element to the DOM every time the button is clicked. We don't need to get fancy; let's just add a
p tag with the same text that we are currently printing to the Console.
In order to do this, we’ll need to use some DOM methods that help us modify the existing HTML document and its elements. Let’s take a look at the reference for the
document object. You can find it here.
document is the "global" object and represents the "entry point into the web page's content". Since our HTML document is rather small in this case, we can use this global object to insert
p tags at the end of the content. Here are the methods we'll need to make this happen:
Document.createElement()- Allows us to create a new
pHTML element (i.e. it will initialize something like
Document.createTextNode()- Allows us to create the text which we will insert into our new element
Node.appendChild()- Allows us to add our new "text node" to our new paragraph element (
Let’s see how it works:
And now, when we click the button, it inserts a new element to the HTML document!
You can see the working Pen here.
Navigating an HTML Document
Let’s return to the HTML document we looked at previously.
The example we just walked through was wide, but not deep. While we covered how to select, insert, and respond to events, we did not talk about techniques for parsing through an HTML document. For example, how would we…
- Select and modify the second item of the list?
- Add a fourth element to the list?
- Add another
pelement after the second
To accomplish this, we need to remember that every HTML document is just a “tree”.
Furthermore, if we connect the dots a little bit, we can recognize that “sibling” nodes in an HTML document might make sense to store in an Array. Let’s see that in action.
Selecting “children” elements
Our first task is to modify the second element of our list. To do this, I’m thinking we do the following:
- Find a way to identify the list within the HTML document
- Find a way to select an individual element from the list
Based on what we have talked about, I would not expect you to know how to do this yet. The purpose here is to get you into the “DOM mindset” and expose you to some common ways that you might use the DOM API in your projects.
So let’s start by identifying that list within our HTML document. There are MANY ways that we can do so, but I’ll start with the most logical one.
Since we only have one
ul tag in the entire document, we can use a basic query selector.
As with any tutorial, my goal is to make you self-sufficient, so the first question we should be asking here is, “what type of node is this?”. With the DOM, it is often tough to know what type of node you are dealing with whether that be a text node, attribute node, or element node. If at any point you don’t know what you’re working with, here’s how you figure it out.
You can use the
nodeType property that exists on ALL nodes. But what does
1 represent? Here's a table that tells you. In this case, we are working with an
Element. From this information, we can visit the Element documentation and take a look at some of the properties and methods available to us.
If you visit the
Element docs, you'll see that one of the available properties on an
Element node is
children. Since the
li tags are "children" to the
ul "container" tag, this seems like a property that might help us.
As you can see, it’s kind of like an Array, but not quite. Go ahead and take a look at the
HTMLCollection documentation. While here, you'll notice that there is a method called
item(), which we can pass an "array index" to get a certain element from the
Now that we have identified our element, all we have to do is modify it. In this case,
secondListItem is an
Element type, which has an editable property called
textContent. Let's use this to change the value of the second element in our list.
Awesome! We have modified the second element of HTML list.
Our next goal is to add a fourth element to our list. Remember, our
ul list is an
Element, which has properties and methods that we can use. But if you read through its documentation, you probably won't find anything that helps us here...
And this brings up a very important (but kind of confusing) concept–inheritance. Remember how I talked about how everything in the “DOM Tree” is a “node”? Well, I meant it. It doesn’t matter whether we are working with an
Text. They all "inherit" from the
Node type, which means they all can use the properties and methods on the
Node type along with their own properties and methods. This is an OOP (object-oriented programming) concept and can be quite confusing. We will learn more about this later in the series.
Anyways, since there is nothing useful to us on the
Element type, let's take at the documentation for the Node type.
It has a method called
appendChild() that will help us add that fourth list item!
Notice that the parameter it specifies,
aChild, is a node. In our case, we probably want to create another
li element, which we can do with the
If you’re really paying attention to this article closely, you might remember that when we created a new element earlier, we did something like this to add the text to the element.
This is just another way to solve the problem. You’ll learn that with the DOM and programming in general, there are ALWAYS several ways to achieve the same thing.
Adding elements between other elements
Our final objective is to add the following
p element after the first
So… What element do we need to select? The Node type has a method called insertBefore() which we can use to insert our
p element before the second
p element (hence, after the first
Here’s a problematic way to identify that second
Why is this problematic? If you try it out, you’ll realize that this selects the first
p element and ONLY the first
p element. Let's try this:
Better, but not great. This will give us all the
p elements in the entire document, including the one in the
<div class="footer"></div> element. Let's get a little bit more specific with our query.
This is much better. The
pItems variable will be a
NodeList, which is similar to
HTMLCollection which we looked at earlier. We can use the
item() method on it to select the second
Now, we just need to insert a new
p element after this selected element.
You’ll notice that the
insertBefore() method has two parameters. If you read the documentation, you'll learn that we need to call this method on the "parent element" that we want to insert the new element in. In this case, the "parent element" is
mainBody (look at the DOM Tree diagram earlier in this post). The first parameter is the element you want to insert, which is
newElem. And the second parameter is the "reference element", which represents the element you want to insert your new element before. In this case, that is
If you want to see all of this code in action, check out this Pen I made!
The DOM is Confusing
If you’re still reading, good. You’ve got the type of mind for this challenging skill we call programming. That said, you’re probably still confused with this “DOM” concept, and I don’t blame you. There is a LOT going on with the DOM and I could easily create an entire programming course on it alone. It would take weeks to cover all of the DOM interfaces, methods, properties, and events.
For that reason, we’re stopping here. My goal here was to introduce you to the DOM, so I hope I did that effectively.
As we move forward through this full-stack series, you probably won’t be working with the DOM a ton. The reason? Because front-end frameworks like Angular, React, and Vue abstract the DOM away and provide you with easier ways to manipulate it.
That does NOT mean learning the DOM is unimportant. Quite the contrary! Knowing how the DOM works and being able to use it will give you an edge on other web developers who never spent the time to learn it.
So if you don’t feel confident with the DOM, that’s okay. Keep moving forward. If you can explain the basic concept of the DOM and do super basic things with it, you are in a great spot!
A Recap of HTML
- Static HTML
- Dynamic HTML
Static HTML is what we learned in the first part of the lesson. When you write static HTML, you are basically telling your browser, “Here’s the document I want you to display, and it’s never going to change”. Static HTML is all over the web. Most blogs and writing on the web are just static HTML documents.
Writing “Semantic” HTML (the new parts)
The last thing I want to cover in this crash course on HTML is something that is not required for you at this stage in your journey, but helpful to know about.
Let’s go back to that house analogy. If HTML is the “structure” of the house, what does that include? I’m no home-builder, but to build a house, you need more than just 2x4s. You need multiple types of wood, and additionally, other materials for certain sections of the house you are building.
HTML is no different. While we could build our HTML documents with a bunch of
div elements, that is not "semantic". In other words, we are not conveying what the elements are meant to contain effectively.
There are many HTML tags that I did not show you during the first part of this post to avoid over-complicating the discussion. But from a semantic standpoint, it is “best practice” to use HTML elements that convey what the elements represent in your document.
Most of the elements I am about to show you were introduced in the HTML5 standard, which is the newest standard of HTML. Consider the following HTML document:
If we added some CSS (styling) to this HTML document, we’d have a blog page with a navigation bar at the top, a sidebar on the right, a list of blog posts in the main area, and a footer at the bottom. Here’s my golf blog as an example of the layout I’m describing.
The HTML document above is fine. It works perfectly. But as you can see, we’re using a lot of
div elements despite the fact that each section of this document has a different purpose. When I say "semantic HTML", I'm referring to this:
Can you see the difference? In the second version, I’m using the following HTML tags that we haven’t covered before:
<nav></nav>- here is the documentation
<section></section>- here is the documentation
<main></main>- here is the documentation
<article></article>- here is the documentation
<footer></footer>- here is the documentation
Furthermore, tags like
em that I introduced to you at the beginning of the post work fine, but in the new HTML5 standard, are not technically "recommended". The idea with the newest HTML standard is that each HTML tag should represent intent, not style. For example, the
section tag indicates that everything within it is part of an independent section of the webpage. You shouldn't use this tag for any other purpose.
Now if we zoom out a bit, these details that I’m introducing should not be at the top of your priority list. These are details that you’ll focus on down the road when you are trying to master your craft.
I bring them up here so that you are not surprised when you see them in another developer’s code.
Remember, the documentation is your friend! If you stumble upon something you haven’t seen before, just look it up! If you don’t know what a certain tag should be used for, read the documentation page for it!
Finally, your HTML Challenge
When you complete these challenges, be sure to share them on Twitter with the hashtag, #100DaysOfCode.
And don’t forget, we call this a “challenge” because it is very challenging. You should not be able to complete this without some additional research!
- Fork this Codepen to your account (click the “Fork” button in the bottom right corner of the browser window)
- Create this:
A “user story” is something you’ll use often in programming. It defines how a user should interact with your application and is commonly used during the requirements gathering phase of application development. Below are the user stories for this challenge.
- A user should be able to click buttons on the right side of the screen to generate a random meme, joke, quote, or riddle
- Only one piece of content should show at a time. For example, if the user clicks “Show a meme” and there is a quote showing already, the application should remove the quote and show a random meme.
- Content should be displayed under the appropriate heading (i.e. a joke should not show up under the memes heading)
- When showing a random riddle, the answer should never be revealed without the user explicitly clicking the “Reveal Riddle Answer” button on the right.
- If a user clicks “Reveal Riddle Answer” and there is no riddle, an alert should let them know they need to generate a riddle first
- If a user clicks “Reveal Riddle Answer” and the answer is already revealed, an alert should let them know that the answer is already revealed
As I said, this programming challenge is tough. You’ll need to look things up on Google. Here are some hints to help:
divelement with a unique id or class name can be a great way to establish a "container" for future content (even before that content exists)
- You might need to use the HTMLElement.hidden property for the riddles
- There is no “perfect” solution. Solve it how you think makes sense
- The starter has some code already written for you. Read it and see what it is doing! You should be able to solve this without adding any additional functions.
If you want to see how I implemented it, you can either…