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:

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.

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

This is a paragraph with extra spaces.

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

<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:

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.

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

This is a paragraph with extra spaces.

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

<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:

<!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>

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

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.

<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:

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

Here are some common HTML elements you'll see:

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:

Here are some common HTML attributes you'll see:

<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.

<!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:

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.