What is HTML – Definition and Meaning of Hypertext Markup Language

HTML, or Hypertext Markup Language, is a markup language for the web that defines the structure of web pages.

It’s one of the most fundamental components of every website, so learning it is essential if you want to pursue a career in web development.

In this article, I’ll explain HTML in detail, how it works on web pages, and we’ll also discuss a very interesting aspect of HTML – semantic HTML.

What is HTML?

To understand “HTML” from start to finish, let’s look at each word that makes up this acronym:

Hypertext: Text (often including embeds such as images) that is arranged to link related items.

Markup: A style guide for typesetting any material to be printed in hardcopy or softcopy format.

Language: A language that a computer system understands and uses to interpret commands.

HTML determines the structure of web pages. This structure alone isn’t enough to make a web page attractive and interactive. Therefore, to enhance HTML and add interactivity, you’ll use supporting technologies like CSS and JavaScript.

In this case, I like to explain these three technologies – HTML, CSS, and JavaScript – like this: they’re like a human body.

• HTML is the structure,
• CSS is the skin,
• and JavaScript is the circulatory system, digestive system, and respiratory system that give life to the body’s structure and skin.

You can also look at HTML, CSS, and JavaScript this way: HTML is the structure of a house, CSS is the interior and exterior decoration, and JavaScript is the electrical, water system, and many other functional features that make a home habitable.

HTML Tags

Since HTML defines the markup for a particular web page, you might want text, images, or other embedded items to appear in certain ways.

For example, you might want some text to appear larger, some smaller, and some to appear in bold, italics, or bullet points.

HTML contains “tags” that help you do this. For example, there are tags for creating headings, paragraphs, bolding, and italicizing.

The image below illustrates the structure of HTML tags:

HTML Elements

An element consists of an opening tag, a character, content, and a closing tag. Some elements are empty – that is, they do not have a closing tag, but instead contain the source or link to the content you want to embed on a web page.

An example of an empty element is , which you use to embed an image on a web page.

HTML elements are often used interchangeably with tags, but there is a slight difference between the two.

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

I’ve created another image to help you understand the structure of an HTML element:

HTML Attributes

HTML tags also have attributes. These attributes are placed in the opening tag and include styles, IDs, and classes. They take values that provide more information about the element and help you perform tasks like styling and manipulation with JavaScript.

In the infographic below, the opening tag has a class attribute with the value “text.” This can be used to style the element or select it with JavaScript for interactivity.

The structure of a basic HTML page is as follows:

Definition of HTML

Let’s take a look at the important parts of the code here:

: This indicates that we’re using HTML5 in this code. Before HTML5, you had to explicitly indicate which version of HTML you were coding in using the tag. For example, HTML4.0, 3.2, etc. But this is no longer necessary. When “html” is written in the code, the browser automatically assumes you’re coding in HTML5.

: This is the root or top-level element of every HTML document. All other elements must be wrapped within it.

The most important part of an HTML document is the head tag. Web crawlers look inside the head tag to find important information about the page. This includes the page title, stylesheets, meta information for SEO, and more.

This is an empty element that provides meta-information about the page. This information can include the author, the encoding used (almost always UTF-8), responsiveness, compatibility, and more. Web crawlers always look at meta tags to obtain information about a web page, which plays an important role in SEO.

: This defines the title of the web page. It is always displayed in the browser tab.

All the content of an HTML document is located inside the body tag. There can only be one body tag on an entire page.

What is semantic HTML?

Semantic HTML means that your HTML tags convey the actual meaning of the purpose for which they are used.

Semantics has been an integral part of HTML since the early 1990s. But it didn’t gain significant prominence until the late 1990s, when CSS began to work in most browsers.

In semantic HTML, semantically neutral tags such as

and are considered inappropriate because semantically more descriptive tags such as , , , , , and can perform the same functions.

A notable benefit of using semantic tags is that web crawlers can easily index a web page or website, which in turn improves SEO.

Furthermore, websites that use semantics become more informative, adaptable, and accessible for people who use screen readers to access websites.

Important Semantic Tags and Their Functions

Let’s take a look at some of the most commonly used semantic HTML tags: : This element defines the introductory section of a web page. It includes elements such as the logo, navigation, theme switcher, and search bar. : This element specifies the page’s navigation items, such as Home, Contact, About Us, FAQ, and more. : This element is traditionally considered a direct descendant of the tag. It contains the main body of the HTML document, excluding the and .

Ideally, there should be only one such element in the entire HTML document. : The element defines a specific section of a web page. This could be a showcase section, an about section, a contact section, or any other section. You can use multiple sections in a single HTML document. : The element represents a specific section of a web page that provides specific information.

Such information can include text, images, videos, and embeds. Think of this element as a blog post located on a page containing excerpts from other blog posts. , as the name suggests, refers to a sidebar on a web page. This is typically a part of the web page that isn’t directly related to the main content. This element contains things like quick links, copyright information, or other data related to the entire website or web page.

Note that since semantic elements express the actual meaning and function of a particular piece of content (e.g., nav navigation, aside sidebar, etc.), You’ll need to use CSS for this.

A very simple semantic HTML document looks something like this:

Definition of HTML

LOGO

• Home
• About
• Contact
• FAQs

In the browser, it will look something like this:

You may notice that the content inside the tag isn’t automatically displayed as a sidebar, nor is it automatically displayed as a navigation bar. Therefore, you’ll need to use CSS to customize them.

Conclusion

I hope this article helped you understand the basics of HTML and its functions. Now you can start learning advanced technologies like CSS and JavaScript and build a strong career in web development.

Thank you for reading, and have a great day.

• WHAT IS COMPUTER LANGUAGE |FULL DETAIL ,ITS EXTRA KNOWLEDGE