HTML (Hypertext Markup Language)

    By
    Himanshu Tyagi
    -
    0
    7
    « Back to Glossary Index

    HTML (Hypertext Markup Language) is the standard markup language used to create and structure web pages.

    Markup languages are designed to define and present text, and HTML is the primary example used on the web. In an HTML file, content is marked up using tags that explain the purpose of each part of the document.

    HTML consists of a series of elements—units of markup that wrap or enclose text and other content to define its structure and behavior. Each element tells the browser how to display the content, labeling pieces such as headings, paragraphs, links, lists, and images.

    Understanding HTML Structure

    HTML organizes documents through nested elements and tags. An element is defined by an opening tag, content, and a closing tag. For example, <p>My first paragraph.</p> contains a <p> start tag, text content, and a </p> end tag. Some elements, such as <br>, have no content and no end tag; these are called empty elements.

    Elements can be nested, meaning one element contains others. Every HTML document begins with a <!DOCTYPE html> declaration followed by the <html> element, which wraps all content and is known as the root.

    Inside <html> are two main sections: <head>, which contains metadata like the page title and character encoding, and <body>, which holds the visible content.

    Common content elements inside <body> include headings (<h1>–<h6>), paragraphs (<p>), lists (<ul>, <ol>), images (<img>), links (<a>), and many more.

    HTML Tags, Elements, and Attributes

    • Tags are the textual markers—words in angle brackets—that define the start and end of an element. Tags are not case-sensitive; <P> means the same as <p>, though lowercase is recommended for consistency.
    • Elements are the building blocks of HTML and consist of a start tag, content, and end tag. Nesting elements properly ensures the document is well-structured.
    • Attributes provide additional information about elements. All HTML elements can have attributes; they appear inside the start tag and usually come in name="value" pairs. Attributes specify details such as link destinations (href on <a>), image paths (src on <img>), and alternative text (alt on <img>).

    Common HTML Tags and Their Purposes

    The table below summarizes key HTML tags, their roles, and corresponding examples:

    HTML Tag Purpose & Description Example
    <html> Root element of an HTML document; wraps all other elements. <html lang="en">...</html>
    <head> Contains metadata like the document title and links to CSS; not displayed to users. <head><title>My Page</title></head>
    <title> Specifies the page title shown in the browser tab. <title>My Test Page</title>
    <body> Holds all visible content (text, images, videos, etc.). <body><p>Hello!</p></body>
    <h1>–<h6> Define headings of different levels; <h1> is the largest and most important. <h1>My First Heading</h1>
    <p> Denotes a paragraph of text. <p>My first paragraph.</p>
    <a> with href Creates a hyperlink; the href attribute specifies the URL. <a href="https://www.example.com">Visit Example</a>
    <img> with src and alt Embeds an image; src provides the image path and alt supplies alternative text for accessibility. <img src="img_girl.jpg" alt="Girl with a jacket">
    <br> Inserts a line break; an example of an empty element with no closing tag. <p>This is a<br>line break</p>
    How HTML is Used

    Developers write HTML files using plain text editors. A simple document might start with <!DOCTYPE html>, followed by the <html>, <head>, and <body> tags.

    Inside <body>, they place headings, paragraphs, lists, images, and links to structure the content.

    For example:

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My Test Page</title>
  </head>
  <body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
    <a href="https://www.example.com">Visit Example</a>
    <img src="images/example.png" alt="Example image">
  </body>
</html>

    The browser reads this markup, determines the meaning of each element, and renders the page accordingly.

    Attributes like lang, charset, href, src, and alt provide critical information for accessibility, internationalization, and linking.

    Some elements, such as <img>, are void elements—they have no closing tag.

    HTML tags are not case-sensitive, but lowercase is recommended for consistency and compatibility.

    Related Technologies

    HTML often works in concert with other web technologies:

    • CSS (Cascading Style Sheets): Defines the presentation and layout of HTML elements.
    • JavaScript: Adds interactivity and dynamic behavior to web pages.
    • XML and XHTML: Markup languages are closely related to HTML; XHTML applies stricter rules like XML.
    • Semantic HTML: Refers to using tags that convey meaning about the content (e.g., <header>, <section>, <article>, <footer>), which improves accessibility and SEO.

    Summary

    HTML is the foundation of web content. It is a markup language that describes the structure of a page using nested elements and tags. Each element consists of a start tag, optional content, and an end tag, with attributes providing extra details.

    By combining these elements, developers construct documents browsers can interpret and display. Understanding the basic structure of HTML, the purpose of common tags, and the role of attributes lays the groundwork for learning more advanced web technologies.

    « Back to Glossary Index