HTML stands for Hypertext markup language and it’s pretty much the foundation of the web. Every single website in the world uses HTML to create its structure. You can have a website without CSS (although it would be ugly) and you could have a website without javascript (just without any interactivity), but you can’t build a website without HTML.

HTML Syntax

Let’s start with the syntax of HTML, which is the specific way that we write the HTML code so that the browser understands what we’re trying to communicate. Just like with other languages, there are specific rules for the words and punctuation to write in HTML:

The use of less-than and greater-than angle brackets surrounding an element creates what is known as a tag. Tags most commonly occur in pairs of opening and closing tags.

An opening tag marks the beginning of an element. It consists of a less-than angle bracket followed by an element’s name, and then ends with a greater-than angle bracket. For example, <div>.

A closing tag marks the end of an element. It consists of a less-than angle bracket followed by a forward slash and the element’s name, and then ends with a greater-than angle bracket. For example, </div>.

The content that falls between the opening and closing tags is the content of that element.

To create a level one heading, the element name is h1. So we put that inside the open tag and the close tag. What we’ll actually see on the browser screen is just the word “search engines”, the content in-between the tags.

Headings & paragraphs

Headings and paragraphs are the building blocks of our content, and we’re going to be using these a lot. 

For the headings, we have <h1> through to <h6> (there is no h7). While people often think that this determines the size of the headings on the website, it’s really about the hierarchy - how important the content is, and how you’re structuring the page.

Let’s jump to our Codepen and type in the following codes by yourself. Remember that Codepen is an online app, so all you need to do is to go to the website and then sign up to start creating and coding in a workspace (called a “pen”).

<!-- Our 6x heading options in html -->
<h1> main heading </h1>
<h2> sub heading </h2>
<h3> sub sub heading </h3>
<h4> sub sub sub heading </h4>
<h5> sub sub sub sub heading </h5>
<h6> sub sub sub sub sub heading </h6>

Then we have our paragraphs, and these make up the bulk of the content on our website. 

<p> This is a paragraph </p>

Anchor links

Anchor links are the element that allows us to navigate either between different pages on our website, to other websites, or even to different sections on the same page. Unlike the other text elements, our anchor links need an extra attribute of href. Think of it as the destination of the link (where you go when you click on the link). Importantly, this needs to be the full link (including the http:// or https://) to work consistently. 

<a href="http://google.com"> google </a>

Bonus: HTML entities

These are special characters that you can use in place of text beyond just the standard letters, numbers, and punctuation on your keyboard. You can find them at https://www.toptal.com/designers/htmlarrows/symbols/. and just copy them in as you would other letters. Try it and see!