Introduction to HTML

Master HTML with Coddy

Learn HTML through interactive, bite-sized lessons. Build real websites and see your code come to life instantly.

HTML, or HyperText Markup Language, is the backbone of web development. It's the standard markup language used to create web pages and structure content on the internet.

What is HTML?

HTML uses a system of tags to define the structure and content of a web page. These tags tell web browsers how to display text, images, and other elements.

Basic HTML Structure

Every HTML document follows a basic structure:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page Title</title>
</head>
<body>
    <!-- Your content goes here -->
</body>
</html>

Key HTML Elements

<html>: The root element of an HTML page
<head>: Contains meta information about the document
<title>: Specifies a title for the page
<body>: Defines the document's body, which contains visible content

Common HTML Tags

HTML offers a variety of tags for structuring content:

HTML Headings: <h1> to <h6>
HTML Paragraphs: <p>
HTML Links: <a>
HTML Images: <img>

Example: Creating a Simple Web Page

Here's a basic example of an HTML page:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My First Web Page</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph of text.</p>
    <a href="https://www.example.com">Visit Example.com</a>
    <img src="image.jpg" alt="Description of the image">
</body>
</html>

HTML Attributes

HTML elements can have attributes that provide additional information about the element. For instance, the src attribute in an <img> tag specifies the image source.

HTML5 and Modern Web Development

HTML5, the latest version of HTML, introduced new semantic elements like <header>, <nav>, and <footer>. These elements improve the structure and accessibility of web pages.

Best Practices

Use semantic HTML to improve accessibility and SEO
Validate your HTML code regularly
Keep your HTML structure clean and well-organized
Use HTML Comments to explain complex code sections

Next Steps

After mastering the basics of HTML, consider exploring:

HTML and CSS for styling your web pages
HTML and JavaScript for adding interactivity
HTML Responsive Web Design for creating mobile-friendly websites

HTML is the foundation of web development. By understanding its core concepts and practicing regularly, you'll be well on your way to creating stunning web pages and applications.