Getting Started

What is HTML?

HTML, which stands for HyperText Markup Language, is a language used to construct web pages by defining their structure and content. The structure is defined by tags, which are keywords that define elements on a page, and are surrounded by angle brackets (<>).

Tags

Tags, as mentioned before, define the structure of a page by creating elements. There are two types of tags: paired and unpaired.

Paired tags have an opening tag, which is the name of element surrounded by angle brackets, and a closing tag, which is the name of the element prefixed with a / and surrounded by angle brackets (<element>...</element>). The content goes in between the opening and closing tags.

Example of paired tags include the <html> tag, the <head> tag and the <body> tag.

Unpaired tags only have a single tag for the element (<element>).

Examples of unpaired tags are the <br> tag and the <hr> tag.

Creating an HTML file

Open up a text/code editor or IDE of your choice, and type in the following code:

<!DOCTYPE html>
<html>
   <head>
       <title>My web page</title>
   </head>
   <body>
       <h1>Welcome</h1>
       <p>This is my first page</p>
   </body>
</html>

Then save the file as index.html. Congratulations, that is your first HTML file ready. To view it in the browser, naviate to the file in your finder/library and open it with a browser of your choice (see below).

In your browser, you should see something like this:

Now lets see what these tags do.

  • <!DOCTYPE html> essentially declares to the browser that the document is an HTML file. It's not necessary, but helpful.

  • The <html> tag contains the entire contents of the page between its opening and closing tags.

  • The <head> tag contains meta information about the page, as well as imported scripts and stylesheets. Here it also contains the <title> tag:

    • The <title> tag defines the title of the page, which is the text that appears on the tab in the browser.

  • The <body> tag contains the body of the page, including text, forms, images and more.

    • The <h1> tag defines a heading. It can range from 1 to 6, with 1 being the largest size and 6 being the smallest size heading

    • The <p> tag defines a paragraph of normal-sized text. Note that it is possible to place the text on its own without a <p> tag and it will still render as a paragraph.

More tags

Let's take a look at some more tags:

  • The <div> tag is a paired tag that is often used to create a generic element that may or may not contain text.

  • The <a> tag is a paired tag that is used for hyperlinks (a stands for anchor).

  • The <button> tag is a paired tag that is used to create a clickable button.

  • The <form> tag is a paired tag that is used to create an HTML form. We'll see more of these later.

  • The <hr> tag is an unpaired tag that is used to create a horizontal line on the page

  • The <br> tag is an unpaired tag used to denote a line break.

  • The <img> tag is an unpaired tag used to embed images on a page.

  • The <input> tag is an unpaired tag used to create an input field inside the form.

  • The <link> tag is an unpaired tag used to import files (usually stylesheets).

  • The <script> tag is a paired tag that can be used to embed/import JavaScript code into the page.

We'll end up using all of these tags throughout the guide, so make sure to keep them in mind. A full list of HTML tags can be found here.

Next steps

Next, we'll take a look at tag attributes and how they can be used to give properties to elements.

Last updated