HTML Basics Tutorial

What is HTML?

HTML stands for HyperText Markup Language. It's the standard markup language for documents designed to be displayed in a web browser. HTML describes the structure of a web page semantically and originally included cues on its appearance.

Think of HTML as the skeleton of a web page. It defines the different parts of the page, like headings, paragraphs, images, and links, using a system of tags.

Basic Structure of an HTML Document

Every HTML document has a basic structure that includes a doctype declaration, an html element, and head and body sections.

Example: Basic HTML 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 Web Page</title>
</head>
<body>

    <h1>Hello, World!</h1>
    <p>This is my first paragraph.</p>

</body>
</html>

Key Components Explained:

<!DOCTYPE html>: Declares the document type and version of HTML.
<html>: The root element of an HTML page. The lang="en" attribute specifies the language of the document.
<head>: Contains meta-information about the HTML document, such as the character set, viewport settings, and the title that appears in the browser tab.
<meta charset="UTF-8">: Specifies the character encoding for the document, ensuring proper display of text.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Configures the viewport for responsive design, making the page adapt to different screen sizes.
<title>: Sets the title of the HTML page, displayed in the browser's title bar or tab.
<body>: Contains the visible content of the HTML document, such as headings, paragraphs, images, and links.

Common HTML Tags

HTML uses tags to define elements. Most tags come in pairs: an opening tag and a closing tag.

Headings

Headings are used to structure content. There are six levels, from <h1> (most important) to <h6> (least important).

Example: Headings


<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Another Level</h3>

Paragraphs

The <p> tag defines a paragraph.

Example: Paragraph


<p>This is a paragraph of text. It will be displayed as a block of text in the browser.</p>

Links

The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to.

Example: Link


<a href="https://www.example.com">Visit Example.com</a>

Images

The <img> tag embeds an image. The src attribute specifies the path to the image, and the alt attribute provides alternative text for accessibility.

Example: Image


<img src="images/my-image.jpg" alt="A descriptive text for the image">

Lists

HTML supports ordered lists (<ol>) and unordered lists (<ul>). List items are defined with the <li> tag.

Example: Unordered List


<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

Example: Ordered List


<ol>
    <li>First step</li>
    <li>Second step</li>
    <li>Third step</li>
</ol>

Attributes

Attributes provide additional information about HTML elements. They are always specified in the start tag and usually come in name/value pairs like name="value".

Conclusion

This tutorial covered the fundamental concepts of HTML. Understanding these basics is crucial for building any web page. You've learned about the document structure, common tags like headings, paragraphs, links, images, and lists, as well as the importance of attributes.

Now that you have a grasp of HTML, you're ready to move on to styling your web pages with CSS!