Web Architect

HTML for Beginners: Building the Skeleton of a Webpage

DHARMENDRA PRAJAPATI's photo
DHARMENDRA PRAJAPATI
·

6 min read

Table of contents

Have you ever wondered how the structure of a website is created?
Every webpage you visit, from a personal blog to a complex e-commerce site, relies on HTML to define its structure and display content in a meaningful way. That structure can be created using HTML.

What is HTML

HTML stands for HyperText Markup Language. It is a standard markup language used to create and structure on the web. It serves as a foundation of every webpage you see online. The term “HyperText” refers to the ability to link one document to another through hyperlinks, which are core feature of the web. “Markup Language” means document uses tags and attributes to define the structure and meaning of the content.

HTML is used to create web pages. When you view a web page in a browser like Google Chrome or Safari, your browser has parsed an HTML file and is displaying visual elements like text, buttons, and images based on the contents of that file.

Think of HTML as the blueprint for a house. Just as a blueprint outlines the structure and layout of a house (rooms, walls, windows), HTML provides the structure and layout of a webpage.

HTML follows a hierarchical structure, meaning elements are nested within each other, creating a clear organization for the content.

Basic Structure of the HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 
        <head>: This section contains meta-information about the page, 
        such as the title that appears in the browser tab.
    -->
    <title>Document</title>
</head>
<body>
    <!-- 
        <body>: This section contains the visible content of the webpage that users 
        interact with.
    -->
    <h1>Welcome to my webpage!</h1>
</body>
</html>

  • The <!DOCTYPE html> Declaration: This line tells the browser that the document is an HTML5 document. HTML5 is the latest version of HTML, offering new elements and features. (We will delve deeper into the exciting new features and enhancements introduced in HTML5 later in this article.)

  • The <html> is like the main container for everything on the page. It is root tag of the HTML document.

  • The <head> section contains crucial metadata, including the <title>, <meta> (description, keywords), and links to external resources like CSS, which are essential for both user experience and search engine crawlers to understand and index the page effectively.

  • The <body> section houses all the visible elements of a webpage, including text, images, links, forms, and more, that users interact with.

Understanding HTML: Tags, Elements and Attributes

In HTML, the visual structure of a webpage is built using tags and elements. These fundamental components define how content is organized and displayed within a browser.

Tags:

Tags are individual commands within HTML. They typically come in pairs:

  • An opening tag (e.g., <p>)

  • A closing tag (e.g., </p>)

Some tags are self-closing, such as:

  • <br> (for a line break)

  • <hr> (for horizontal line)

Elements:

An element is the combination of a tag and the content it encloses.

For example:
<p>This is a paragraph.</p> is a paragraph element.

Attributes:

An attribute is extra information that defines how the element looks and/or behaves. Some elements require certain attributes, and almost any element can take optional attributes.An attribute is always found in the opening tag of an HTML element. Most have the syntax name=“value” though some attributes only require the name without any assigned value.

For example:
<a href=”www.chaicode.com” target=”_blank”> ChaiCode </a>
In this example href and target is the attributes. href attribute contain URL as a value.

Commonly used tags

CategoryTagsDescription
Structural<html>, <head>, <title>, <body>, <base>, <link>, <meta>Defines the overall structure of the document and metadata.
Text Formatting<h1> to <h6>, <p>, <span>, <br>, <hr>, <strong>, <em>, <b>, <i>, <u>, <mark>, <small>Used to format and style text, including headings, paragraphs, and inline elements.
Lists<ul>, <ol>, <li>, <dl>, <dt>, <dd>Used to create ordered, unordered, and description lists.
Media<img>, <audio>, <video>, <picture>, <source>, <track>, <iframe>Embeds media elements such as images, audio, and video into the webpage.
Forms<form>, <input>, <textarea>, <button>, <label>, <select>, <option>, <fieldset>, <legend>Collects user input via fields, buttons, and other interactive elements.
Tables<table>, <thead>, <tbody>, <tfoot>, <tr>, <th>, <td>, <caption>, <colgroup>, <col>Organizes data into structured tabular formats.
Interactive Elements<details>, <summary>, <dialog>Adds interactivity, such as collapsible sections and dialog boxes.
Semantic<header>, <footer>, <main>, <article>, <section>, <aside>, <nav>Introduces semantic structure and meaning to webpage sections.
Embedded Content<embed>, <object>, <param>Embeds external content or objects, such as plugins or applications.
Scripting<script>, <noscript>, <canvas>Embeds or provides alternative content for scripts, and enables graphics rendering.
Styles and Themes<style>Embeds CSS rules directly in the document.
Miscellaneous<bdi>, <bdo>, <wbr>Controls text direction or suggests line break opportunities.
Web Components<template>, <slot>Defines reusable and customizable components for modern web development.
💡
For a comprehensive list of HTML tags, check out this detailed cheat sheet.

Structuring Content with Semantic HTML

Semantic tags and elements in HTML are special tags that describe the meaning of the content they contain. Unlike regular tags like <div> or <span>, which don’t tell us anything about what’s inside them, semantic tags explain what the content is for, making the code easier to read and understand for both humans and machines.

Why Do We Need Semantic Tags?

  1. Improves Readability: Developers can quickly understand what each section of the code does.

  2. Better Accessibility: Assistive technologies (like screen readers) can navigate content more effectively.

  3. Search Engine Optimization (SEO): Search engines like Google can better understand the structure of your page, which improves rankings.

  4. Organized Code: Makes the HTML code neat, logical, and easier to maintain.

Most semantic tags were introduced in HTML5. Before diving deeper, let's take a moment to understand what HTML5 is and explore its new features.

  • HTML5, the 5th version of HTML, introduces several new features that enhance the creation of both static and dynamic websites. Here’s a quick summary:

    1. Semantic Elements: New tags like <header>, <footer>, <section>, <article>, <nav>, <main>, and <aside> for better content structure and accessibility.

    2. Multimedia Support:

      • <audio> and <video> tags for embedding media without external plugins.

      • <track> for subtitles and captions.

    3. Improved Forms:

      • New input types: email, url, number, date, color, etc.

      • Attributes like placeholder, required, and pattern for better validation.

    4. Canvas and SVG: Support for graphics and animations using <canvas> and SVG (Scalable Vector Graphics).

    5. APIs: New JavaScript APIs for functionality:

      • Geolocation API: User location.

      • Web Storage: Local/session storage replacing cookies.

      • Drag-and-Drop: Interactive elements.

      • WebSockets: Real-time communication.

    6. Performance and Accessibility:

      • Simplified doctype: <!DOCTYPE html>.

      • Improved accessibility with ARIA roles and semantic tags.

Conclusion

HTML forms the basic structure or foundation of a webpage, acting as its skeleton. It is essential for effectively displaying webpage content and is a crucial first step in learning web development. I hope this article has helped you understand HTML better. That’s all for today—thank you for reading!

ChaiCodeHTMLHTML5Web Development