HTML - Introduction

What is HTML?

HTML (Hypertext Markup Language) is the standard markup language used to create and structure content on the web. It is the foundation of all web pages and is used to define the structure and layout of the content that appears on a website.

HTML uses a system of tags and attributes to mark up content, such as:

Element Description
Headings Different levels of headings (e.g., <h1>, <h2>, <h3>)
Paragraphs Paragraph text (<p>)
Lists Ordered (<ol>) and unordered (<ul>) lists
Links Hyperlinks (<a>) to other web pages or resources
Images Embedding images (<img>) into web pages

These tags tell web browsers how to display the content, making it easy for users to read and interact with web pages.

In web development, HTML works together with:

  • CSS (Cascading Style Sheets): Used to style and layout the content
  • JavaScript: Used to add interactivity and functionality to web pages

HTML is an essential skill for anyone involved in web development, as it provides the basic structure for all web content. Learning HTML is the first step in creating websites and is a valuable skill for web designers, developers, and content creators.

Example of HTML code with extra spaces

<p>This    is   a   paragraph   with    extra   spaces.</p>

When a browser renders this code, it will display the text as:

This is a paragraph with extra spaces.

Example of mismatched HTML tags

<p>This is a paragraph.</div>

In this case, the opening <p> tag is closed with a </div> tag, which is incorrect. The right way to close the paragraph is:

<p>This is a paragraph.</p>

History of HTML

HTML has a history that goes back to the early days of the World Wide Web. It was first made by Tim Berners-Lee, a British computer scientist, in the late 1980s while he was working at CERN (European Organization for Nuclear Research). Berners-Lee created HTML as a way to structure and share documents on the internet.

The first version of HTML was released in 1991 and was very basic. It only had a few tags for structuring text, such as headings and paragraphs. Over time, HTML changed to include more features and functionality.

Here are some key milestones in the history of HTML:

Year Milestone
1993 HTML 1.0 was released, which included support for basic text formatting, links, and images.
1995 HTML 2.0 was released, which added support for forms, tables, and more advanced formatting options.
1997 HTML 3.2 was released, which introduced the <font> tag for controlling text appearance and the <table> tag for creating tables.
1999 HTML 4.01 was released, which added support for CSS (Cascading Style Sheets) and other advanced features.
2000 XHTML 1.0 was released, which combined HTML and XML (Extensible Markup Language) to create a more strict and standardized version of HTML.
2014 HTML5 was released, which is the current version of HTML. HTML5 introduced many new features, such as support for video and audio, canvas for drawing graphics, and more semantic elements like <header>, <footer>, and <article>.

HTML5 is made to be backwards compatible with older versions of HTML, so websites created using earlier versions of HTML still work with modern web browsers. However, many web developers now use HTML5 because of its new features and improved functionality.

Today, HTML continues to change and improve, with new features and technologies being added regularly. As the backbone of the web, HTML plays an important role in creating the interactive and engaging websites that we use every day.

Why Learn HTML?

HTML is the foundation of all websites and is an important skill for anyone involved in web development. Whether you're a professional web developer or just starting out as a hobbyist, learning HTML is necessary for creating and maintaining websites.

One of the main reasons to learn HTML is its importance in web development. HTML provides the structure and content of a website, which is then styled with CSS and improved with JavaScript. Without HTML, there would be no websites as we know them today. Understanding HTML is necessary for creating well-structured, semantic, and accessible websites that work across different browsers and devices.

Learning HTML also offers many benefits for both web professionals and hobbyists. For professionals, knowing HTML is a basic skill that is required for most web development jobs. It allows you to create and modify web pages, fix issues, and work with content management systems (CMS) and web frameworks. For hobbyists, learning HTML opens up possibilities for creating personal websites, blogs, and online portfolios. It also provides a solid foundation for learning other web technologies and can be a fun and rewarding hobby.

HTML is not only important on its own but also serves as a foundation for other web technologies. Once you have a good grasp of HTML, you can easily learn CSS to style your web pages and make them visually appealing. You can also learn JavaScript to add interactivity and dynamic functionality to your websites. Other web technologies, such as server-side programming languages (e.g., PHP, Python) and databases (e.g., MySQL), also rely on HTML for displaying content to users.

