Beginners Guide To Learning HTML

In this beginner's tutorial I will show you how to learn HTML. We will start off with the basics and then we will go through the more advanced topics.

What is HTML?

HTML is an acronym that stands for Hypertext Markup Language. Which is simply put, a standardized system for tagging text files to achieve font, color, graphic, and hyperlink effects on World Wide Web pages.

What does HTML look like?

To become familiar with HTML, we will start off with a simple example found below. In this example, try to guess what the rendered page will look like? It's okay if you do not understand the example as we will cover this later on in this article.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello World</title>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

If you guessed correctly, you will see the following: Hello World in the middle of the page. You will also notice in the browser tab that the page has a title of Hello World as well. This is set in the <head> HTML element, while the <body> HTML element contains an <h1> HTML element that contains the Hello World content of the rendered page.

What is a DOCTYPE?

The <!DOCTYPE> HTML element is used to specify the type of document that is being rendered. This is used to help the browser know how to render the document.

What is the HTML element?

The <html lang="en"> HTML element is used to specify the language of the document. This is used to help the browser know which language to render the document in.

What is the HEAD element?

The <head> HTML element is used to contain all the meta information that is needed to render the document.

What is the TITLE element?

The <title> HTML element is used to specify the title of the document. From our example above, this would render Hello World in the title bar of the browser.

What is the BODY element?

The <body> HTML element is used to contain all the content of the document. This is where the <h1> HTML element is used to render the Hello World content. This is where most of the content of the document is rendered and where you would be writing most of your web page content.

What is the H1 element?

The <h1> HTML element is used to render the Hello World content in the <body> HTML element. This is a HTML Heading element that is used as Typography to structure a documents content, specifically it's heading level 1. There are 6 levels of heading, and the more heading levels you use the more important the content is. For instance, a heading level 1 is the most important, a heading level 6 is the least important.

Let's take a look at a more complex example

Below you will find a more complex example of HTML that contains an <h1>, <h2>, <p>, <ul>, and <li> HTML elements. It will also contain an HTML comment. Which is used to comment out code that is not needed to render the document. Or for leaving you or others on your team a note about a specific section of the document that is only meant for you to read while working in the codebase. Pay close attention to the  HTML comments and the syntax of the HTML elements.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello World</title>
  </head>
  <body>
    <!-- THIS IS A COMMENT -->
    <h1>Hello World</h1>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>

    <!-- THIS IS SECOND COMMENT -->
    <h2>Hello World</h2>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>

    <!-- THIS IS A THIRD COMMENT -->
    <ul>
      <li>This is a list item.</li>
      <li>This is another list item.</li>
    </ul>
  </body>
</html>

We covered the h1 and h2 HTML elements in the previous examples.
The <p> HTML element is used to render a paragraph of text.
The <ul> HTML element is used to render a list of items.
The <li> HTML element is used to render a list item.

Remember, the comments are used to comment out code that is not needed to render the document.

What are HTML Tags?

HTML tags are used to render HTML elements. They are used to structure the content of the document. We have already learned what the are from the examples above, however there are many HTML tags that can be utilized when writing our HTML documents.

HTML Tags must be opened and closed. A tag is opened by using the < character and the tag name is followed by a > character. A tag is closed by using the </ character and the tag name is followed by a > character.

HTML Tags follow a strict rule of punctuation. For example, the <h1> HTML element is not considered valid in HTML when written as capitalized like <H1>. This is because HTML tags are case sensitive.

What is a DIV HTML Tag?

The <div> HTML element is used to render a division of content. This is used to create a container for other HTML elements. This is considered a block level element because it is a structural element that can be used to create a block level element.

What is a SPAN HTML Tag?

The <span> HTML element is used to render a span of content. This is used to create a container for other HTML elements. This is not considered a block level element because it is not a structural element.

What is a Script Tag?

The <script> HTML element is used to render a script. A script tag refers to JavaScript code that is used to manipulate the content of the document.

What is JavaScript?

JavaScript is a programming language that is used to manipulate the content of the document. JavaScript is a scripting language that is used to manipulate the content of the document. We will cover the JavaScript language in more detail in the next series.

What is a Style Tag?

The <style> HTML element is used to render a style. A style tag refers to CSS code that is used to manipulate color and layout of the content of the document. It is how we can position elements on the page. Or how we can add colors to the HTML web page. We will cover the CSS language in more detail in the next series.

What is CSS?

CSS is a style sheet language, knowns as Cascading Style Sheets that is used to manipulate the content of the document. We will cover the CSS language in more detail in the next series.

What is a Link Tag?

The <link> HTML element is used to render a link. It is how we can link to other files like CSS or JavaScript files from within our HTML document. This is not to be confused with the <a> HTML element. The <a> HTML element is used to render a hyperlink to direct the user from one page to another or a completely different website all together.

What is a Meta Tag?

The <meta> HTML element is used to render a meta tag. A meta tag is used to specify the information about the document. This is used to specify the author of the document, the description of the document, the keywords that are used to search for the document, and the date the document was created.

An example of the use of a <meta> HTML element is shown below. This tells the browser to use the charset HTML property to render the document with a value of utf-8. This is used to specify the character set of the document.

<head>
  <meta charset="utf-8" />
  <title>Hello World</title>
</head>

We are done!

We have learned the basics of HTML and we are ready to start writing our first web page. We will be covering the rest of the web page in the next series. Stay tuned!