What is HTML?: Introduction to Basic HTML and How it Works

Introduction to HTML

At its core, HTML is a pretty basic language composed of components that may be applied to sections of text to change their meaning inside a page (Is this a paragraph? Is it in the form of a bulleted list? Is it a table?), segment a document logically (Does it have a header? Three content columns? A menu? ), and include information such as photographs and videos into a page. This session will cover the first two of them and will expose you to the core ideas and syntax necessary for understanding HTML.

What Exactly is HTML?

To comprehend “HTML” from top to bottom, let us examine each word that comprises the abbreviation:

Hypertext: text (sometimes with embedded media such as graphics) that is structured in such a way that it connects similar things.

Markup: is a style guide for typesetting documents that will be printed in hardcopy or electronic format.

Language: A computer system’s native language, which it utilises to interpret instructions.

HTML is the language that defines the structure of web pages. This framework alone is insufficient to make a web page visually appealing and dynamic. As a result, you’ll employ assisting technologies such as CSS and JavaScript to beautify and add interactivity to your HTML, respectively.

In this instance, I prefer to compare the three technologies – HTML, CSS, and JavaScript – to a human body.

HTML is the framework.
CSS is the appearance.
and JavaScript is the system of circulation, digestion, and respiration that gives life to the structure and skin.

Additionally, you may consider HTML, CSS, and JavaScript in the following manner: HTML represents the construction of a home, CSS represents the interior and exterior décor, and JavaScript represents the power, water system, and a variety of other functional aspects that contribute to the building’s livability.

How Does HTML Work?

A typical website has numerous distinct HTML pages. A home page, an about page, and a contact page, for example, would all have their own HTML files.

HTML documents are files that terminate with the extension.html or.htm. The HTML file is read by a web browser, which produces its content for internet users to see.

Each HTML page has a sequence of HTML components, each of which consists of a collection of tags and attributes. HTML components serve as the foundation for a web page. A tag indicates to the web browser the beginning and end of an element, while an attribute defines the element’s properties.

An element’s three fundamental components are as follows:

Opening tag – used to indicate the point at which an element takes effect. Angle brackets are used to wrap the tag. For instance, to make a paragraph, use the start tag <p>.
Content – The output that other users view is referred to as the content.
Closing tag – identical to the opening tag, but preceded by a forward slash. For instance, </p> is used to finish a paragraph.

When these three components are combined, an HTML element is created:

<p>This is the HTML syntax for adding a paragraph.</p>

Another vital component of an HTML element is its attribute, which is comprised of two sections: a name and an attribute value. The name specifies the extra information that the user wants to provide, while the attribute value provides further details.

For instance, a style element that incorporates the color purple and the font family Verdana will appear as follows:

<p style=”color:purple;font-family:verdana”>This is how you add a paragraph in HTML.</p>

Another significant property is the HTML class, which is critical for development and programming. The class property includes style information that applies to many items that have the same class value.

For instance, we’ll apply the same style to the header <h1> and the paragraph <p>. Under the class. important, the style comprises a background color, a text color, a border, a margin, and padding. To maintain consistency in style between <h1> and <p>, add class=”important” to each start tag:

<html>
<head>
<style>
.important {
 background-color: blue;
 color: white;
 border: 2px solid black;
 margin: 2px;
 padding: 2px;
}
</style>
</head>
<body>
<h1 class="important">This is a heading</h1>
<p class="important">This is a paragraph.</p>
</body>
</html>

While the majority of elements have an opening and closing tag, certain elements, such as empty elements, do not need closing tags to function. These components lack an end tag due to their lack of content:

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

This image element has two attributes: the src attribute, which specifies the picture’s path, and the alt attribute, which specifies the descriptive text. However, it is void of both contents and an end tag.

Finally, each HTML page must begin with a <!DOCTYPE> declaration indicating the document type to the web browser. With HTML5, the public declaration of the doctype HTML will be as follows:

<!DOCTYPE html>

Features of HTML