Furthermore, understanding HTML is valuable for working with popular content management systems like WordPress, Drupal, and Joomla. These platforms use HTML templates and themes to control the structure and appearance of websites. Knowing HTML allows you to customize these templates, create your own themes, and fix any issues that may arise.

Example: HTML code with extra spaces

<p>This    is   a   paragraph   with    extra   spaces.</p>

When a browser renders this code, it will display the text as:

This is a paragraph with extra spaces.

Example: Mismatched tags

<p>This is a paragraph.</div>

In this case, the opening <p> tag is closed with a </div> tag, which is incorrect. The right way to close the paragraph is:

<p>This is a paragraph.</p>

Getting Started with HTML

To start writing HTML, you need a few basic tools: a text editor and a web browser. A text editor is a program that lets you write and edit plain text files, such as Notepad (Windows) or TextEdit (Mac). But for a better coding experience, you may want to use a code editor made for web development, such as:

  • Visual Studio Code
  • Sublime Text
  • Atom
  • Brackets

These code editors have features like syntax highlighting, auto-completion, and file management that make writing HTML easier and faster.

To view your HTML pages, you'll need a web browser such as Google Chrome, Mozilla Firefox, Apple Safari, or Microsoft Edge. Web browsers read the HTML code and show the formatted content to users.

Creating a basic HTML document is simple. Open your text editor and create a new file. Start by writing the HTML document structure, which includes these elements:

Example of correct 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>My First HTML Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is my first HTML page.</p>
</body>
</html>

This code follows the proper HTML document structure with the <!DOCTYPE html> declaration, <html>, <head>, and <body> elements.

Let's break down the structure of an HTML document:

Element Description
<!DOCTYPE html> This declaration tells the browser that this is an HTML5 document.
<html> The root element of the HTML page, which contains all other elements. The lang attribute specifies the language of the document (e.g., "en" for English).
<head> Contains meta-information about the document, such as the character encoding, viewport settings, and the page title.
<meta charset="UTF-8"> Specifies the character encoding for the document (UTF-8 is the most common).
<meta name="viewport" content="width=device-width, initial-scale=1.0"> Sets the viewport for responsive design, making sure the page scales correctly on different devices.
<title> Defines the title of the web page, which appears in the browser's title bar or tab.
<body> Contains the main content of the HTML document, such as headings, paragraphs, images, and links.

Save the file with a .html extension (e.g., index.html) and open it in your web browser. You should see the heading "Hello, World!" and the paragraph "This is my first HTML page." displayed on the page.

As you continue learning HTML, you'll find out how to add more elements, attributes, and content to create structured and visually appealing web pages. Remember to always start with the basic document structure and build from there.

HTML Elements and Tags

HTML documents are made up of elements, defined by tags. Elements are the building blocks of an HTML page and structure content, such as headings, paragraphs, lists, links, and images. Tags mark the beginning and end of an element and provide information about its purpose and content.

An HTML element has three main parts:

  1. Opening tag: Starts an element, enclosed in angle brackets (< >). The opening tag has the element's name, such as <p> for a paragraph or for an image.

  2. Content: The element's content, which can be text, other elements, or both.

  3. Closing tag: Ends an element, also enclosed in angle brackets, with a forward slash (/) before the element's name. For example,

    closes a paragraph element.

Example of a paragraph element

<p>This is a paragraph of text.</p>

Some elements, called empty or void elements, don't have a closing tag or content. These elements are self-closing and insert content into the page without wrapping it. Examples of empty elements include:

Examples of empty elements

<img src="image.jpg" alt="A sample image">
<br>
<hr>
<input type="text" name="username">

Here are some common HTML elements you'll see:

Element Description
<h1> to <h6> Heading elements, with <h1> being the highest level and <h6> the lowest.
<p> Paragraph element, used for text blocks.
<a> Anchor element, used to create hyperlinks to other pages or resources.
<img> Image element, used to embed images into the page.
<ul>, <ol>, <li> List elements, used to create unordered (bullet) and ordered (numbered) lists.
<div> Division element, a generic container for grouping and styling content.
<span> Span element, an inline container for applying styles to a part of the text.

