Hero Vired Logo
Programs
BlogsReviews

More

Vired Library

Complimentary 8-week Gen AI Course with Select Programs.

Request a callback

or Chat with us on

Home
Blogs
HTML Basics – Your Comprehensive Guide in 2024

HTML or HyperText Markup is a markup language that helps you define the structure of your content. It combines Hypertext and Markup language and is used primarily to design web pages using a markup language. 

 

While HTML Hypertext defines the link between web pages, a markup language defines the text document within the tag, which helps with the structure of web pages. HTML basic structure allows the creation and structure of paragraphs, sections, and links using HTML elements (the building blocks of a web page) such as tags and attributes (explained in later sections). 

 

This guide will explore the basics of HTML, including its history, what it does, the anatomy of HTML elements, and more.

 

What is HTML

HTML stands for Hypertext Markup Language. It is the standard markup language used to create the structure and presentation of web pages. HTML basics uses a set of tags and elements to define the different components of a web page, such as headings, paragraphs, images, links, and more. Roles & Responsibilities in Business Analytics: All You Need to Know.

 

Brief History of HTML

HTML was first created by Sir Tim Berners-Lee in late 1991 but was not released officially. It was later published as HTML 2.0 in 1995 and HTML 4.01 in late 1999, a major version of HTML.

 

Also known as the father of HTML, Tim proposed the first available description of HTML in the form of “HTML Tags.” HTML is now used by more than 90% of all websites.

 

HTML has evolved over time with various versions, a constantly evolving markup language. Here is a quick/timeline of the same-

 

  • HTML 1.0– It was released in 1993 to help share information that can be readable and accessible via web browsers.
  • HTML 2.0- Released in 1995 and contains all the features of HTML 1.0 along with some additional ones 
  • HTML 3.0– The version included improved features of HTML, thus offering more powerful characteristics for designing web pages.
  • HTML 4.01– One of the most widely used and successful versions of HTML before HTML 5.0, which is currently used worldwide

 

HTML Syntax:

HTML syntax refers to the rules and conventions that dictate how basic HTML code should be written. HTML basics uses a tag-based structure, where tags are enclosed in angle brackets (“< >”) and are used to define the format of different elements on a web page.

 

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

Understanding HTML Hierarchy:

HTML basics follows a hierarchical structure, also known as the Document Object Model (DOM). The hierarchy determines the relationships and nesting of basic HTML code elements within one another.

 

Importance of Understanding HTML Basics:

 

  • HTML basics defines the structure and semantics of web content, allowing browsers and search engines to interpret and display the information correctly. 
  • Basic HTML is a standardised language that ensures compatibility across different browsers and devices.
  • HTML basic program serves as a common language for web developers, designers, and other stakeholders involved in the creation of web pages.
  •  Having knowledge of HTML basics gives you the ability to customise and control the appearance and behaviour of web pages.

 

What Does HTML Do?

 

HTML’s basic structure has a range of different use cases. Some of these are-

 

  • Web development 
    Developers primarily use HTML code to design how a browser displays web page elements. For instance, hyperlinks, media files, and text.
  • Web documentation 
    Like Microsoft Word, HTML makes it easy to organize and format documents.
  • Internet navigation
    Using HTML basic, users can easily navigate and insert links between related pages and websites, as HTML makes it easier to embed hyperlinks.

 

Also, it is important to note that since the structure of an HTML document cannot create dynamic functionality, HTML is not considered a programming language. Instead, it is now considered an official web standard.

 

Understanding the Anatomy of HTML Elements

In this section, we will explore the basics of HTML and the anatomy of its element in little more detail. 

 

The average website includes different HTML pages. For instance- an about page, a home page, and a contact page would have separate HTML files. HTML documents are files that end either with a .html or .htm extension. 

 

A web browser reads the HTML file and renders its content to make it easier for internet users to view it. All HTML pages have various HTML elements consisting of basic HTML tags and attributes. These HTML elements are considered the building blocks of a web page. 

 

For instance, a tag explains to the web browser the beginning and end of the element, whereas an attribute is used to describe the characteristics of an element.

 

Consider the following line of content to understand this better-

His dog is quite hungry.

If we wish this line to stand by itself, we could specify that it is a paragraph by enclosing it in paragraph tags as shown below-

<p>His dog is quite hungry</p>

Main parts of Basic HTML Elements:

 

  • The Opening Tag
    The opening tag is the HTML basics which consists of the element’s name wrapped in opening and closing angle brackets. This states where the element starts to take effect. For example, use the start tag <p> to create a paragraph.

 

  • The Closing Tag
    This is one of the other basic HTML tags and is quite similar to the opening tag, with only a difference that includes a forward slash before the element name. This states where the element ends. It is important to remember that failing to add a closing tag in HTML elements is one of the most common errors that can lead to strange results.

 

  • The Content 
    As the name suggests, this is the element’s content, which in most cases, is just text. It is one of the other basic HTML tags.

 

The Element of HTML Tags

All the above three- the opening tag, the closing tag, and the content- together comprise the HTML element.

 

HTML Attribute

