The goal of this guide is to give anyone the ability to understand and effectively code with HTML confidently, and as painlessly as possible.

And before you begin, I want you to forget everything you think you know about coding and say to yourself, "I CAN DO THIS!, I WILL DO THIS!". I sincerely want you to believe in yourself as much as I believe in you.

Now let's do this!

What is HTML?

HTML stands for Hypertext Markup Language and it is the primary way to interact with web page code. If you can name a website or web page, I guarantee it uses HTML somehow. And by the end of this lecture, you will understand the following:

1. HTML is the standard way to manipulate and give meaning to text and other parts of a web page.
2. HTML has a few common terms to remember. Two of those terms are tags and elements.
3. HTML markup refers to the building blocks (i.e. elements and tags) of web pages.
4. As you markup/build your page, you are speaking in the web browser's language, telling it what to display.

An HTML Element in action

An HTML element is a marker that defines what happens next within a page. Elements are created when you combine content with HTML tags. As shown below, we're using the bold tags <b> and </b> to make content between them bold. The <b> is the start tag, which tells the browser to make everything following it bold until it sees the </b> end tag which completes the bold HTML element.

Example: Using the HTML bold tags to make some text bold

Results in …

Get started with HTML today

This is an example of a bold HTML element in all its' glory!

Visualizing the structure

Let us go over one way to visualize and remember how to structure HTML. I always recommend trying to use something physical you're familiar with to build a mental model/picture of what's going on in your code.

The "Wrapping" Concept

In the Wrapping concept, HTML elements can be thought of as boxes or containers that surround and hold text (or other HTML elements). Thus, only the things that are wrapped are effected by the HTML element. So let's apply this concept to the following sentence and "wrap" some of the text with the bold html element.

First, we'll start our wrap right before the text "HTML" by adding the first part of our bold element. This first part can be referred to as the start tag. Which essentially opens the bold element.

Next up we'll close the bold element with an end tag. Which looks like the start tag except with a forward slash (/) added in.

In doing so, we close and complete the element, creating an invisible box that wraps around the text in between the two tags of our element. Most common HTML elements have a start and end tag (a.k.a. opening and closing tags), that work like the following:

This sentence has <start>some Text</end> I want to manipulate.

And generally speaking, if the element you want to use requires an end tag and you don't use it, then everything following the start tag that can be affected will be affected.