What Is HTML? Hypertext Markup Language Basics Explained

What Is HTML? Hypertext Markup Language Basics Explained

HTML stands for Hyper Text Markup Language. It is a standard markup language for web page creation. It allows the creation and structure of sections, paragraphs, and links using HTML elements (the building blocks of a web page) such as tags and attributes.

The average website includes several different HTML pages. For instance, a home page, an about page, and a contact page would all have separate HTML files. All HTML pages have a series of HTML elements, consisting of a set of tags and attributes. HTML elements are the building blocks of a web page. A tag tells the web browser where an element begins and ends, whereas an attribute describes the characteristics of an element.

The three main parts of an element are:

  • Opening tag – used to state where an element starts to take effect. The tag is wrapped with opening and closing angle brackets. For example, use the start tag<p><p> to create a paragraph.

  • Content – this is the output that other users see.

  • Closing tag – the same as the opening tag, but with a forward slash before the element name. For example,</p></p> to end a paragraph.

The combination of these three parts will create an HTML element:

<p>This is how you add a paragraph in HTML.</p>

markup language for web page creation. It allows the creation and structure of sections, paragraphs, and links using HTML elements (the building blocks of a web page) such as tags and attributes.

How Does HTML Work

The average website includes several different HTML pages. For instance, a home page, an about page, and a contact page would all have separate HTML files.

HTML documents are files that end with a .html or .htm extension. A web browser reads the HTML file and renders its content so that internet users can view it.

All HTML pages have a series of HTML elements, consisting of a set of tags and attributes. HTML elements are the building blocks of a web page. A tag tells the web browser where an element begins and ends, whereas an attribute describes the characteristics of an element.

The three main parts of an element are:

  • Opening tag – used to state where an element starts to take effect. The tag is wrapped with opening and closing angle brackets. For example, use the start tag<p><p> to create a paragraph.

  • Content – this is the output that other users see.

  • Closing tag – the same as the opening tag, but with a forward slash before the element name. For example,</p></p> to end a paragraph.

The combination of these three parts will create an HTML element:

Plain text

Copy to clipboard

Open code in new window

<p>This is how you add a paragraph in HTML.</p>

<p>This is how you add a paragraph in HTML.</p>

<p>This is how you add a paragraph in HTML.</p>

Another attribute, the HTML class, is most important for development and programming. The class attribute adds style information that can work on different elements with the same class value.

<html>

</head>

<body>

<h1 class="important">This is a heading</h1>

<p class="important">This is a paragraph.</p>

</body>

</html>

Most elements have an opening and a closing tag, but some elements do not need closing tags to work, such as empty elements. These elements do not use an end tag because they do not have content:

Plain text

Copy to clipboard

Open code in new window

EnlighterJS 3 Syntax Highlighter

<img src="/" alt="Image">

<img src="/" alt="Image">

<img src="/" alt="Image">

This image tag has two attributes – an

src

srcattribute, the image path, and an

alt

altattribute, the descriptive text. However, it does not have content nor an end tag.

Pros and Cons of HTML

Just like any other computer language, HTML has its strengths and limitations. Here are the pros and cons of HTML:

Pros:

  • Beginner-friendly. HTML has a clean and consistent markup, as well as a shallow learning curve.

  • Support. The language is widely used, with a lot of resources and a large community behind it.

  • Accessible. It is open-source and completely free. HTML runs natively in all web browsers.

  • Flexible. HTML is easily integrable with backend languages such as PHP and Node.js.

Cons:

  • Static. The language is primarily used for static websites. For dynamic functionality, you may need to use JavaScript or a back-end language such as PHP.

  • Separate HTML page. Users have to create individual web pages for HTML, even if the elements are the same.

  • Browser compatibility. Some browsers adopt new features slowly. Sometimes older browsers don’t always render newer tags.