This is the second article in a tutorial series on learning the basics of HTML for creating websites. Click here to check out the first article if you missed it!
In this article, we’ll talk about three main topics. First, we’ll learn what a code editor is and install one to make this whole process easier, with a few different editors to choose from. Next, we’ll move on to the proper structure of an HTML document and explore the concept of formatting and arranging your HTML code with div elements. Then we’ll explore semantic HTML elements that further help with laying out our web page, with considerations for SEO.
We’ve got a lot to cover – Let’s get started!
Installing Your First Code Editor
In the first article, we used a simple text editor like Notepad or TextEdit to write some of our first HTML code. This works just fine, but only if you don’t know any better. The good news is, you’re about to know better! Let’s take a few minutes to explore Code Editors and install one.
Code Editors are like Text Editors from the first article but jacked up on steroids. Not only do they have way more features that make writing and reading code easier, but they also go even further by providing tools to help manage multiple files at once. Beyond that, they offer features and extensions that give you coding superpowers.
Visual Studio Code
For the rest of this tutorial series we’ll be showing examples and writing code in Visual Studio Code. It’s the code editor I use every day both at work and at home for website development. It’s the defacto standard for our industry at the moment and includes all the features you’re going to want as you progress forward. Here are some of the basic features you should expect in any Code Editor you decide to use, and what you’ll see in Visual Studio Code (or “vscode” for short):
Syntax Highlighting
If you spent any extra time experimenting with the HTML code from the previous article or trying the challenge exercises, you may find that it gets difficult to look through the code when everything is the same black-on-white color. Code gets massively easier to read when its various parts are highlit with different colors.
Here you see that the angle brackets in the HTML elements are all a light grey color. The names of the HTML elements are all blue, with the attributes in a lighter shade of blue. The content of the HTML elements is all white, and the background is a very dark grey color.
The goal is to make it easier to tell what’s going on in your code. Which text is content and which text is a part of a tag? Where are the attributes? And the attribute values?
Syntax highlighting in almost all Code Editors can be set with one of numerous preset colors, or customized to fit your taste. I personally like a ‘dark theme’ that has a dark background with lighter color text, others prefer a ‘light theme’ with dark text on a light background. It’s all up to you.
Line Numbers
You probably noticed that in all my direct code examples, there are line numbers along the left. Code Editors usually always provide this as a way to easily tell where code is located. It can be used to communicate with others: “Hey you got a problem on line 43!” or just a way to help you make sense of the code. There’s also usually a readout of your cursor’s current position.. like “Line 43, Column 5”. Where column 5 means that the cursor is 5 characters in from the left. Here’s my code editor (Visual Studio Code), with the line numbers and cursor position:
So many more features
Those were just the most basic things that make most Code Editors different than Text Editors. Many of them provide really cool features that vary depending on which one you use. We don’t have enough time to explain ALL of them here. Instead, here’s a little description of a few more.
- Automatic Indentation – When you start a new line between the two HTML tags, the cursor will automatically be placed at the next logical indentation… this keeps you from having to hit ‘tab, tab, tab, tab…’ to get things lined up.
- Automatic Formatting – Hitting the “Format” button will line all of your code up the way most people organize their code, this can save a ton of time from manually making everything perfect.
- Brace Matching – When you put your cursor near an angle bracket, if it has a matching open or close bracket, that matching bracket will be highlighted. Just look at the above picture.. my cursor is at a closing bracket, so it’s matching open bracket has a box around it.
- Automatic Completion – As you’re typing, the Code Editor shows a little dropdown list under your cursor with suggestions of what it thinks you might be typing. If you’d like to use a suggestion, just press the ‘tab’ button or arrow key down to select it and the Code Editor will fill in the code for you. As you’ll soon see, some Auto-Completion is better than others!
- Error Warnings – Some Code Editors are able to see when you might be typing improper or wrong code, so it’ll give you a warning with a little message, a squiggly line under your code, or by changing the Syntax Highlighting to a color like red.
- Multiple Files Open At Once – Not only do Code Editors let you open more than one file and move through them with tabs, they also let you split the view in the editor to show multiple files at once.
Many Different Code Editors
Although I suggest using Visual Studio Code, especially if you’re following along with this tutorial series, you should be aware of some other options! There are dozens of different Code Editors out there you can download and use. Some of them cost money, but many of them are free. In fact, all of the best Code Editors are free. Here’s a list with links for some of the more popular editors. Feel free to check them out:
Notepad++ – The well-rounded first step
Notepad++ is a logical first upgrade after using Windows’ Notepad text editor. It supports a huge list of programming languages, so it’s common for programmers of all different types and industries to be found using it. It provides all the standard features you’d expect from a code editor – things like auto-complete, auto-indenting, code searching, customizable UI. What makes it more unique than other editors I mention here is its ‘macro’ system, used to automate actions you want to do on the app. Some things you may not like about it include its rather dated and clunky-looking UI, the somewhat limited plug-in system makes it hard to search and find plug-ins to expand its features.
Overall, Notepad++ is a great choice as a first code editor and it’s great if you’re looking to code in multiple different languages. The thing is, we’re talking about coding websites here and there are much better options for that use. [ Download it here ]
Emacs – The classic
Emacs was my first code editor in the early 2010s, only because it’s what my first programming teacher instructed with. It’s truly a classic pioneer in the history of programming going back to the 1980s. It’s now over 35 years old and there’s even a religion based on it! Given its history, it has an extremely refined and extensive set of features, but it’s still able to keep the interface relatively simple. Like Notepad++, its controls appear rather dated, and its support for extensions. Many of the interesting things it does rely on using something it calls the ‘minibuffer’, which is sort of a command-line/terminal style text-based pane in the interface that you can type commands into.
Emacs, and other editors like it, seem to often be preferred by Linux users and people more accustomed to a text command based interaction with the computer. It’s got many, many, key-binds that make it possible to never use the mouse while in Emacs. For a beginner, or someone more accustomed to a Windows or Mac style of use, Emacs may not be the best option. It also doesn’t include all the features that other editors provide for coding websites. [ Download it here ]
Sublime Text Editor – The powerful minimalist editor
Sublime Text is probably the most visually simple of the editors on this list, so it may be the most approachable to new coders. It definitely doesn’t lack features, though. Instead, its features are more understated, accessed by key combinations, and hidden away, rather than through lots of UI buttons. So, when you’re ready to use its advanced features, you can just dig into the documentation on their website to learn more.
Their website says that Sublime is free to download and evaluate, but it costs $99 to purchase. Please recognize that I’ve been using it for years and I’ve never purchased it… Quote from their site: “Sublime Text may be downloaded and evaluated for free, however, a license must be purchased for continued use. There is currently no enforced time limit for the evaluation.” So I would say that you should use the product for free and when you can comfortably afford it – just buy a license. It’s worth it.
If you think that other code editors are just too much for you to use right now, Sublime is a great option because it appears to be just as simple as a standard text editor but gives a wide array of many more important features that you’ll discover as you use it. As you advance into learning website development, you’ll end up wanting features that Sublime doesn’t offer – like a terminal window to run npm commands. This isn’t the end of the world, but it’s something worth mentioning. [ Download it here ]
Atom – The amazing modern editor supported by Github
Atom is supported by Github, the biggest open source hosting service in the world, and they’ve added some really awesome features to this code editor. It’s extremely customizable, with all the features you’d find in other editors, but it’s got a built-in system to install and use extensions built by its community. That means the features it provides will always be improving and expanding as more packages are created. The interface is sleek and attractive, the features are all there, and it’s among the most popular code editors available right now.
What’s most important to note here is that Atom is one of the most preferred code editors for website development specifically. As you get deeper into coding websites, you’ll find that you appreciate the extra HTML/Javascript code features more and more.
I highly recommend giving Atom a try. [ Download it here ]
Repl.it – A fantastic online code editor
I understand that you might be using a school computer, or you’re at a public library, or your computer hard drive is too full from downloading memes, so you can’t install one of these code editors right now. Don’t fret! The awesome people at https://repl.it have you covered.
Repl.it is a website that provides a online code editor, free of charge! Not only does it let you write code and see your webpage in the browser, but it will also host your website Just sign up for an account there, then when you’re on your dashboard page, click the ‘New Repl’ button in the top left…
Then, select the “HTML, CSS, JS” option in the dialog window that pops up. Click the ‘Create Repl’ button after that and away you go!
If you run into trouble, Repl.it has some great documentation to help answer any questions you might have when getting started. [ View The Docs Here ]
Starting Up Visual Studio Code
Alright! Now go ahead and download/install Visual Studio Code from their website [ Download it here ] if you want to follow along with the examples in the rest of this tutorial series, and let’s learn some more about HTML!
First, open VSCode and open a New File with the File menu…
Then, just like the previous tutorial, save this new file as “index.html” in an easily accessible place like your desktop. Now you can specifically save the file as an HTML file…
Now you should have that file open in the browser, its name ‘index.html’ in the tab, the code area empty, ready to learn our next steps!
Proper HTML Document Structure
So far, we’ve only really taken a few types of HTML elements and thrown them into our HTML files. All willy-nilly like. That’s fine for your very first web pages but it’s important that now we start properly structuring our HTML code. To do this, we’ll use a few more types of HTML elements. What’s different about these is that aren’t visible on the webpage, you’ll soon see why.
This is the proper structure of a blank HTML file:
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
If you put this code into your own HTML file and view it in a web browser, you won’t see anything. These tags are all invisible on the page, but they all serve an important purpose. Let’s break it down and look at each of them:
The DOCTYPE Declaration
<!DOCTYPE html>
This first line tells the web browser two important things. It declares that all the rest of the text in the HTML document will be formatted in HTML. More specifically, it declares that this HTML will be using version 5 elements (HTML5). It’s really more of a formality, but it’s an important one! So make sure you always include this tag at the top of your HTML files. The type of this document is HTML, that’s the DOCTYPE!
The html Element
<html> ... </html>
If it wasn’t enough to tell the browser we’re using HTML with the doctype declaration… we have to go a step further with this <html> element. In the above example, <html> element starts on line 2 and ends on line 5. It tells the browser that everything nested inside this element is HTML code.
So if you think of this as a conversation with the web browser: our 1st line tells it “Hi, I’m HTML5”, our 2nd line tells it “Here’s my HTML code!”, and our 5th line says “Ok that’s all, good-bye”. The HTML element is the container for our HTML code.
Nesting Elements
Let’s consider that thought of an element being the container for other elements. This practice is incredibly common and you’ll always see HTML elements placed inside of other elements. Doing this is called nesting. We nest one or more elements inside of others.
It’s common to refer to the ‘top-level’ element as the parent and all the elements inside it of it as child elements. Further, consider that a child element can also be the parent of other elements nested deeper inside of it. Doing this creates a hierarchy, a family tree, of elements. Take a few moments to study this diagram, it illustrates a set of example elements on the right and their parent/child relationship to one another on the left.
In the diagram, it should be understood that element1 has two children. These children are element2 and element3. While element2 has no children, element3 has two children of its own: element4 and element5. While elements can have an unlimited number of children, they can only have one parent. So it would be incorrect to think element1 is the parent of element4 or element5, even though they are nested into a lower level.
The head Element
<head></head>
The first element nested inside the HTML element is the <head> element. You can think of the head element like you would the first few pages of most books. Books will usually have a title page, a page with publisher and copyright information, and maybe a page with a little information on the author. This is meta information. Details about the book, but not containing content of the book itself. That’s exactly what the HTML head element is used for. By the end of this article, we’ll see a few new types of HTML elements that should be nested in the head element to provide some meta information about the page.
The body Element
<body></body>
Ok! We’ve finally gotten to the start of the show. The <body> element. The body of our HTML document. This element contains all the visible content for our webpage. It’s where all the code you learned in the previous article should be put. If you want it to be rendered onto your webpage for the world to see, it should go in the body.
You might think of our HTML document as a letter you get in the mail. It’s inside an envelope, that’s the DOCTYPE and HTML elements. It’s got a heading section with information about it like To/From address and some company letterhead, that’s the <head> element. Then it’s got the actual content of the letter, that’s the <body> element.
Using The HTML Structure
Let’s put this new knowledge to some use in our “index.html” file by making an HTML skeleton! Add the following code to your HTML document by typing it out and making sure the <head> and <body> tags are indented correctly:
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
The title Element
The <title> element describes the title of our web page and whatever content we put in the <title> will show up in the browser’s tab when our webpage is opened. It should always only be placed (or nested) into the <head> element.
<!DOCTYPE html>
<html>
<head>
<title>Bob's Radical Adventures</title>
</head>
<body></body>
</html>
When you add the title to your HTML skeleton, like in the example, and open the web page in your browser, you’ll see that title appear in the page’s browser tab:
Aside from just controlling what shows up in the page’s browser tab, the <title> element helps a couple of other things about our website too. These are more advanced topics, but just keep these concepts in mind for later.
Page Title Can Help SEO
The acronym SEO stands for Search Engine Optimization, which basically means making your website more visible in search results on search engines like Google, Bing, StartPage, or DuckDuckGo. It’s incredibly important to concentrate on learning how to improve your website’s SEO because the better it ranks on search engines, the more traffic your website will get. If you’re creating an online store website, that means getting more customers! We’ll talk about more tips for better SEO later.
The page title is the phrase that shows as the main link for the website’s search engine entry.
Page Title Can Help Accessibility
The term Accessibility refers to how useable your website is to people with disabilities. For instance, most of us are blessed with the gift of working eye-sight, but there are many people out there that aren’t so lucky. Visually impaired people still need to use the internet and they do so with tools called screen readers. Tools like this use parts of our page, like our page’s title, to communicate what’s on the page to people with disabilities. Being mindful of the content in the web page’s title element can improve these visitors’ experience.
The div Element
The <div> element is used to group related elements in your <body> element together and divide the page into different regions. Divs don’t have any visual effect on the appearance of your page by default, but they do provide a container that we can change the appearance of with our CSS code – we’ll talk about that in the next article. For now, let’s consider that <div> elements basically represent anything you decide. In the most basic use, <div> elements help us as coders organize and structure our web page.
It’s important to learn about <div> elements, but keep in mind that we’ll be using the code from this section to learn an even better way to layout the page with Semantic Elements in the next section.
Using div Elements To Organize Our Code
Let’s look at an example from the previous article in this series, but now using the HTML skeleton. We’ve got a bunch of different tags in our <body> element and it can be hard to tell which tags are meant to represent the different parts of our page:
<!DOCTYPE html>
<html>
<head>
<title>Bob's Tractor Store</title>
</head>
<body>
<h1>Bob's Tractor Store</h1>
<h2>"The best tractors in town!"</h2>
<p>
Bob's Tractor Store is a small family owned business that
provides quality tractors at rock bottom prices
</p>
<h3>What makes our tractors the best?</h3>
<p>
The tractors we sell are state of the art farming machines.
They're all painted green, which is the best color available,
and they guaranteed to never break down!
</p>
<h3>What do our customers say?</h3>
<h5>Cindy Stevenson says:</h5>
<p>"We just love the tractor we bought at Bob's, it's the best!</p>
<h5>Grumpy Joe says:</h5>
<p>"Get off my lawn, ya no good hippie!</p>
<h3>Contact Us</h3>
<p>Bob's Tractor Store</p>
<p>123 Fake Street</p>
<p>Farmville, ZB 99999</p>
<h5>(123) 456-7890</h5>
</body>
</html>
None of the HTML is separated or labeled for its purpose, so it’s not easy to find things
By using <div> elements, we can separate, and better organize this code. First, we should decide how it should be organized. That might be easier if we had some terms to label what we organize. Thankfully, we can usually split up our <body>’s HTML code into some commonly used words that you may have heard before. These words are things like “Header”, “Sections”, and “Footer”. The “Header” is at the top portion of the page, the “Footer” is at the bottom portion of the page, and the “Sections” are different areas between the header and footer that contain similar content. Let’s put each of those portions into <div> elements:
...
<body>
<div>
<h1>Bob's Tractor Store</h1>
<h2>"The best tractors in town!"</h2>
</div>
<div>
<p>
Bob's Tractor Store is a small family owned business that
provides quality tractors at rock bottom prices
</p>
</div>
<div>
<h3>What makes our tractors the best?</h3>
<p>
The tractors we sell are state of the art farming machines.
They're all painted green, which is the best color available,
and they guaranteed to never break down!
</p>
</div>
<div>
<h3>What do our customers say?</h3>
<h5>Cindy Stevenson says:</h5>
<p>"We just love the tractor we bought at Bob's, it's the best!</p>
<h5>Grumpy Joe says:</h5>
<p>"Get off my lawn, ya no good hippie!</p>
</div>
<div>
<h3>Contact Us</h3>
<p>Bob's Tractor Store</p>
<p>123 Fake Street</p>
<p>Farmville, ZB 99999</p>
<h5>(123) 456-7890</h5>
</div>
<div>
<p>Copyright 2021 - Bob Corp.
</div>
</body>
...
In the example code above, the first div element can be considered the ‘header’ of the page, containing the business name and slogan. The following three div elements can be considered sections, each with its own purpose. The first section gives a simple description of what the business is, the second section presents what makes their product the best choice, the third section displays some customer reviews, and the fourth div provides contact information. By starting to organize the page, it was clear that we were missing something! The final div you see in the example is the ‘footer’, it contains some copyright information so Bob doesn’t have his valuable copyright material infringed upon!
Structuring and organizing our HTML this way can help make the code more legible, while also giving us clues to things we may be missing or haven’t considered yet.
Labeling Our div Elements With Attributes
We can now go ahead and label our <div> elements so we can tell what each of them is meant to represent. If you recall, in the previous article we used the href attribute to create a link. To do this we used the ‘href’ attribute name and the link URL for the attribute value. This time we’ll use the id and class attributes to label our div elements with meaningful values.
The id Attribute
The id attribute is used to create a unique identifier for the element it’s added to. The value used with the id attribute must be unique and only be used once on the same page. The idea is that when you give an HTML element an id attribute and value, you can always depend on that id value referring to that specific HTML element. This is very important for future topics we’ll get to later, like CSS styling and using Javascript.
<div id="main-header"></div>
We might give our first <div> element the id of “main-header” so that it’s clear this div element is the main header of the page. For the attribute’s value, it’s generally suggested to use only letters, digits, underscores ( _ ), dashes ( – ), and periods ( . ); never use spaces and avoid using other symbols like *&^%#. It’s very common to use “kabob-case”, which means separating words with dashes instead of spaces: “like-this-dude”, instead of “like this dude”
Let’s add id attributes to each div, giving them a value that describes what they are:
...
<body>
<div id="main-header">
<h1>Bob's Tractor Store</h1>
<h2>"The best tractors in town!"</h2>
</div>
<div id="intro">
<p>
Bob's Tractor Store is a small family owned business that
provides quality tractors at rock bottom prices
</p>
</div>
<div id="promotional">
<h3>What makes our tractors the best?</h3>
<p>
The tractors we sell are state of the art farming machines.
They're all painted green, which is the best color available,
and they guaranteed to never break down!
</p>
</div>
<div id="reviews">
<h3>What do our customers say?</h3>
<h5>Cindy Stevenson says:</h5>
<p>"We just love the tractor we bought at Bob's, it's the best!</p>
<h5>Grumpy Joe says:</h5>
<p>"Get off my lawn, ya no good hippie!</p>
</div>
<div id="contact">
<h3>Contact Us</h3>
<p>Bob's Tractor Store</p>
<p>123 Fake Street</p>
<p>Farmville, ZB 99999</p>
<h5>(123) 456-7890</h5>
</div>
<div id="main-footer">
<p>Copyright 2021 - Bob Corp.
</div>
</body>
...
Now that we’ve added id attributes to each div with values that describe their purpose, it’s easier to look through the code and quickly find a specific section. Later, these id attributes will become much more useful because our CSS and JavaScript code will be able to find these elements too.
The class Attribute
The class attribute is used to classify an element as a certain type or in a specific category of elements. Where the id attribute must be unique, the class attribute doesn’t need to be unique. In fact, the class attribute is most useful when you assign all the HTML elements that can be classified in the same category with the same class value.
For instance, we can use the “section” class value to describe a page section:
<div class="section"></div>
We can also use multiple class names at once, separated by spaces. This will become more useful when we start using CSS and JavaScript. For example, a page section with a fancy appearance that is placed inside of another element could have the class values ‘section’, ‘fancy’, and ‘inner’. For now, we won’t need to do this, but just know it’s an option.
<div class="section fancy inner"></div>
Let’s add that ‘section’ class value to each of the “intro”, “promotional”, “reviews”, and “contact” div elements. They can all be considered a ‘section’ of our page and serve a similar purpose.
We can also give the “main-header” div a class value of “header” and “main-footer” div a class value of “footer”. This is because we might want to create other headers and footers on other pages throughout the website that may have other id values but can still be categorized in the same class as this main header and footer.
...
<body>
<div id="main-header" class="header">
<h1>Bob's Tractor Store</h1>
<h2>"The best tractors in town!"</h2>
</div>
<div id="intro" class="section">
<p>
Bob's Tractor Store is a small family owned business that
provides quality tractors at rock bottom prices
</p>
</div>
<div id="promotional" class="section">
<h3>What makes our tractors the best?</h3>
<p>
The tractors we sell are state of the art farming machines.
They're all painted green, which is the best color available,
and they guaranteed to never break down!
</p>
</div>
<div id="reviews" class="section">
<h3>What do our customers say?</h3>
<h5>Cindy Stevenson says:</h5>
<p>"We just love the tractor we bought at Bob's, it's the best!</p>
<h5>Grumpy Joe says:</h5>
<p>"Get off my lawn, ya no good hippie!</p>
</div>
<div id="contact" class="section">
<h3>Contact Us</h3>
<p>Bob's Tractor Store</p>
<p>123 Fake Street</p>
<p>Farmville, ZB 99999</p>
<h5>(123) 456-7890</h5>
</div>
<div id="main-footer" class="footer">
<p>Copyright 2021 - Bob Corp.
</div>
</body>
...
Some Problems With This Approach
For many years, this was the best way to ‘semantically’ layout a page – that is, layout a page with labels that give each part some meaning. If you eventually work on an older website or work on someone else’s code – you may still see it done this way. However, this isn’t usually the best choice for laying out an entirely new web page in 2021 or after.
Note: It’s still very important that you know what <div> elements are, as well as becoming aware of the id and class attributes. You will use these constantly when working on a website for a variety of other reasons.
So, let’s talk about what the problem is in this approach and then we can explore a more updated standard way to organize and layout our webpage.
Here’s the problem. The id and class values can be named anything. There are only a few limitations in the characters used in the name, but beyond that – it’s all your choice. Here are a few different examples that could possibly mean the same thing:
<div id="main" class="header"></div>
<div id="heading"></div>
<div id="main-head"></div>
So while all three of the <div> elements above can be considered as the “header” of the page; the freedom to use either an id or a class or both, and use a variety of words that are synonyms to “header” may eventually lead to different names that don’t match up and result in confusion as you or others work on your web page.
As mentioned earlier in this article, search engines and people with disabilities use automatic tools to interpret the HTML code on our web page for better search listings and better use with screen readers. If our <div> elements all contain inconsistent id and class attribute values – things can go wrong for these uses too.
Instead, in 2014, HTML was updated with a new set of over a dozen different elements called Semantic Elements. The primary purpose of these elements is to do what we’ve been discussing here – organizing and laying out our web page – in a better way, with considerations for SEO (search engine optimization) and Accessibility (helping people with disabilities).
In the next section, we’ll learn all the basics of using Semantic Elements.
Semantic Elements
The Semantic Elements were specifically added to HTML5 as a way to assign meaningful labels to the various regions of our code that contain related elements. Just like <div> elements, they’re added inside of the <body> element, with the elements we’d like to organize nested inside of them. Also like <div> elements, they don’t display any visual changes to the web page in the browser (but we’ll use them to do that in the next article, I promise!)
There are more than a dozen semantic elements, some of which could be used interchangeably. Here’s a shortlist of the ones we’ll focus on for now:
<header>: Contains the content at the top of the page that usually contains the website name and/or logo.
<nav>: Contains the page’s navigational links to access other pages on the website. It is often placed inside the <header> or <footer>.
<main>: Contains the main content of the page, usually placed between the <header> and the <footer>, with multiple other semantic elements nested inside.
<section>: Contains the content for one section of the main content on the page. Defined as a thematic grouping of content
<article>: Similar to a <section>, except the content of an <article> element should be individually reusable or able to stand on its own. Like the text that makes up this article. It could be placed on another website without having to rewrite it to have it make sense there.
<aside>: Contains content that isn’t directly related to the specific content on the page. It may contain alternate links to other places on the website or general information. A good example is the sidebar on this website that has “Recent Posts”, “Recent Comments”, and “Archive” to jump to other articles quickly.
<footer>: Contains page’s content at the bottom of the page. It often links to general information pages like a legal statement page, a privacy policy, or other company-related pages that make lawyers happy. It might also contain a more expanded set of navigation lists to various pages on the site arranged by category. At the very least, it contains the copyright statement for the website and extra fine-print information like “warning: reading this website may cause excessive smiles and laughter”.
Using Semantic Elements On Our Page
Let’s see what all of these elements look like in action on our page. We just need to replace each <div> element with its semantic counterpart. We’ll nest our sections into a <main> element that spans between the header and the footer.
...
<body>
<header>
<h1>Bob's Tractor Store</h1>
<h2>"The best tractors in town!"</h2>
</header>
<main>
<section id="intro">
<p>
Bob's Tractor Store is a small family owned business that
provides quality tractors at rock bottom prices
</p>
</section>
<section id="promotional">
<h3>What makes our tractors the best?</h3>
<p>
The tractors we sell are state of the art farming machines.
They're all painted green, which is the best color available,
and they guaranteed to never break down!
</p>
</section>
<section id="reviews">
<h3>What do our customers say?</h3>
<h5>Cindy Stevenson says:</h5>
<p>"We just love the tractor we bought at Bob's, it's the best!</p>
<h5>Grumpy Joe says:</h5>
<p>"Get off my lawn, ya no good hippie!</p>
</section>
<section id="contact">
<h3>Contact Us</h3>
<p>Bob's Tractor Store</p>
<p>123 Fake Street</p>
<p>Farmville, ZB 99999</p>
<h5>(123) 456-7890</h5>
</section>
</main>
<footer>
<p>Copyright 2021 - Bob Corp.
</footer>
</body>
...
Keep in mind, we can also use <div> elements to further organize the code inside of these semantic elements. For instance, we could nest the existing code in our <header> into a div and add a <nav> element after it that contains some links to other pages on the website.
...
<header>
<div id="main-logo">
<h1>Bob's Tractor Store</h1>
<h2>"The best tractors in town!"</h2>
</div>
<nav>
<a href="./products.html">Products</a>
<a href="./locations.html">Locations</a>
<a href="./gift-cards.html">Gift Cards</a>
<a href="./contact-us.html">Contact Us</a>
</nav>
</header>
...
Benefits Of Using Semantic Elements
Benefits to you, the web developer: These semantic elements make it easier to layout web pages with a standard set of commonly used regions, without having to remember all the id and class values you used on all the <div> elements on all the pages of your website. They also make your code easier to read and find specific areas of the page in the code
Benefits in Accessibility: The screen readers and other assistive tools that people with disabilities browse the internet with are relying on our code to make logical, structured sense. Using these semantic elements very clearly define each portion of the page so that they are more easily understood this way.
Benefits in Search Engine Optimization: Search engines discover your web pages, examine the code in them, and rank the search listing for your web page based on how well it’s structured and how easy it is to understand what your website is about. Using semantic elements helps this process tremendously, resulting in your page being ranked higher and listed closer to the top of the results.
Semantic Element Diagram
The real use and importance of these semantic elements extend beyond simply organizing our code. These elements play a major role in arranging the visual layout of our web pages. You’ve seen different page layouts all over the internet that use these elements, here’s an example to help you picture how they might be arranged:
The thing is, we haven’t talked about just how to change the size, position, and appearance of our HTML elements. In the next article, we’ll do just that! By starting to learn how to write in-line styles and CSS code our web pages will actually start to look like the real deal.
Some Next Steps
Practice with experiments and exercises
Remember, the most important part of learning how to code is PRACTICE!!
There’s a lot to experiment with from this article. Multiple code editor programs that you can install and try working with. Two new sets of HTML elements that structure and organize your pages properly, and a couple of really commonly used attributes – id and class that will become very important. Here are a couple of sets of ideas for your practice:
Code Editors
- This time while practicing, make sure you use at least two or three different code editors that were mentioned here. Who knows, you might find that you like one more than the others.
- While using the code editors, try to see if you can identify and use some of the features that were mentioned in this article:
- See if the editor will create a closing tag for you automatically when you make an opening tag.
- Try to get it to automatically indent your code, or write it a few elements all on one line and get it to automatically format them for you.
- Try some of the auto-completion features and accept it’s suggestions.
- Write some code that isn’t quite right and see if it will give you error warnings.
- Create a new folder, add a few different HTML files in the folder, open the folder in the code editor and see how the Explorer works (CTRL+Shift+E in Visual Studio Code)
Structure
- Practice creating a couple web pages with the proper HTML structure. Include the Doctype, html, head, and body elements. Nest the head and body elements inside the html element. Nest the title element in the head element. Try to commit this structure to memory, it’s used on every web page you’ll ever code!
- Add some of the elements we discussed in the previous article to the body tag – headings (h1, h2, h3.. etc), some paragraphs, some links. Then nest them into some div elements. Try out some weird ideas like putting a div element in an h3 element and see what happens. Maybe nothing, but who knows?
- Practice using all the semantic elements we discussed and arrange them in a different order. Try to commit all these semantic elements to memory, they’re used really often.
- Try adding div elements inside some of the semantic elements, and add some headings or paragraphs inside and outside the div elements. Experiment with different configurations. Practice typing them out and changing them around.
- Try adding id and class attributes to all the different types of elements we’ve covered so far. Try giving a class attribute multiple values seperated by spaces.
Challenge Exercise
The return of the challenge exercise! If you completed the challenge in the previous article, you’ll just need to update the pages with what we covered in this tutorial. If you haven’t started the project outlined in the previous article, maybe try giving it a shot now. This time, you can incorporate the Proper HTML Structure and Semantic Elements on the pages. Here’s the updated project description:
Think of a company you know or make up a fake company, it could be a well-known brand like “Nike shoes” or “Gibson guitars”… or maybe a fictitious company like “Spacely’s Sprockets” or “Jimbob Jeans”. Create a 5-page website for that company that includes the following pages with some content in it like this:
- Create a folder with the name of the website you intend to create (like nike.com or jimbob.org) in an accessible place like your desktop
- Open your code editor, then open the folder you just created ( in vscode its located at: “File” menu -> “Open Folder…” option )
- Index Page: Create a file named ‘index.html’ in your project folder using your code editor (hint: there’s a ‘New File’ button in the Explorer of vscode, and it’s an option in the file menu). Then, in the ‘index.html’ file:
- Add the ‘Proper HTML Structure’, like the doctype, html, head, and body elements. Add the title element, and add the semantic elements to the body.
- In each of the semantic elements, add heading elements and paragraph elements for each region of the page – Header, a few different Sections, and the Footer. Try to organize them in a way similar to the examples in this tutorial.
- Add the Nav element where you think it should go and give it some anchor elements to create links to 5 other web pages: News, About, Contact, Products, Events
- News Page: Create a new file in your project folder named ‘news.html’, then Copy/Paste the code from your Index page into it.
- Change each section element in this file to to be article elements.
- In each article element, give it an h2 element for the article’s title, a paragraph element with a short preview text for the article’s content.
- About Page: Again, create a new file in your project folder named ‘about.html’, then Copy/Paste the code from your Index or News page into it.
- Change the contents of the main element to contain just one section, give it a heading element that indicates that this page is about the company, add a few paragraphs that describe the history of the company and maybe some information about how good for the environment the company is .. or something? Have fun.
- Contact Page: You know the deal now, create the file, name it ‘contact.html’, Copy/Paste in the code from one of the other pages.
- In one section element, add a heading that indicates what page this is and a paragraph that describes how super excited the company is to hear from their customers.
- In another section, add the company’s address, phone number, and a contact email.
- Products Page: New file, name it ‘products.html’, copy/paste in code.
- In one section, add a few article elements. In those article elements, add a heading with a different product name in each and a paragraph that describes each product.
- Each product should have a link that reads something like ‘Buy Now’ to buy the product. The link doesn’t need to have a URL in its href attribute yet.
- Events Page: By now you should know what to do… ‘events.html’
- Try to figure this one out on your own. We need some events listed out. Make sure you use semantic elements to organize them. We need to know what the event is called and a what’s going to happen there. Oh, and we need to buy tickets for each one but we’ll set up the ticket purchase pages later.
Getting through this Challenge Exercise means you’re even closer to finishing the final project for this tutorial series. We’ll keep adding in what we learn in each article like this until it’s a full-on bonafide website, so try to get at least some of it started! We won’t be using any more new tools (like the code editor) in the next articles, and we’ve got the foundation in place for the final project. We’ll just be improving these pages more and more as we learn new concepts!
Further Study References
We couldn’t include everything about each of the topics in this article (it’s already really long as it is). The goal here is to get you started in a knowledgeable direction. So it’s important to take what you learned here and check out other learning resources, find more information and explore. In the previous article, you’ll find links to five incredibly amazingly fantastically informative websites to learn more about HTML and website development, with a description for each. Keep browsing around those sites and see what you can find for yourself!
FreeCodeCamp.org | w3schools.com | developer.mozilla.org | stackoverflow.com | Codecademy.com
Here are some more specific links to the topics we covered in this article:
- Editors
- Wikipedia’s Comparison of Text Editors – https://en.wikipedia.org/wiki/Comparison_of_text_editors
- SoftwareTestingHelp: Top 15 Best Code Editors – https://www.softwaretestinghelp.com/best-code-editor/
- Proper HTML Document Structure
- W3Schools DOCTYPE declaration reference – https://www.w3schools.com/tags/tag_doctype.asp
- W3Schools <html> tag reference – https://www.w3schools.com/tags/tag_html.asp
- W3Schools <head> tag reference – https://www.w3schools.com/tags/tag_head.asp
- W3Schools <body> tag reference – https://www.w3schools.com/tags/tag_body.asp
- Using The HTML Structure
- W3Schools <title> tag reference – https://www.w3schools.com/tags/tag_title.asp
- W3Schools <div> tag reference – https://www.w3schools.com/tags/tag_div.asp
- MDN <div> tag reference – https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
- MDN id attribute reference – https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
- MDN class attribute reference – https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class
- Semantic Elements
- FreeCodeCamp ‘Semantic HTML5 Elements Explained’ – https://www.freecodecamp.org/news/semantic-html5-elements/
- Semrush ‘HTML5 Semantic Tags: What They Are and How to Use Them!’ – https://www.semrush.com/blog/semantic-html5-guide/
Wrap Up
In this article, we talked about Code Editors and how they help make writing code easier, then we talked about Structuring and Organizing our code, here’s the review:
- Installing Your First Code Editor – Visual Studio Code : We explained that using a Code Editor to work on our code provides a better experience. We introduced the Code Editor we’ll be using in the examples for the rest of the series.
- Code Editor Features – Syntax Highlighting, Line Numbers, and many more: We described some of the awesome features that Code Editors provide.
- Many Different Code Editors – Notepad++, Emacs, Sublime Text, Atom, and Repl.it: We explained several other options in your choice of Code Editor, each providing their own features and flavor. Repl.it is available online if you can’t install one of the other options.
- Starting Up Visual Studio Code: We gave a brief walkthrough of opening and saving a new HTML file in Visual Studio Code to get you started.
- Proper HTML Document Structure: We described the basic skeleton of an HTML document with the Doctype declaration, as well as the html, head, and body tags. They’re invisible in the web browser, but provide the core foundation of every web page.
- Nesting Elements: We discussed the concept of placing one element inside of another, known as ‘nesting’. Nested elements form a hierarchy of parent/child relationships.
- The title Element: We learned about the title element helps display text in the browser’s tab for the page, helps with SEO for search engine rankings and Accessibility for people with disabilities.
- The div Element: We learned about div elements, that divide the page into regions and provide a simple way to organize other elements on the page by nesting them in divs.
- Labeling Our div Elements With Attributes: As a way to tell the difference between div tags, we learned about the id attribute and the class attribute. The id attribute must be unique for each element, the class attribute doesn’t need to be unique and can contain multiple names seperated by spaces in it’s value.
- Some Problems With [using div elements for semantic organization]: We learned that using div elements to semantically organize our page isn’t the practice because it can be difficult to keep all the id and class attributes used to identify and classify them standard and consistent.
- Semantic Elements: We learned about several of the semantic elements that should be used for this purpose instead; header, nav, main, section, article, aside, and footer. We saw a couple of examples using them and the benefits they provide.
- Semantic Element Diagram: Finally, we saw a diagram that shows the semantic elements laid out on a hypothetical page, with hints toward our next steps in learning styling and CSS – I know, cliffhanger of the century! Stay tuned.
In the next article, we’ll learn about adding pictures to our webpage, and all the basics of making visual changes to our web page with CSS styling – like changing the size, color, position, and style of our HTML elements. We may even learn to use a few new types of elements while we’re at it!
