Let's get down to the fundamentals. Whether you've seen HTML or not, it may feel unclear when to use each element, or even what elements are available. So, let's get some background.

Starting with definitions

HTML, or Hypertext Markup Language, is a language used to define the "skeleton" of a webpage. It isn't meant to include any bells and whistles, and it definitely won't look pretty on its own! It's simply meant to define what gets shown on the page, from images to text and everything in between.

All modern browsers support the latest HTML standard: HTML5. This adds a whole host of features to improve the structuring of webpages. Namely, it adds special elements to denote the "layout" of the page, like where the navigation bar is, where the footer is, and so on. This is super useful for visually impaired individuals that rely on screen readers to browse the Internet, since it's now easier than ever to explain all the landmarks on the page right from the HTML!

Getting into syntax

When writing HTML, you will be working with something known as a tag. Basically, this is used to define some block of content you want to display on your website. There are many different tags you can use for different types of content, like blocks of text, images, headings, and so on.

For example, we can use the paragraph tag <p> to display a block of text like so:

<p>
	This is a paragraph of text. Nice!
</p>

Note that we need to write the tag twice: once to define where its content starts and again to define where it ends. In this case, it starts before our block of text (<p>) and ends just after our text block (</p>). Note you need an added / to denote a closing tag versus an opening tag. This whole block start to finish is called an element.

Attributes

Along with declaring a tag, you can also add a set of attributes to that tag for extra information. These are written using the format attribute='value' inside the opening tag.

The class and id attributes are the most common, which will be explained better once we start using CSS. Another example is declaring the language used by your page with lang as shown below.

The HTML skeleton

<!DOCTYPE html>
<html lang="en-US">
	<body>
		<!-- More to come in here! -->
	</body>
</html>

This is a basic wrapper you would always want to put around your HTML file. First, we specify the document type with <!DOCTYPE HTML>. Then, we create the base html element and specify our page's language using lang="en-US". Since anyone from Canada to Singapore may access the websites you build, it's best to specify the language so translation tools know what to expect!

Next, we add our body for all of our website's content to live. This is denoted by the body element. Also notice the <!-- … --> inside. This is how comments work in HTML, so whatever's inside those brackets won't be shown on the page.

Note: CodePen actually adds these html and body wrappers for you around whatever code you put inside the "HTML" box, complete with the language specification. So, no need to use it on every CodePen you create, but know it's an important concept for when we move away from this tool!

Important tags

There are many HTML tags worth knowing. You can find the full list here, but these are some highlights you should know for getting started: