Introduction
- Why “Crash Course”? Quick, dense, foundational knowledge for beginners.
- What’s possible with just HTML
HTML (The Structure)
- What HTML is: HyperText Markup Language.
- The “skeleton” of the webpage.
- Just like a skeleton is made up of bones, HTML is made up of tags.
- Each tag can roughly be equated to a bone.
- Tags explained
- Tags are created by using a less than symbol
< followed by a tag name, which is a word or letter <img>, ended by a greater than symbol > - Some tags close themselves, meanwhile others need a closing tag.
- Closing tags
- To close a tag, we create another tag just like we did before, but we use a forward slash
/ before the tag name. - So for example, a paragraph is started using a p tag
<p> the text of the paragraph goes right after the <p> tag, and once the paragarph is done we close it using a closing p tag </p>
- Self-closing tags
- Self-closing tags do not need to be paired with a closing tag.
- They can still be ended with a forward slash, placed after the tag name (with a space in between), however, in HTML 5 we don’t need to add this forward slash
/ - Before HTML 5:
<img src=”” /> - HTML 5:
<img src=”” >
- Common tags and their purpose:
<html>, <head>, <body>- Headings
<h1> through <h6> - Paragraph
<p> - Links
<a> - Images
<img> - Lists
<ul>, <ol>, <li>
- Attributes (
href, src, alt).- Attributes add functionality and information to HTML tags
- For example, a basic link uses an
<a> tag, the href=”” points the link to the place you want the link to go to.
- Custom attributes (
data-*)- You can even create your own custom attributes accessible to things like JavaScript where it can set, modify, and even delete attribute values for programmatic functions (this likely goes outside the basics)
- Final Basic Note: The order of your HTML matters!
- The browser reads the HTML top to bottom, so your HTML document structure is important! If you put your footer on lines 1-5 and then your main body content on lines 6-10, your main body will appear below the footer.
- Semantic HTML basics: why
<nav> is better than just a <div>.- A common issue with HTML is that the <div> tag gets used for everything because it’s easy - it can be used for everything from navbar and footers, through content boxes
- However, there are specific HTML tags that are designed to be used for specific functions. For example, the
<nav> tag is supposed to be used to create navbars. - If we go back to the skeleton example, let’s take a scenario in which you’ve broken your arm and you go to the doctor, but instead of saying “I’ve broken my arm” you say “I’ve broken my bone”
- To the doctor, this could mean that a rib is broken, your skull is cracked, your finger snapped… so now they have a longer diagnostic procedure, dragging down efficiency like crazy
- Semantic HTML helps with efficiency as well, for programs that understand the underlying HTML
- For example, screen reads for accessibility reasons can get a much better context on what the layout of your page is when you use the proper semantic HTML tags
- In fact, we have a full semantic HTML episode that you can find in the show notes below, but we did not cover the SEO benefits in that episode
- Final Basic Note: The order of your HTML matters!
- The browser reads the HTML top to bottom, so your HTML document structure is important! If you put your footer on lines 1-5 and then your main body content on lines 6-10, your main body will appear below the footer.
HTML + SEO
HTML is often seen as a throwaway skill that’s “easy” but in reality, the cleanliness and structure of your HTML is crucial to SEO. This part of the crash course is probably a little more advanced than “absolute basics” so if you’re struggling just to understand HTML in its basic form, don’t be discouraged. If you just listen to what we say in this segment and generally understand it then that’s good enough. Focus on learning what HTML is and how it works, then you can worry about this more advanced stuff. I’d roughly say that you can likely move onto other skills too (ie CSS) before really diving into the SEO benefits of HTML - the idea here is that if you know that HTML is important you won’t just think it’s a throwaway skill - clean and proper HTML can have huge SEO benefits.
- Search engines read HTML to understand your site.
- Importance of semantic elements for content hierarchy.
- Right off the hop, the most important SEO tags (in my opinion) are proper heading hierarchy (
<h1> - <h6>)
<title> and <meta description> tags → critical for search results.- These are “presented” to Google and other search engines as
- Anchor text in
<a> → tells search engines what the linked page is about.- This is the text between the opening and closing
<a> tags
alt attributes for images → used in image search + accessibility.- Structured data (Schema.org) → added via attributes or
<script> in head.- Helps define what pages are (ie podcast episodes, blog posts, etc.)
- You can define specifics that may be difficult for a crawler to figure out from the page itself (ie for a podcast episode you can clearly define the episode number, the episode file link, description, release date, and much more)
- Clean HTML (no broken tags, proper nesting) helps with crawlability.
Conclusion
- Learn HTML, what is is and how it works.
- Keep in mind that HTML is not a throwaway skill - learning good and clean HTML does help SEO
- Don’t get stuck in the weeds of SEO in your learning journey - if you just listen and generally understand at a high level what we’ve discussed in the SEO part you’re already ahead of the race as it will influence your HTML code for the better.
Links
How to support the show
Patreon
Prices subject to change and are listed in USD
- Support the show from as little as ~$1/month
- Get a shoutout at the end of the episode (while supplies last) for just ~$3/month
- Help support the HTML All The Things Podcast: Click Here
Scrimba Discount - Coding Courses!
Learn to code using Scrimba with their interactive follow-along code editor.
Join their exclusive discord communities and network to find your first job!
Use our affiliate link for a 20% discount!!
- Click the link to take you to the Scrimba site
- A pop-up should appear on your screen with the discount amount and instructions on how to claim it
- Discount is for new accounts only
We receive a monetary kickback if you use our affiliate link and make a purchase.
