loader

Introduction to HTML

What is HTML?

HTML (HyperText Markup Language) is the standard markup language for creating web pages and web applications. It describes the structure of a web page semantically and originally included cues for the appearance of the document.

HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects, such as interactive forms, may be embedded into the rendered page.

HTML provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets.

Key Features of HTML

  • Simplicity: HTML is easy to learn and use, with a straightforward syntax.
  • Platform Independence: HTML works across different platforms and browsers.
  • Flexibility: HTML can be integrated with other languages like CSS and JavaScript.
  • Accessibility: HTML provides features for creating accessible content for all users.
  • SEO Friendly: Well-structured HTML helps search engines understand your content.
  • Hyperlinks: HTML allows linking to other documents, creating the web's interconnected nature.
  • Multimedia Support: HTML supports various media types including images, audio, and video.

HTML Versions

Version Year Key Features
HTML 1991 The original version with 18 HTML tags
HTML 2.0 1995 Standard for core HTML features
HTML 3.2 1997 Added tables, applets, text flow around images
HTML 4.01 1999 Added stylesheets, scripting, frames, embedded objects
XHTML 2000 Reformulation of HTML as an XML application
HTML5 2014 Added semantic elements, form controls, multimedia elements, APIs

Basic HTML Document Structure


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document Title</title>
    <link rel="stylesheet" href="styles.css">
    <script src="script.js" defer></script>
</head>
<body>
    <header>
        <h1>Website Heading</h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <section>
            <h2>Section Title</h2>
            <p>This is a paragraph of text.</p>
        </section>
        
        <article>
            <h2>Article Title</h2>
            <p>This is an article content.</p>
        </article>
    </main>
    
    <footer>
        <p>© 2023 My Website. All rights reserved.</p>
    </footer>
</body>
</html>
                        

HTML and Related Technologies

HTML works together with several other technologies to create modern web experiences:

CSS

Cascading Style Sheets handle the presentation and styling of HTML elements, controlling layout, colors, fonts, and responsive design.

JavaScript

Adds interactivity and dynamic behavior to web pages, allowing for complex functionality and user interactions.

APIs

HTML5 introduced various APIs for advanced features like geolocation, storage, drag-and-drop, and canvas for graphics.