Apart from these, HTML elements can also have attributes that mainly contain extra information about the element you do not want to appear in the actual content. Attributes generally have an attribute name and an attribute value. 

 

The importance of the attribute name and the attribute value is that it allows you to give your element a non-unique identifier that you can use to target it (and any other elements with the same attribute value) with style information and other similar things.

 

Typically, an attribute should always contain the following- 

  • An equal sign should follow the attribute name.
  • There should be a space between the attribute and the element name (or the previous attribute if the element already has one/many attributes).
  • The attribute value should be wrapped by opening and closing quotation marks.

 

Nesting Elements

Nesting refers to the process of putting elements inside other elements. In the above example, if we want to state that his dog is quite hungry, we could wrap the word “quite” in an <strong> element, which means that the word ‘quite’ needs to be emphasized more.

<p> His dog is < strong > quite </strong> hungry.</p>

It is important here to make sure that your elements are properly nested. Like, in the above example, since we opened the <p> element first, followed by the <strong> element, we, therefore must close the <strong> element first, followed by the <p> element. The below sequence is incorrect:

<p> His dog is <strong>quite hungry.</p></strong>

You need to ensure that the elements of simple website HTML code are opened and closed so that they are inside or outside one another. 

In case of an overlap, as shown in the above example, your web browser will keep trying to make the best possible guess at what you are trying to convey, which can lead to unexpected results.

 

Void Elements

A void element in HTML is a unique group of elements that only have start tags and do not have any content within them. They also do not have ending tags and can only have attributes without any content. 

For example, <input type=”text”></input> is invalid HTML. 

In HTML, the void elements are as follows:

  • <base>
  • <br>
  • <area>
  • <col>
  • <hr>
  • <img>
  • <meta>
  • <embed>
  • <wbr>
  • <input>
  • <link>
  • <param>
  • <source>
  • <track>

 

To understand this better, take the <img> element in an HTML page:

 

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

 

This contains two attributes. However, there is no closing </img> tag and no inner content. This is mainly because an image element does not wrap the content to affect it. Instead, its purpose is to embed an image in the HTML page where it appears.

 

Other HTML Elements

HTML elements in simple website HTML code typically appear in lowercase and include a start tag, an end tag, and some content. 

 

Here we will discuss some of the common and basic HTML elements you will use to mark up the text.-

  1. Image (<img>)
    The HTML image element is used to embed an image into the text or document. It usually requires a source attribute to render properly. An alt attribute is also needed if the image has loading troubles or the reader struggles with visual impairment.

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

  2. Headings (<h1>-<h6>)

    Heading elements in HTML represent various levels of section headings. Here <h1> is the highest section level, whereas <h6> is the least prominent or lowest one. While HTML contains 6 heading levels, <h1> – <h6>, you will commonly only use 3 to 4 only.

    E.g.,                <h1>Heading 1</h1>
                <h2>Heading 2</h2>
                <h3>Heading 3</h3>
                <h4>Heading 4</h4>

  3. Links

    Links are an important part of the web. To be able to add a link, we need to use a simple element — <a> — “a” here is the acronym for “anchor.” You can follow the below steps to make text within your paragraph into a link-

    Select some text. E.g., “Dominos Highlights.”

    Now wrap the text in an <a> element, as below:

    • <a>Dominos Highlights</a>
    • Copy to Clipboard
    • Give the <a> element an href attribute, as below:
    • <a href=”>Dominos Highlights</a>
    • Copy to Clipboard
    • Now fill in the value of this attribute with the web address that you want the link to:

    <a href=”https://www.dominis.org/en-US/about/highlights/”>Dominos Highlights</a>

    • Copy to Clipboard
      Note– You might get some unexpected results if you do not add the HTTPS:// or http:// part, called the protocol, at the beginning of the web address. Once the link is done, click it to ensure it takes you to the right place.

  4. Paragraph  (<p>)

    The HTML paragraph element represents a paragraph. When placing <p></p> tags around text, you will ensure to make that text start on a new line. You will use <p> elements frequently when marking up regular text content:

    E.g., <p>This is a paragraph.</p>

  5. Headings (<h1>-<h6>)

    The HTML heading elements represent different levels of section headings. Here <h1> is the highest section level and the most prominent, whereas <h6> is the lowest and least prominent one. While HTML contains 6 heading levels, <h1> – <h6>, you will commonly only use 3 to 4 only.

    E.g.,        <h1>Heading 1</h1>
                <h2>Heading 2</h2>
                <h3>Heading 3</h3>
                <h4>Heading 4</h4>
                <h5>Heading 5</h5
                <h6>Heading 6<h6>

  6. Lists

    Since most of the web’s content is in the form of lists, basic HTML page has special elements for these. Marking up lists in HTML always consists of at least two elements. Among the most common types of ID lists are-

    • Unordered lists– As the name suggests, these are the lists where the order of the items does not matter. These are usually wrapped in an <ul> element.
    • Ordered lists- Unlike unordered lists, ordered lists are the ones where the order of the items does matter. E.g., a food recipe. These are wrapped in an <ol> element.

    Also, it is important to note that each item inside the lists is put inside an <li> (list item) element.

    For instance, if you wish to turn the below paragraph fragment into a list-

    <p> At McDonald’s, we offer a range of items such as burgers, fries, and wraps as a part of the new menu…

    This is how you do it-

    • </p>
    • Copy to Clipboard

    We could change the markup to this

    <p>At Mcdonald's, we offer a range of items</p>