As you learn more about HTML, you'll find many more elements, each with its own purpose and attributes. By nesting elements within each other and applying appropriate tags, you can create well-structured and meaningful HTML documents.

HTML Attributes

HTML attributes give more information about an element and change its behavior or look. Attributes are in the opening tag of an element and have a name and a value, separated by an equals sign (=). The attribute value is always in quotes, either single ('') or double (").

Attributes are important in customizing and improving HTML elements. They can be used to:

Purpose Description
Give more information about an element For example, the source of an image or the destination of a link
Change the look of an element For example, the width and height of an image or the color of text
Control how an element works For example, if a form input is required or if a link opens in a new tab

Here are some common HTML attributes you'll see:

Attribute Description Example
src Specifies the source URL of an image or media element <img src="image.jpg">
href Specifies the destination URL of a link <a href="https://www.example.com">Link</a>
alt Provides alternative text for an image, shown when the image can't be loaded or for screen readers <img src="image.jpg" alt="A sample image">
class Specifies one or more class names for an element, used for styling with CSS <p class="highlight">This paragraph has a class.</p>
id Specifies a unique identifier for an element, used for styling with CSS or manipulation with JavaScript <div id="main-content">The main content goes here.</div>
style Allows inline CSS styles to be applied to an element <p style="color: blue; font-size: 16px;">This paragraph has inline styles.</p>
title Provides more information about an element, shown as a tooltip when hovering over the element <a href="https://www.example.com" title="Visit Example.com">Link</a>

Examples of elements with attributes

<img src="logo.png" alt="Company Logo" width="200" height="100">
<a href="https://www.example.com" target="_blank">Visit Example.com</a>
<input type="text" name="username" required>
<p class="intro" style="font-weight: bold;">This is an introduction paragraph.</p>

Not all attributes work with every element. Each element has its own set of valid attributes, and using invalid attributes won't change the element.

As you work with HTML, you'll learn more about the different attributes available and how they can be used to create dynamic and interactive web pages. By combining elements and attributes well, you can structure your content and control how it looks to create engaging and user-friendly websites.

HTML Document Structure

Every HTML document follows a basic structure that includes the doctype declaration and the <html>, <head>, and <body> elements. This structure helps browsers and other tools understand and display the content correctly.

The doctype declaration is the first line of an HTML document and tells the browser which version of HTML is being used. In HTML5, the doctype declaration is simply <!DOCTYPE html>. This declaration is not an HTML tag but an instruction to the browser.

Following the doctype declaration, the <html> element is the root element of an HTML page. It contains all the content and structures of the document. The lang attribute inside the <html> tag specifies the language of the document, such as "en" for English or "es" for Spanish.

Inside the <html> element, there are two main sections: <head> and <body>.

The <head> element contains meta-information about the document that is not displayed on the page itself. This includes:

  • <title>: Specifies the title of the web page, which appears in the browser's title bar or tab.
  • <meta>: Provides metadata about the document, such as character encoding, viewport settings, keywords, and descriptions.
  • <link>: Connects the document to external resources, such as CSS stylesheets or favicons.
  • <script>: Includes JavaScript code or links to external scripts.

The <body> element contains the main content of the HTML document that is displayed in the browser window. This includes text, images, links, tables, forms, and other elements that make up the visible part of the web page.

Example: 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>My Web Page</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Welcome to My Web Page</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>
        <h2>About Me</h2>
        <p>Hi, I'm John Doe. I'm a web developer and designer.</p>
    </main>
    <footer>
        <p>&copy; 2023 My Web Page. All rights reserved.</p>
    </footer>
    <script src="script.js"></script>
</body>
</html>

Proper document structure is important for several reasons:

Reason Explanation
Search engine optimization It helps search engines understand and index the content of your web page.
Code maintainability It makes your code easier to read and maintain.
Cross-browser compatibility It ensures that your web page displays correctly across different browsers and devices.
Accessibility It improves accessibility for users with assistive technologies, such as screen readers.

By following the standard HTML document structure and using appropriate elements and attributes, you can create well-organized, semantically meaningful, and accessible web pages that work well for all users.