Basic HTML

HTML is a markup language used for marking up content of various types: text, images, multimedia, etc. It is the fundamental language of the WWW: the World Wide Web.

These days, we refer to the WWW simply as “the internet”.

Every page you view in a web browser is structured with HTML. No exceptions. Thus, the first skill to master when learning web development is proper use of semantic HTML.

HTML is used to structure content

Let’s start with structuring text. Our text needs to be organized into paragraphs. You might think that you can simply add a couple of line breaks in your text to accomplish this. But you’d be wrong.

Web pages are written in HTML, and HTML collapses whitespace. This actually makes it easier for us. We don't have to write our text in the way we expect it to appear on the page. This also makes our content “responsive”.

That means that if we make our browser window bigger, the text will “re-flow” to fill the available space. It means that if we write our code like this:

An HTML p (paragraph) element. Whitespace is collapsed.
<p>This is a sentence.</p>

Then it will appear on the page like this:

This is a sentence.

The extra whitespace has been removed. Put five spaces between two words in the code. On the page, you will see a single space.

A note about code examples: The line numbers are not part of the code, but are there to make referring back to specific lines of code easier.

This is very important to get straight. The way your HTML code looks has nothing to do with how it will look on the page. How it will look on the page depends on the markup. We add that markup as HTML.

Got it? Don’t move on until you do.

When you’re ready, follow each link in turn to learn the basics:

  1. HTML elements
  2. Block vs. inline elements
  3. The default stylesheet
  4. Headings
  5. Attributes and links
  6. Element nesting
  7. Empty elements