Have you ever wondered how websites are built ? It all starts with HTML which provides the skeleton type structure that gives every webpage its shape and structure. Think of HTML as the blueprint of a building just like an architect designs a structure with rooms, doors, windows, floors, etc. same as HTML defines the layout of a webpage with headings, paragraphs, images, videos, links, etc. without HTML a webpage would be an unorganized mess. But don’t worry in this article you will get to know HTML basics, how it gives structure to webpages what are tags and elements so without any further delay lets start.

What is HTML ?

HTML stands for HyperText Markup Language which serves as the backbone of any webpage on the Internet just like a building requires a solid framework to stand tall same as a website relies on HTML for structure. HTML is used to create and structure content on the webpage. It organizes text, images, videos, links, etc into a readable and visual format for the user.

Breaking Down - HyperText Markup Language

1 → HyperText → Hypertext is the text which contains links to other texts. It refers to the links (hyperlinks) that allow you to navigate between webpages by clicking on them.

2 → Markup → Markup is a way of writing instructions (tags) that tell the browser how to display the content on the webpages.

3 → Language → HTML is a set of rules that web browsers understand to display content properly to the user.

What are Tags and Element ?

Before knowing HTML basic structure you have to know about tags and elements. To understand it better see the diagram below -

HTML Basic Structure

Basic Structure of HTML

<!DOCTYPE html>
<html lang = "en">
<head>
    <title>Wepage Title</title>
</head>
<body>
    <h1>Heading 1</h1>
    <p>This is a paragraph</p>
</body>
</html>

As you can see in the above code this is the basic structure of HTML. Now lets each line code line by line what it is and what it does -

→ <!DOCTYPE HTML> → <!DOCTYPE stands for Document type declaration whereas HTML specifies that the document is written in HTML 5 (the latest version of HTML).

→ <html> → Simply <html> acts as a container for the entire document. And lang = “en” means it defines the language of the document.

→ <head> → The <head> contains metadata such as the page <title> (which contains webpage title) which you can see in the above code.

→ <body> → The <body> holds all the visible content that users interact with.

→ Common Tags → As you see in the above code in body there are <h1> and <p> tags. <h1> for heading and <p> for paragraph. Common tags are <h1> to <h6>, <a>, <img>, <br>, <ul>, <ol>, <li>, <div>, etc. There are many tags which you can learn about these tags and many other tags and what it can do here is the link - (https://developer.mozilla.org/en-US/docs/Web/HTML/Element)

Here are common HTML tags -

→ Structure → <!DOCTYPE>, <html>, <head>, <body>

→ Content → <h1> to <h6>, <p>, <a>, <img>, <br>

→ Formatting → <b>, <i>, <u>, <small>

→ Lists → <ul>, <ol>, <li>

→ Tables → <table>, <tr>, <th>, <td>

→ Media → <audio>, <video>

→ Semantic → <header>, <footer>, <article>, <section>, <nav>, <aside>

→ Forms → <form>, <input>, <label>, <textarea>

Good Practices for Writing HTML

→ Proper Nesting → In the previous section you will surely notice a nesting structure which ensure that tags are correctly nested. Example -

<div>
    <p>Properly nested.</p>
</div>

→ Meaningful Tag Names → Use the semantic tags like <header>, <nav>, <main>, <article>, <footer>, etc to improve readability and accessibility for physically challenged people. (you will see in the upcoming section what are semantic tags).

Semantic Tags and Non-Semantic Tags

Semantic Tags

Semantic tags clearly define their meaning in a way that is understandable both to developers and browsers. These tags especially help physically challenged people. It makes surfing the webpage without any problem and also enable accessibility for screen readers. It also helps in Search Engine Optimization (SEO) in HTML. SEO is the process of using HTML tags to improve a websites visibility and ranking in search results.

<!DOCTYPE html>
<html lang = "en">
<head>
    <title>Blog</title>
</head>
<body>
    <header>
        <h1>Blog Heading</h1>
    </header>
    <article>
        <h2>Post Title</h2>
        <p>This is a blog post</p>
    </article>
    <footer>
        <p>Contact Us</p>
    </footer>
</body>
</html>

Common Semantic tags -

→ <header> → Represents the header section of a page or section.

→ <footer> → Represents the footer section.

→ <article> → Represents self-contained content such as a blog post.

→ <section> → Groups related content into sections.

→ <nav> → Represents navigation links.

→ <aside> → Represents content related to the main content like a sidebar.

Advantages -

→ Improves readability and maintainability.

→ Enhances SEO by helping search engines understand the structure.

→ Improves accessibility for screen readers.

Non-Semantic Tags

Non-semantic tags do not convey meaning or purpose. They are generic and can be used for any content making their purpose less clear without additional context..

<!DOCTYPE html>
<html lang = "en">
<head>
    <title>Blog</title>
</head>
<body>
    <div>
        <h1>Welcome to My Blog</h1>
    </div>
    <div>
        <h2>Post Title</h2>
        <p>This is a <span>Blog</span> post</p>
    </div>
</body>
</html>

Example -

→ <div> → A generic container which takes the whole width (block line element).

→ <span> → Also a generic container which takes as much as space required for the element not more than that (inline element).

Disadvantage -

→ Not ideal for accessibility or SEO.

Conclusion

HTML is the skeleton of the web providing the structure which is needed for content to be displayed effectively. By following best practices like proper nesting and using semantic tags you can build webpages that are not only functional but also accessible and easy to maintain.

Thanks for reading this far !

HTML : A Beginner Guide

Building the Skeleton of a Webpage

Table of contents