Whether you are interested in becoming a professional web developer or simply want to understand how websites work, HTML is the first thing to study.

HTML is the standard language used for creating web pages and web applications. When you access a website, a server sends an HTML file to your computer, and your browser interprets and displays the information in that file.

This guide introduces the basic building blocks of HTML: tags, elements, and attributes. By the end, you will have enough foundation to start experimenting with your own HTML pages.

What Is HTML?

HTML stands for HyperText Markup Language. The best way to make sense of that phrase is to look at each word separately.

HyperText refers to text that contains links to other text. Every time you click a link and move to another page, you are using hypertext. As pages connect to each other, they form the web we browse every day.

Markup refers to the symbols or codes inserted into a document to tell the browser how to display it. Markup can tell the browser which content is a heading, which content is a paragraph, and which text should be bold, italic, or a link.

Language means the code follows a standardized set of rules. Those rules help browsers understand and render the same HTML document consistently.

Put together, HTML is a language that uses markup to display linked documents in a browser.

Example of HTML Code

HTML markup uses tags, attributes, character data, and references. Tags usually come in pairs, such as <h1> and </h1>, where the first tag opens the element and the second tag closes it.

Here is a simple HTML document:

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <h1>This is a heading.</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

This is a heading.

This is a paragraph.

This is a web page in one of its simplest forms. Even before learning every detail, you can compare the source with the preview and start seeing how HTML describes a page's structure.

The Basics Of HTML Code

There are three components that form the basic building blocks of HTML code: tags, elements, and attributes. Once you learn how each part works, writing and editing HTML becomes much easier.

HTML Tags

Tags separate HTML instructions from regular text. Text inside angle brackets is used by the browser to decide how content should be displayed.

Tags usually come in pairs. The difference between an opening tag and a closing tag is that the closing tag starts with a slash, such as </p>.

For example, to make a sentence italic, you can wrap it with <i> and </i>. To create a link, you can wrap text with an anchor tag such as <a href="https://google.com"> and </a>.

HTML Elements

An element is an opening tag, a closing tag, and the content between them. 

<h3>My Name is Supriya</h3>

In this example, <h3> is the opening tag, </h3> is the closing tag, and the text is the content.

Elements can be nested inside other elements. A page has a <body> element for visible content, a <head> element for metadata, and both usually live inside the root <html> element.

HTML Attributes

Attributes define extra information about an element. They live inside the opening tag and usually appear as name-value pairs. 

<a href="https://google.com">This is some text.</a>

The anchor tag creates a hyperlink, and the href attribute defines the link address. Without it, the link would not know where to go.

  • Write attribute names in lower case for consistency.
  • Wrap attribute values in quotation marks so they are easier to read.
  • Prefer double quotation marks for attribute values in HTML examples.

A basic element template looks like this:

<tag attribute="value">Some content</tag>

I hope this helped you get a basic understanding of HTML and how web pages begin to take shape.

Peace!