What is HTML?

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

It’s one of the most basic building blocks of a website, so it’s important to learn if you’re pursuing a career in web development.

This article explains in detail what HTML is, and how it works in web pages, and also touches on a very cool part of HTML: semantic HTML.

To understand “HTML” cover-to-cover, let’s look at each word that makes up the abbreviation:

Hypertext: text organized to connect related elements (often images, etc.)

Markup: A style guide for typesetting everything Printed in hard or soft copy format.

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

HTML determines the structure of web pages. This structure alone is not enough to make your website look good and interactive. So use supported technologies such as CSS and JavaScript to beautify your HTML code and add interactivity.

In this case, I would like to categorize his three technologies of HTML, CSS, and JavaScript as follows: They are like the human body.

HTML is the skeleton,
CSS is the skin,
JavaScript is the systems that bring structure and skin to life.

HTML Tags

HTML defines the markup of a particular web page, so that text, images, or other embeds must be displayed in a particular way.
For example, you can make some text larger, some text smaller, and some text bold, italic, or bulleted.

HTML has “tags” that allow this. So there are tags for creating headings, paragraphs, bold words, italic words, etc.

The following diagram shows the structure of an HTML tag.

HTML Elements

Elements consist of a start tag, characters, content, and an end tag.
Some elements are empty. In other words, it has no closing tag and instead has a source or link to the content you want to embed in your web page.
An example of an empty element is <img>. This is used to embed images in web pages.
HTML elements are often used interchangeably with tags, but there are subtle differences between the two. An element is a combination of start and end tags and content between them.

Another image to help visualize the structure of the HTML elements.

HTML Attributes

HTML tags also take what are called attributes. These attributes are placed in the opening tag and range from styles and IDs to classes. They take values that convey more information about the element and are useful for styling, manipulating with JavaScript and so on.

In the infographic below, the opening tag contains a ‘class’ attribute with a value of ‘text’. You can use this to style elements or select elements to make them interactive using JavaScript.

Basic Structure of HTML Page.

<!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>
    <!--Page content such as text and images goes in here-->    
</body>
</html>

HTML

<!DOCTYPE html> Indicates that this code uses HTML5. Before HTML5, you had to explicitly indicate the version of HTML you were coding with the tag. For example, HTML4.0, 3.2, etc. but now I don’t need it anymore

If you see “HTML” in your code, your browser automatically assumes you’re programming in HTML5.
<html></html> Root or top element of each HTML document. Other elements should be wrapped inside it.

<head></head> One of the most important parts of an HTML document. Web crawlers look at the head tag to get important information about the page. It contains information such as page titles, style sheets, and SEO meta information.

<meta /> This is an empty element that conveys meta-information about the page. This information includes the author, type of encoding used (most often UTF-8), responsiveness, compatibility, and so on. Web crawlers constantly look at meta tags for information about web pages that play an important role in search engine optimization.

<title></title> Defines the title of the web page. It always appears in a browser tab.

<body></body> The entire content of the HTML document is within the body tag. There can be only one tag for the entire page.

What is Semantic HTML?

Semantic HTML means that HTML tags convey the actual meaning of their intended use. The
semantics have been a staple of HTML since its introduction in the early 1990s. But it didn’t get much attention until the late 90’s when CSS started working in most browsers.

With semantic HTML, semantically-neutral tags such as <div> and <span> are frowned upon since semantically more descriptive tags such as <header>, <nav>, <main>, <section>, <footer>, and <article> can do the same thing they do.

A noticeable advantage of using semantic tags is that web crawlers can index the web page or website easily, improving SEO in return.

In addition, websites that use semantics are more useful and adaptable to users accessing the website using screen readers,

Semantic Tags and What They Do?

Let’s take a look at some of the most commonly used semantic HTML tags:

Spread the love