Tutorials

/

HTML Tutorials

/

HTML

Previous:

HTML Tutorials

Next:

HTML Tags

HTML

Created on November 3, 2016
Updated on February 2, 2021

• Coding Languages
• Code Editors
• HTML Tags
• Terminology
• Homework

This tutorial introduces HTML, which is the foundational coding language used for building websites.

Coding Languages

Think about how many human languages exist in the world: English, Spanish, Japanese, etc. Each one evolved its own syntax (the letters, words, and symbols of a language) and grammar (the rules about how you can use those letters, words, and symbols) over many years. For example, some languages put nouns before adjectives. Some languages are written right-to-left instead of left-to-right. Some even use completely different letters and symbols!

Coding languages are very similar. They’ve evolved their own syntax (symbols) and grammar (rules) over many years. Different coding languages are designed for different goals, and which one you choose depends on what you’re trying to do.

HTML is a coding language designed for building webpages.

HTML tells a web browser how to display content. That content is often text, but it can also be things like links, images, videos, and sound files.

You write HTML by adding tags to your content, which tells the browser what to do with the content. For example, the <h1> tag tells the browser that something is a heading, the <p> tag tells the browser that text is a paragraph, and the <img> tag tells the browser to display an image.

Code Editors

You’ll learn more about HTML tags as you read through these tutorials, but first you’ll need to create an HTML file!

Pick one of these tutorial to set up your coding environment.

If you’re new to coding and HTML, I recommend using an online code editor:

Online Code Editors

Write HTML directly in your browser.

Or you can edit files directly on your own computer:

Local Files

Write HTML on your own computer.

HTML Tags

You write HTML by adding tags to your content, which tells the browser what to do with the content. For example, the <h1> tag tells the browser that something is a heading, the <p> tag tells the browser that text is a paragraph, and the <img> tag tells the browser to display an image.

A tag has a name which goes between < > angle brackets, and contains content which goes between an opening and closing tag. A closing tag is a / forward slash followed by the tag name, both in angle brackets.

For example, the <h1> tag tells the browser that the content is a heading.

So this HTML:

<h1>Hello world!</h1>

Shows up like this in your browser:

Hello world!

You’ll learn more about HTML tags in the HTML tags tutorials.

Terminology

This tutorial used the term HTML quite a few times, but I still haven’t defined what HTML actually means. You don’t really need to know all of this background information, but if you’re curious, here’s where the term HTML comes from.

Hypertext is text that can link to other text using hyperlinks. That might sound confusing, but you’ve seen this before, on any webpage that links to other webpages. (Like the one you’re reading right now!) There are also older examples of hypertext.

HTTP stands for Hypertext Transfer Protocol, which is a way for one computer to send hypertext to another computer. It’s how your browser asks for HTML from a specific URL, and the world wide web is built on top of HTTP.

Markup languages are ways to add formatting to text. For example, you might have seen inputs where text between asterisks like *this* is rendered as bold like this. That’s one kind of markup language.

Finally, HTML stands for Hypertext Markup Language, because it’s a way to write markup (using HTML tags) to tell your browser how to display hypertext.

Don’t worry, you don’t need to memorize any of that. But I think the history of this stuff is really interesting!

Homework

• Edit your HTML file to include a few paragraphs describing who you are, why you’re learning about html, and what you hope to get out of these tutorials.
• Look at some websites you use. What types of content do they contain? How do you think that content is marked up in html?

Previous:

HTML Tutorials

Next:

HTML Tags