
In this lecture, we’re going to cover HTML basics.
If you haven’t setup your computer for web development already, check out my set up post here.
What is HTML?
HTML is the structure & content of the webpage.
This includes the words, buttons, images, lists, forms and more.
It does not include styling like padding, sizing, grids, margins, fonts, etc.
Here’s a quick video to visualize:
Building Your First Website
We’ll be writing our code in the text editor Atom – it works with Mac, Windows & Linux.
Every page on the web is encapsulated by HTML tags.
Build a HTML website from scratch by following this video:
HTML Tags
Let’s do a deep dive into the basic HTML tags.
Body Tag
Anything visible on the screen should be enclosed inside a body tag. Otherwise, you could run into some unexpected bugs on some browsers.
So let’s fix our website up to this:
See the Pen Body Tag by Eddy Chung (@rising_block) on CodePen.
Remember to save your file in Atom & refresh your page in your browser after every change.
HEADINGS
There are 6 heading tags in HTML. They go from <h1> all the way to <h6>. H1 is the largest header, think of it as the page title. H2 is the subtitle and so on for h3, h4, h5, h6.
Try adding these headers to your website:
See the Pen Headers by Eddy Chung (@rising_block) on CodePen.
Divs
Dividers or divs separate your page into different sections. They act like containers to group together html elements.
By themselves, they don’t have any visual effect.
Divs can contain any kind or combination of HTML elements. I would say divs are the most used element in HTML.
Let’s modify our website to include some divs.
See the Pen Divs by Eddy Chung (@rising_block) on CodePen.
Notice how the spacing of our HTML file now. We do this so it’s easy to read and we can easily tell what’s inside each div. It is recommended you do the same. Atom even has a beautify plugin to do this for you automatically.
You may think this kind of useless, the website looks the exact same. So I’m going to cheat a little and add some background color so you can visually see why this would be important.
See the Pen Divs Visually by Eddy Chung (@rising_block) on CodePen.
Don’t worry too much about the colors right now – I’ll be teaching you that in the CSS lectures.
The main takeaway is that divs allow us to break our web page into different sections.
Paragraphs
Paragraphs can be created by using the <p> tag. They have some space before and after – like a paragraph in word document.
Try adding some paragraphs to your website.
See the Pen Paragraphs by Eddy Chung (@rising_block) on CodePen.
SPANS
Spans are inline elements, unlike paragraphs there is no space before and after them.
It’s used to group elements inline – kind of like an inline div. There is no visual representation of a span by itself.
Try it out:
See the Pen Span by Eddy Chung (@rising_block) on CodePen.
Like the div, I’m going to cheat a bit and add a background color so you can “see” the span.
See the Pen Span with color by Eddy Chung (@rising_block) on CodePen.
Don’t worry, we’ll be covering how to add colors soon.
Bold
The bold tag is a simple <b>. It makes text bold.
See the Pen Bold by Eddy Chung (@rising_block) on CodePen.
Italics
The italics tag is a simple <i>. Makes text italics.
See the Pen Italics by Eddy Chung (@rising_block) on CodePen.
Line break
The line break tag is a <br/>. This adds a new line. This is a special tag because it is “self-closing”. The opening tag and the closing tag are the same! That’s why we have the slash after the “br”.
See the Pen Line break BR by Eddy Chung (@rising_block) on CodePen.
Lists
In HTML, there are two kinds of lists, ordered and unordered lists.
ordered list
You can think of ordered lists as numbered lists. Just like this:
- One
- Two
- Three
Ordered lists use the tag <ol>. Lists in HTML must contain list items, which we represent with the <li> tag.
See the Pen Ordered Lists by Eddy Chung (@rising_block) on CodePen.
unordered list
You can think of unordered lists as bullet points:
- Just
- Like
- This
Unordered lists use the tag <ul>. They also contain list items, which use the same tag <li>.
See the Pen Unordered Lists by Eddy Chung (@rising_block) on CodePen.
Multi-media
Images
They say an image is worth a thousand words…
Here’s how you add them in HTML. Use the <img> tag but then set the attribute src to the URL. I’m going to use an image I uploaded to imgur.com (a free image uploading website).
See the Pen Image example by Eddy Chung (@rising_block) on CodePen.
Notice that the image tag is also self-closing, so we add a “/” to the end of the tag (sidenote: the ‘/’ isn’t necessary for newer HTML, but recommended.)
The direct URL to the image is surrounded in quotes (“”) and set to the src with an equal sign (=).
Note that the image location must be direct and end in an image extension (for example: .jpg, .png, .gif).
To get the direct image link to any image the internet, right click it in your browser and select Copy Image Address.

Videos
To add a video, use the <video> tag. You’ll have to set the src to a direct link of the video. Also remember to add the controls attribute, otherwise the user will not be able to play the video.
See the Pen Videos by Eddy Chung (@rising_block) on CodePen.
Not all browsers support the video tag. You’ll want to change the video tag from a self-closing one to a normal tag. Inside this video tag you’ll write an error message if the browser cannot play the video.
See the Pen Videos with error message in case by Eddy Chung (@rising_block) on CodePen.
Challenge
Try making a website with all of the HTML elements listed on this page!
Make it about whatever you want, your favorite hobby or something work related.
Take a screenshot and share it on social media with #90daywebdev
Need help with anything? Email me – [email protected]
2 thoughts on “HTML Basics With Cheatsheet”