It is a very basic and straightforward language. It is simple to comprehend and modify.
HTML makes it quite simple to create an excellent presentation due to the abundance of formatting elements.
Because it is a markup language, it enables the creation of dynamic web pages in addition to text.
It enables programmers to include a link on web pages (through the html anchor tag), which increases the user’s interest in surfing.
It is platform-independent, since it may be seen on a variety of platforms, including Windows, Linux, and Macintosh.
It enables the programmer to include graphics, videos, and audio into web pages, making them more beautiful and engaging.
Because HTML is a case-insensitive language, we may utilise lower- or upper-case tags.

HTML Evolution – What Differs Between HTML and HTML5?

HTML’s first version had 18 tags. Since then, each subsequent version of the markup has included additional tags and attributes. The language’s biggest important improvement to date occurred with the release of HTML5 in 2014.

The primary distinction between HTML and HTML5 is that HTML5 introduces additional forms of control. Additionally, HTML5 introduces many semantic elements that provide a clear description of the content, including <article>, <header>, and <footer>.

HTML’s Advantages and Disadvantages

HTML, like every other computer language, has strengths and weaknesses. HTML’s benefits and drawbacks are as follows:

Advantages:

Beginner-friendly. HTML is a simple and uniform markup language with a minimal learning curve.
Support. The language is extensively used, supported by several resources and a sizable community.
Accessible. It is fully free and open-source. HTML is supported natively by all modern web browsers.
Flexible. HTML integrates well with backend languages such as PHP and Node.js.

Disadvantages:

Static. It is mostly used to create static web pages. You may need to employ JavaScript or a back-end language such as PHP to provide dynamic functionality.
A distinct HTML page. Users must produce unique HTML web pages, even if the components are the same.
Compatibility with browsers. Certain browsers are sluggish to acquire new functionality. Occasionally, older browsers may not display newer tags correctly.

Also Read: How to Install WordPress Effectively: A Step by Step Guide

The structure of an HTML Element

Let’s go a little further into this paragraph element.

Our element’s primary components are as follows:

The opening tag: This section contains the element’s name (in this example, p) enclosed in opening and closing angle brackets. This specifies the point at which the element begins or takes effect — in this example, the beginning of the paragraph.
The closing tag: This is identical to the opening tag, except that it precedes the element name with a forward slash. This specifies the end of the element — in this example, the end of the paragraph. Failure to include a closing tag is a common beginner mistake that might result in odd effects.
The content: This is the element’s content, which is just text in this instance.
The element: It is composed of the opening tag, the closing tag, and the content.

Additionally, elements may contain the following attributes:

Attributes are used to store additional information about an element that you do not wish to display in the actual content. Here, class is the name of the attribute and editor-note is the value of the attribute. The class property enables you to provide a non-unique identifier to the element, which may be used to target it (and any other elements with the same class value) with style information and other information.

An attribute should always include the following:

There should be a gap between it and the element’s name (or the previous attribute, if the element already has one or more attributes).
The attribute’s name is followed by an equal sign.
The value of the attribute is enclosed in the opening and closing quote marks.

The Structure of an HTML Document

That summarises the fundamentals of each HTML components, yet they are insufficient on their own. Now we’ll examine the process by which separate HTML parts are integrated to create a whole HTML page. Let’s review the code we included in our index.html example (which we initially saw in the article Dealing with files):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="My test image">
  </body>
</html>

Here is what we have:

<!DOCTYPE html> — HTML document type. This is a necessary prelude. In the distant past, when HTML was in its infancy (around 1991/92), doctypes were intended to serve as links to a set of rules that an HTML page had to follow in order to be regarded as valid HTML, which may include automated error checking and other valuable features. However, they are no longer necessary and are mostly used to ensure that your document acts appropriately. That is all you need to know for the time being.
<html></html> — the element <html>. This element encompasses the whole page’s content and is sometimes referred to as the root element.
<head></head>— the head element. This element serves as a container for all the material you wish to put on your HTML page that is not visible to the page’s visitors. This comprises keywords and a page description for search results, CSS to style our material, and character set declarations, among other things.
<meta charset=”utf-8″> — This element specifies that your page should utilise the UTF-8 character set, which contains the great majority of characters used in the vast majority of written languages. In essence, it can now handle any textual information that you place on it. There is no reason not to do so, and it may assist prevent certain issues in the future.
<title></title>— the title element. This sets the page’s title, which shows in the browser tab in which the page is loaded. Additionally, it is used to describe the page when it is bookmarked/favorited.
<body></body> — the <body>element. This section includes whatever material you want to display to web viewers when they visit your website, whether it be text, photographs, videos, games, or playable audio files.

