01. Introduction to HTML

Welcome to our HTML tutorial! Let's jump right in.

What is HTML?

HTML stands for HyperText Markup Language. As a markup language, HTML describes what the content is, as opposed to how content should look and behave, which are what CSS and JavaScript are for, respectively.

As an analogy, let's think about your average college-level MLA paper. When you're formatting it on a word processor, you make note of the parts that are the head, title, body, footer, etc.

With this information, we understand how the paper fits together. Furthermore, we adopt certain conventions as to how each page of the entire essay should look. You can think of HTML as the tool that marks these bits and pieces up so that we can identify what they are. Later on, we'll discuss how these identifiers are used to apply styles with CSS.

Tip: HTML is not used for styling!

Keep in mind that HTML's main purpose is to mark the semantics of a document. A common misunderstanding is that HTML is used just to mark up a page up so that we can apply target styles later on.

We'll soon see how HTML is used by search engine bots to identify what a page is about.

How does HTML work?

HTML works by assigning parts of the page with a "tag". For example, the <p>tag says "Hey, Mr. Browser, this is a paragraph!".

Tags are enclosed by two sets of brackets < >. The first set, or the start tag, look like <head>, while end tags are exactly the same with a / preceding the tag name - </head>. The content goes in between the start and end tags.

Some tags, such as <br>, which stand for a line break, have no end tag. These are called void (or empty) elements.

Void elements with a "/"

Sometimes you'll see void elements with a /, such as <br />.

This is remnant of XHTML syntax. XHTML is a version of HTML that adopted a stricter convention and forced developers to include a "/" on all tags.

In this tutorial series, we'll be using HTML 5, so there's no need for an extra "/" for void elements.

Aching back from coding all day?

Acupressure Mat & Pillow

Aching back from coding all day? Try Back Problems

Relieve your stress, back, neck and sciatic pain through 1,782 acupuncture points for immediate neck pain relief. Made for lower, upper and mid chronic back pain treatment, and improves circulation, sleep, digestion and quality of life.

$$ Check price
144.87144.87Amazon 4.5 logo(1,890+ reviews)

More Back Problems resources

Build modern and responsive webpages

HTML & CSS

Build modern and responsive webpages Try Front-end

This book teaches HTML as if it's for anyone - hobbyists, students, and professionals - and it's full-color throughout. It utilizes information graphics and lifestyle photography to explain the topics in a simple way that is engaging. You can progress through the chapters from beginning to end or just dip into topics of particular interest at your leisure.

$ Check price
29.9929.99Amazon 4.5 logo(926+ reviews)

More Front-end resources

Ad