Lesson 2: HTML Basics

Written by Dylan Fox

This lesson will go over the very basics of building a website with HTML. This will include what an HTML file looks like, comments, and basic tags. By the end of this lesson, you will have the skills to make a very basic webpage!

What is HTML?

If you're a beginner, you have probably never heard of HTML. HTML stands for HyperText Markup Language and is used by web browsers to display the content of a website. Just like how people use languages to communicate to other people, HTML is used to tell the web browser what to display on the screen and how to display it. HTML is just the bare bones of a website, you'll use CSS to change colors, sizes, fonts, ect. HTML files end in a .html to tell the web browser that the file it is reading is the website's HTML file.

HTML Tags

First, lets go over tags. A set of tags will look something like this:

  1. <tag> <!-- Starting tag -->
  2. </tag> <!-- Ending tag -->

The starting tag will be the tag name wrapped in a less than and greater than symbol. The ending tag will be similar to the starting tag, but with a forward slash before the tag name. Tags are used for a variety of different things in HTML. They are the most important features of HTML. They can be used to hold content, such as the <p> tag, <h1> tag, or <img> tag, alter layout, such as the <br> tag, create page elements, such as the <hr> tag, and much more.

HTML Comments, <html>, <head>, and <body> Tags

Let's go over HTML comments, <html>, <head>, and <body> tags first. This is what a standard HTML file will look like without any content:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <!-- Head content -->
  5. </head>
  6. <body>
  7. <!-- Body content -->
  8. </body>
  9. </html>

An HTML comment isn't a real tag. It is a way of making comments that are only visible in the website's source code. Anything written in comments are not displayed on the website. A comment looks like this:

  1. <!-- This is a comment -->

The <html> tag is the tag that goes around everything in your website. It holds all of the page's content. The only thing it doesn't contain is the doctype declaration. The doctype declaration is not an HTML tag, although it looks similar to one. It should be on the first line of every HTML file and is there to tell the web browser what version of HTML the website is written in. The doctype declaration looks like this:

  1. <!DOCTYPE html>

The <head> tag will contain all of the information for the page, but not any visible content. This means that nothing inside the <head> tag is actually shown on the webpage. The data held withinin the head tag is called metadata. Some of the most common and important metadata includes the title of your webpage, icon and bookmark icon, and description of your website. We will cover metadata in a future lesson.

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>My Website</title>
  5. <link href="/images/my-favicon.ico" rel="icon">
  6. <meta name="description" content="This is my website!">
  7. </head>
  8. <body>
  9. <!-- Body content -->
  10. </body>
  11. </html>

The <head> tag can also include <style> and <script> tags, which can be used to either write CSS/JavaScript in the same file or to refrence external .css and .js files.

The <body> tag is where all the fun happens. Everything displayed on the website goes in the body tag.

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <!-- Head content -->
  5. </head>
  6. <body>
  7. <h1>My Website</h1>
  8. <p>Hello everyone! this is my first website!</p>
  9. </body>
  10. </html>

Try it out!

<h1> - <h6>, <p>, and <a> Tags

Next, we will cover the <h1> - <h6>, <p>, and <a> tags. These tags are used for displaying text on your website and are going to be used the most.

The <h1> - <h6> tags are used as titles. They are commonly displayed in a larger font size and a bolder thickness than other text on a website. The <h1> - <h6> tags decreasingly get smaller in font size when you increase the number in the tag. This can be changed with CSS styling that you can read more about in a future lesson.

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <!-- Head content -->
  5. </head>
  6. <body>
  7. <h1>This is a h1 tag</h1>
  8. <h2>This is a h2 tag</h2>
  9. <h3>This is a h3 tag</h3>
  10. <h4>This is a h4 tag</h4>
  11. <h5>This is a h5 tag</h5>
  12. <h6>This is a h6 tag</h6>
  13. </body>
  14. </html>

Try it out!

The <p> tag is used to display normal text on your website. The <a> tag is used to define hyperlinks, clickable links to other pages/websites. The <a> tag's most important attribute is the href attribute, which indicates the link's destination. You can also use the target attribute to tell the link to display the page in a new tab ("_blank"), the parent tab ("_parent"), and the default ("_self") to display in the same page.

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <!-- Head content -->
  5. </head>
  6. <body>
  7. <h1>My Website</h1>
  8. <p>This is my website</p>
  9. <!-- Hyperlink that opens the 2D4U Homepage in a new tab -->
  10. <a href="https://www.2d4u.org/" target="_blank">2D4U Homepage</a>
  11. </body>
  12. </html>

Try it out!

<br> and <hr> Tags

Finally, we will cover the <br> and <hr> tags. These tags are generally used to seperate certian texts in a website. These tags do not need an ending tag.

The <br> tag will insert a break in a line of text. The <hr> tag will insert a break in the line of text and insert a horizontal line all the way through the element it is in.

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <!-- Head content -->
  5. </head>
  6. <body>
  7. <h1>My Website</h1>
  8. <p>This is my<br>website!</p>
  9. <hr>
  10. <p>some other text</p>
  11. </body>
  12. </html>

Try it out!

You've reached the end of the lesson. Hopefully, you now have the skills to create a very basic website. If you want to learn about basic HTML more in-depth, take a look at w3schools.com's HTML Reference page.