Home

Learning Hub

Articles

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.

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-

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.

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.