HTML Tutorial Part 1. HTML Introduction

Posted by TotalDC

Earlier I covered basic idea what is HTML and basically how it works. Now lets dive deeper into HTML introduction and learn more about HTML.

What are Tags and Attributes?

Tags and attributes are the basis of HTML. They work together but perform different functions. Tags are used to mark up the start and the end of an HTML element. Example of an element would be <H1></H1>.

While attributes contain additional pieces of information like class, id alternative text etc. An example of an attribute would be:

<div class="yourClassName"></div>

In this example class is an attribute to div tag.

Important thing to remember is that majority of tags in HTML has opening and closing. The difference between opening and closing tags are that closing tag has “/” symbol in front of tag name.

Declaring HTML

Open any text editor you have installed and lets see how to start working with HTML. If you are using text editor like Visual Studio Code you can just press CTRL+! and you will be ready to go. But if you are using lets say notepad++ for learning reasons since its already preinstalled on all Windows computers, you have to type the following code and save your document as .HTML.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

Now I will explain what all this means.

<!DOCTYPE html>

The DOCTYPE declaration is an instruction to the web browser about what version of HTML the page is written in

<html>

Tells the browser that this is the beginning of an HTML document.

<head>

This is the beginning of the header section. The header section contains the configuration options for the page.

<title>Document</title>

This tells the browser what to display as the title of the page. This appears in the title bar at the top of the browser. Enter the name of your page between the <title> tags.

</head>

End of the header section.

<body>

</body>

Everything between these is in the body of the page. This is where all text, images etc. are. This is the most important part of the page.

</html>

Shows the end of the HTML document.

Summary

You have learned how HTML is structured using tags. Just remember that most HTML tags must have ending and all content between starting and ending tag will have tag properties applied to it. You have also learned how to set the page’s title and declare an HTML document.