Codédex | HTML Lessons

Introduction to HTML

HTML, or Hypertext Markup Language, is the standard markup language used to create and structure web pages. It provides the basic building blocks for creating the content, layout, and structure of a website. HTML is the backbone of web development and is essential for creating structured content on the internet.

HTML is made up of elements called "tags", which define different types of content, such as headings, paragraphs, images, and links. These tags are read by web browsers to render the web page accordingly. HTML, when paired with CSS and JavaScript, allows developers to create fully functional and interactive websites.

HTML Tags

HTML uses a system of tags to define the different elements on a web page. These tags are enclosed in angle brackets, like <html>, and tell the browser how to display the content. There are two main types of tags:

Opening tags: Define the start of an element (e.g., <div>).
Closing tags: Define the end of an element (e.g., </div>).

Tags can also have attributes that provide additional information about the element. For example, the <a> tag is used to define hyperlinks, and its href attribute specifies the URL of the link.

HTML Structure

Every HTML document has a basic structure, including the <html>, <head>, and <body> tags. The <html> tag wraps the entire HTML document, while the <head> section contains metadata about the page, such as the title and link to external resources (like stylesheets or scripts).

The <body> section holds the visible content of the page, such as text, images, and links. Properly structuring your HTML ensures that the browser can render the page as expected and that users can navigate it efficiently.

Here's an example of a simple HTML structure:

<html>
    <head>
        <title>My Web Page</title>
    </head>
    <body>
        <h1>Welcome to My Website</h1>
        <p>This is a simple webpage.</p>
    </body>
</html>

HTML Attributes

Attributes provide additional information about an HTML element. They are placed inside the opening tag and can be used to customize the behavior or appearance of an element. Common attributes include src, href, and alt.

For example, the <img> tag uses the src attribute to specify the image file source, and the alt attribute provides an alternative text description of the image, which is important for accessibility.

Example:

<img src="image.jpg" alt="A description of the image">

Attributes are key to making your elements function properly and ensuring that they meet web standards.

Styling HTML with CSS

While HTML provides the structure and content of a web page, Cascading Style Sheets (CSS) are used to control the visual presentation and styling. CSS allows you to specify colors, fonts, layouts, and other design elements for your HTML elements. By separating structure and style, CSS makes it easier to maintain and update websites.

You can apply CSS in three ways: inline, internal, and external. External stylesheets are generally the best approach as they allow you to keep styles separate from the content.

Example of an internal CSS style:

<style>
    h1 {
        color: blue;
        font-size: 36px;
    }
</style>

This will change the color and size of all <h1> elements on the page. CSS gives you the power to design beautiful websites and create a great user experience.