<ul>
  <li>burgers</li>
  <li>fries</li>
  <li>wraps</li>
</ul>
<p>as a part of the new menu…</p>

Quick glance at the Elements of HTML Basics:

HTML Element Description
<html> The root element that represents an HTML document
<head> Contains meta information, title, scripts, and styles for the page
<body> Represents the content of the HTML document
<div> A container that groups and organizes content
<p> Defines a paragraph of text
<a> Creates a hyperlink to another web page or resource
<img> Inserts an image into the webpage
<table> Represents tabular data
<form> Used to create interactive input forms
<h1> – <h6> Headings of different sizes for hierarchical structure
<ul> Defines an unordered list
<li> Represents an item in a list
<input> Creates an input field
<button> Generates a clickable button element
<span> Used to style and group inline elements

Please note that this is not an exhaustive list, as HTML offers many more elements for various purposes.

 

Rules of HTML

There are five important rules for coding with HTML tags.

  1. HTML Tags should always be surrounded by angle brackets as in <HAIR>.
  2. Most HTML tags come in pairs and surround the material they affect. This means that the first tag turns the action on, whereas the second turns it off.
  3. In the basic structure of HTML, the second tag, or the “off switch” always begins with a forward slash. 
  4. Since tags are always embedded, when you start a tag within another tag, you must first close that inner tag before closing the outer tag.
  5. Many basic HTML tags have optional attributes that modify the tag’s behavior using different values. For instance, the <P> (paragraph) tag’s ALIGN attribute allows you to change the default (left) paragraph alignment. Likewise, <P ALIGN=CENTER> helps you center the next paragraph on the page.

 

Adding Images and Multimedia:

In learning HTML basics program, you can easily add multimedia elements to your web pages to enhance their visual appeal and provide a richer user experience. Use the <img> tag to add images and specify the source (src) attribute with the image file’s URL. 

 

Best Practices and HTML 5 Features:

  • Properly sizing and compressing images to reduce file size and improve loading times.
  • Using alternative text (alt attribute) to describe images for accessibility purposes.
  • Providing fallback content for multimedia elements, ensuring compatibility with older browsers.
  • Utilising HTML5 features like the <figure> and <figcaption> tags to semantically structure and caption images.

 

Conclusion:

Adding images and multimedia elements to web pages can greatly enhance the visual appeal and engagement of your content. HTML basic program provides various tags and features to easily incorporate images, videos, audio, and other multimedia components. 

FAQ's

To create a hyperlink, use the (anchor) tag. Here's a summary of the process:
  • Start the hyperlink tag.
  • Replace "URL" with the destination URL or the file path of the page you want to link to.
  • Provide the text or image that will serve as the link content between the opening and closing anchor tags
  • To create navigation within your HTML pages, you can use anchor tags along with IDs or named anchors. Here's a brief overview:
  • Assign an ID or a name attribute to the specific section or element within the same page you want to link to.
  • Create a hyperlink with a href attribute pointing to the ID or name of the target element:
  • The target element can be any HTML element, such as a heading, a div, or a specific section.
Navigation Menus:
  • For more structured navigation, you can create navigation menus using unordered lists (
      ) and list items (
    • ). Here's a summary:
    • Wrap your navigation links in an unordered list:
        .
    • Create list items for each link:
    • .
    • Inside each list item, create the hyperlink
    • Style the navigation menu using CSS to achieve the desired appearance.
  1. Right-Click and Select "View Page Source":In most web browsers, you can right-click on a web page and select "View Page Source" or "Inspect" from the context menu.
  2. Keyboard Shortcuts: You can use keyboard shortcuts to quickly access the HTML source code. For example, in Windows, you can press Ctrl+U, and in macOS, you can press Option+Command+U to open the HTML source code in a new tab or window.
  3. Menu Options: Some web browsers also provide menu options to access the HTML source code. Look for options like "View" or "Developer" in the browser's menu bar and explore the available options to access the page source.

High-growth programs

Choose the relevant program for yourself and kickstart your career

You may also like

Carefully gathered content to add value to and expand your knowledge horizons

Hero Vired logo
Hero Vired is a premium LearnTech company offering industry-relevant programs in partnership with world-class institutions to create the change-makers of tomorrow. Part of the rich legacy of the Hero Group, we aim to transform the skilling landscape in India by creating programs delivered by leading industry practitioners that help professionals and students enhance their skills and employability.
Privacy Policy And Terms Of Use
©2024 Hero Vired. All Rights Reserved.
DISCLAIMER
  • *
    These figures are indicative in nature and subject to inter alia a learner's strict adherence to the terms and conditions of the program. The figures mentioned here shall not constitute any warranty or representation in any manner whatsoever.