This post was originally featured on debugacademy.com.
HTML is one of the first things you learn when you’re getting started in web development. There isn’t a huge learning curve or a whole bunch of confusing logic. It’s one of the main components of web development. So if you want to become a web developer, HTML is something you’ll definitely want to know.
There are hundreds of different HTML properties and special features. It can be hard to decipher what’s important and what you’ll actually be using most when creating a website. Thankfully, we covered HTML in my Debug Academy course. My instructors focused on the things that are most important for getting started. So in this post, I’m going to outline what I learned. Here is the most important HTML you need to know to start creating simple websites.
Structural Elements
A lot of HTML is about structure. The structural elements of HTML don’t affect too much of what the user sees. But it has a lot to do with how search engines and screen readers process your content. It's important that your website is accessible to all users, including those who are vision-impaired. So although structural elements may not render themselves visually, they are very important.
<!DOCTYPE html> and <html>
We start our HTML documents with <!DOCTYPE html> and <html>. These two elements tell our browser (ie. Chrome or Safari) that the code to follow will be in HTML.
<head> and <body>
The <head> of your code is where all your metadata lives. For right now, we won’t dive deeply into what metadata is and why it’s important. Basically, it is the important information your browser needs to know to display your website. But your user can’t see it. This is where you link to your CSS file and include the title of your website.
The <body> is where all of the rest of your HTML code lives. All of the HTML we’re going to discuss in this post is nested within our <body>.
<header>
We’ve already discussed this but I’ll say it again anyway. The <header> is purely structural. As the name suggests, this is where all the elements that sit at the top of your page go. A navigation bar and navigation links would be placed here.
The <header>element is not just used for your navigation bar within your <body>. You can use a <header> to group any content that goes at the top or beginning of certain elements. I've seen this done with articles, forms, and cards. In this post, we're only going to focus on using it within our <body>.
<main>
The <main> section of your HTML code is where the majority of your content lives. This is the ice cream in your ice cream sandwich. This is the patty, the cheese, and the lettuce of your Krabby patty.
Unlike <header>'s, your webpage can only have ONE <main>.
<footer>
This is the section of your content that sits at the bottom (aka foot) of your web page. Links to social media accounts and information that couldn’t fit in the <header> go here. This includes things like the Privacy Policy, Copyright information, and Terms of Use. Similar to <header>'s, <footer>'s can be used on elements other than the <body> to group content that would sit at the bottom of said element.
Here's a visual of how we would set up a page using the HTML elements we’ve learned so far.
<section>vs <div>
These two elements confuse a lot of people, from beginners to even some experienced web developers. Both of these elements are used for grouping content. The confusing part is knowing what content they should be grouping. The <section>element is fairly new to HTML in comparison to <div>’s. Some people still use <div>’s when they should be using something else. Here’s a general rule of thumb when it comes to this topic.
Think of your webpage as a book. Use <section> to group content that would go on the table of contents of your book. Ask yourself, is this a chapter in my book? If the answer is yes, wrap that content in a <section>. If the answer is no, you can probably get away with using a <div>.
Visual Content
This is where things get really exciting. Obviously, the visual content is what our users see. It’s important that we know how to use these elements and when to use them. Believe it or not, where, when, and how often some of these elements are used contributes a lot to how screen readers interpret a website’s content. If we want everyone to be able to enjoy our website, we have to keep all of these things in mind.
<h1> - <h6>
The h in <h1> - <h6> stands for header. This is not to be confused with <header>. I’m sure many of you have used these types of headers before either in Word or Google Docs. A header is just text that is bold and large. The size varies depending on which header you use, <h1> being the largest and <h6> being the smallest. Here’s a visual of what each one will look like.
<p>
The <p> is where we place our paragraphs (surprise surprise). So, yes it sounds exactly the way it looks. There’s not much to explain here.
<img>
This is our image tag. This <img> is incomplete. To actually display an image, we need to add an attribute called "src". We set "src" equal to the image's link or file path. We also need to include the "alt" attribute. This is a good accessibility practice. Your "alt" will contain a short description of your image. This is what screen readers will pick up. Using "alt" will allow vision-impaired users to have a better idea of what your image contributes to your page. In the end, your image code will look like this: <img src=”your-file-link/location” alt="short description of image">.
<a href>
We often need to link to outside information on websites we create. The <a href> allows us to do this. The “a” stands for anchor and “href” stands for hypertext reference. The “href” is an attribute like “src”. The <a> can’t do anything without it. The “href ” is set equal to the link address. All in all, your website links should be coded as follows: <a href=”www.im-a-link.com”>.
You wrap the text you would like to hyperlink with an <a href>. Make sure that your text is descriptive and not something like “Click here”. “Learn more about HTML” would be much better. We want our text to be descriptive for accessibility reasons.
<ul>, <ol> and <li>
We sometimes need to list information on websites. We use unordered lists, <ul>, and ordered lists, <ol>, to do this. An unordered list is used for information where the order is not relevant. I mostly use these for navigation bar links. On the other hand, ordered lists are used for information where the order is important. Think step-by-step guides and recipes.
<li> stands for list item. The things we want to include in our list are placed inside<li>’s and these <li>'s are placed within the <ul> or <ol>. The <li> of ordered lists are numbered and the <li> of unordered lists are marked by bullet points.
We've just learned the essential HTML for beginning your path as a web developer. But you may not really know how all this fits together. So let's clear things up and look at what all these HTML elements would look like as real code.
Conclusion
If you want to become a web developer, HTML is a great place to start. I hope this short guide on HTML will help motivate you to start creating. In the near future, I'll be posting an HTML/CSS tutorial for making a simple navigation bar. With this article as a reference, I think that a navigation bar tutorial will be really useful to a lot of you. So stay tuned. And as always, feel free to leave feedback and share with others.
I'm sure many of you are interested in CSS too. I recently created a list of some really great resources for learning and mastering CSS. Feel free to check that out.
Thanks for reading!
Top comments (0)