Estimated Time: 30 minutes

<aside> 💡 Welcome to CodeLab's article on HTML. Here, you'll learn the basics of this language that serves as the base layer for all web development.

As always, you can follow along with the source code here.

</aside>

Prerequisites

Overview

What is HTML?

HTML, or Hypertext Markup Language, is the basic language that websites are built with. When you see text, images, or any content on the screen, it's powered by HTML.

A markup language is a language that tells the browser how to display information.

Programming with HTML

Creating and Viewing an HTML File

https://www.youtube.com/watch?v=fALDrmrdXlc

Key Takeaways:

To create and view a basic HTML file, you only need a small amount of boilerplate code to get started - paste it into a .html file and double click on that file to open it in your web browser.
HTML is a "markup language" that uses "tags" to encapsulate information - you can find a comprehensive list of them here, but there's no need to memorize them. You'll only ever use a handful of these.
- You only need to put your information inside of these tags - which can be closed either like <p>My Information</p> or <img /> depending on the tag.
- The second option - called void elements or more commonly "self-closing tags" - are for elements who would never be allowed to have any content inside of them.
  - You can find a comprehensive list of these self-closing tags here, but again, no need to memorize these.

The Many HTML Tags

https://www.youtube.com/watch?v=j5a6TygkF4k

Key Takeaways:

An HTML file is typically split into two different tag sections - the <head> and <body> .
- The "head" section is primarily for metadata - like titling your page, search engine optimization (SEO) information, and for loading in your CSS and JavaScript - more on those two later.
Some of the most useful HTML tags you'll use include the <p> <h1...h6> <a> <img> <div> tags.
- The <p> tag is for smaller blocks of text - often referred to as the paragraph block.
- The <h1>...<h6> tags are for larger, shorter blocks of text - aptly named the header blocks.
- The <a> block is for easily embedding hyperlinks into text - often referred to as the anchor tag.
- The <img> tag is for displaying images - it's called the image tag.
- The <div> tag is for grouping similar elements together - while it doesn't have much use now, it's great for targeting a large group of HTML tags with a specific CSS rule or JavaScript function - more on this later.