//
HTML (HyperText Markup Language) is the standard markup language for creating web pages and web applications. It provides a way to structure content on the web, making it both human-readable and machine-readable. In this tutorial, we'll cover the basics of HTML, including its syntax, elements, attributes, and best practices.
HTML is not a programming language but rather a markup language used to describe the structure of web pages. It uses tags to define elements within a page, such as headings, paragraphs, links, images, and more. These tags are enclosed in angle brackets (< >), and they tell the browser how to display the content.
A basic HTML document consists of several key components:
Here's a simple example of an HTML document:
<!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>Welcome to My Website</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
<!DOCTYPE html>: Declares the document type and version of HTML.<html lang="en">: The root element, with a language attribute set to English.<head>: Contains meta-information about the document.
<meta charset="UTF-8">: Specifies the character encoding for the document.<meta name="viewport" content="width=device-width, initial-scale=1.0">: Ensures the page is responsive and scales correctly on different devices.<title>: Sets the title of the web page, which appears in the browser tab.<body>: Contains the visible content of the web page.HTML elements are the building blocks of an HTML document. They are defined by a start tag, content, and an end tag. For example:
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<h1> to <h6>, with <h1> being the largest.<p><a href="URL">Link Text</a><img src="image.jpg" alt="Description of image"><ul><li>Item 1</li><li>Item 2</li></ul><ol><li>Item 1</li><li>Item 2</li></ol><div> and <span> for grouping elements.Attributes provide additional information about HTML elements. They are added to the start tag of an element and consist of a name and value pair, separated by an equals sign (=). For example:
<a href="https://www.example.com" target="_blank">Visit Example</a>
<img src="logo.png" alt="Company Logo">
href: Specifies the URL for links.src: Specifies the source file for images and other media.alt: Provides alternative text for images, useful for accessibility.class and id: Used for styling and scripting purposes.<header>, <footer>, <nav>).alt attributes for images, use headings properly, and ensure keyboard navigability.HTML is a fundamental technology for web development, providing the structure and content of web pages. By understanding its basic syntax, elements, attributes, and best practices, you can create well-structured and accessible web pages. In the next section, we'll dive deeper into CSS to learn how to style these HTML elements.
By following this tutorial and exploring these resources, you'll gain a solid foundation in HTML and be ready to move on to more advanced topics in web development.