Images

Now, let us return our focus to the <img> element:

<img src="images/firefox-icon.png" alt="My test image">

As previously said, it embeds a picture in the location in which it appears on our website. This is accomplished using the src (source) element, which specifies the location of our image file.

Additionally, we’ve included an alt (alternative) property. This feature allows you to provide descriptive text for viewers who are unable to see the picture for one of the following reasons:

They are blind. Users with severe visual impairments often rely on equipment called screen readers to read the alt text aloud to them.
Something has gone wrong, and the picture is no longer visible. For instance, alter the path inside your src property to make it erroneous. If you save and refresh the page, something similar to this should appear in place of the image:

Alt text should include the phrase “descriptive text.” The alt text you create should give enough information for the reader to get a sense of what the picture is conveying. In this case, our present wording of “My test picture” is completely ineffective. A far more appropriate option for our Firefox logo would be “The Firefox logo: a fiery fox encircling the Earth.”

Now is the time to improve the alt text for your photograph.

Marking Up Text

This section will discuss many of the most important HTML elements that you’ll utilise to format the content.

Headings

You may use heading elements to indicate which sections of your text are headings — or subheadings. As with a book, an HTML document may include a primary title, chapter titles, and subtitles. HTML has six heading levels, <h1> to <h6>, but you’re likely to employ no more than three or four:

<!-- 4 heading levels: -->
<h1>My main title</h1>
<h2>My top level heading</h2>
<h3>My subheading</h3>
<h4>My sub-subheading</h4>

Anything in HTML between <!— and –> is considered an HTML comment. When the browser displays the code, it ignores comments. In other words, they are hidden from view on the website and only exist in the code. HTML comments allow you to provide valuable information about your code or logic.

Now, right above your <img> element, try adding a relevant title to your HTML page.

You’ll see that the first level of your header has an implicit style. Avoid using header components to increase the size or boldness of text, since they are required for accessibility and other purposes, such as SEO. Attempt to arrange your headers in a sensible order on your pages, without skipping levels.

Paragraphs

As previously stated, <p> components are used to hold paragraphs of text; they are typically used for marking up normal text content:

<p>This is a single paragraph</p>

Include your example text (which you should have downloaded from What will your website look like?) in one or many paragraphs just underneath your <image> element.

Lists

The majority of online information comes in the form of lists, for which HTML provides particular components. Lists are usually marked up with at least two components. The two most often encountered list types are sorted and unordered lists:

Unordered lists are useful for lists in which the order of the elements is irrelevant, such as a grocery list. These are encapsulated inside an <ul> element.
Ordered lists are appropriate for lists in which the order of the contents is significant, such as a recipe. These are encapsulated inside the <ol> element.

Each item included inside the lists is enclosed in a <li> (list item) element.

For instance, suppose we were to convert a portion of the following paragraph fragment into a list.

<p>At Mozilla, we are a collaborative worldwide community of engineers, philosophers, and builders… </p>

We could change the markup to something like this.

<p>At Mozilla, we're a global community of</p>
<ul>
  <li>technologists</li>
  <li>thinkers</li>
  <li>builders</li>
</ul>
<p>working together ... </p>

Consider adding a list to your example page, either sorted or unordered.

You can also Learn HTML from W3schools Website

Links

Links are critical – they are what define the web as a web! To create a connection, we’ll utilise a straightforward element —<a> — “a” being the abbreviation for “anchor.” Follow these procedures to convert text inside your paragraph into a link:

Select some text. The text “Mozilla Manifesto” was chosen.
As seen below, wrap the text with an <a> element: <a>Mozilla Manifesto </a>
As seen below, add a “href” property to the <a> element: <a href=””> Mozilla Manifesto </a>
Replace this attribute’s value with the web URL to which you want the link to point: <a href=”https://www.mozilla.org/en-US/about/manifesto/”>Mozilla Manifesto</a>

If you skip the https:// or http:// element of the web address, referred to as the protocol, you may get unexpected consequences. After creating a link, click it to ensure that it takes you where you intended.

Also Read: Google Search Console: How to Use Google Search Console to Improve your SEO