English

HTML Tutorial

HTML Tables

HTML Lists

HTML Links

HTML References

HTML Color Names & Values

HTML Forms

HTML Media

HTML Header

HTML Layouts

HTML Graphics

HTML APIs

HTML Miscellaneous

HTML Demo

HTML Tools

HTML Resources

HTML - Tags Reference

Hello, future web developers! I'm thrilled to be your guide on this exciting journey through the world of HTML tags. As someone who's been teaching computer science for many years, I can tell you that understanding HTML tags is like learning the alphabet of web development. So, let's dive in!

HTML - Tags Reference

What are HTML Tags?

HTML tags are the building blocks of web pages. They're like the secret code that tells web browsers how to display content. Imagine you're building a house - HTML tags are the bricks, windows, and doors that give structure to your web page.

For example, let's look at a simple HTML tag:

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

Here, <p> is the opening tag, and </p> is the closing tag. Everything in between is the content that will be displayed as a paragraph on your web page.

Why do they matter?

HTML tags matter because they give meaning and structure to your content. Without them, your web page would just be a jumble of text! They help browsers understand what each piece of content is supposed to be, whether it's a heading, a paragraph, an image, or a link.

HTML Tags List with Examples

Let's explore some of the most common HTML tags. I'll provide examples and explanations for each category.

HTML Basic Tags

These are the foundation of any HTML document.

Tag Description Example
<!DOCTYPE> Defines the document type <!DOCTYPE html>
<html> The root element of an HTML page <html>...</html>
<head> Contains meta information about the document <head>...</head>
<title> Specifies a title for the document <title>My First Web Page</title>
<body> Defines the document's body <body>...</body>

Here's a basic HTML structure:

<!DOCTYPE html>
<html>
<head>
    <title>My First Web Page</title>
</head>
<body>
    <h1>Welcome to my website!</h1>
    <p>This is where all my content goes.</p>
</body>
</html>

This structure is like the skeleton of your web page. Everything else we'll learn will fit inside this basic framework.

HTML Formatting Tags

These tags help you format text on your web page.

Tag Description Example
<h1> to <h6> Headings <h1>Main Heading</h1>
<p> Paragraph <p>This is a paragraph.</p>
<br> Line break Line 1<br>Line 2
<strong> Bold text <strong>Important!</strong>
<em> Emphasized text <em>Italicized</em>

Let's see these in action:

<h1>Welcome to My Cookbook</h1>
<h2>Recipe: Chocolate Chip Cookies</h2>
<p>These cookies are <strong>delicious</strong> and <em>easy to make</em>!</p>
<p>Ingredients:<br>
Flour<br>
Sugar<br>
Chocolate chips</p>

This example shows how you can use formatting tags to structure a recipe page. The <h1> and <h2> tags create hierarchical headings, while <strong> and <em> emphasize important words.

HTML Forms and Input Tags

Forms allow users to input data that can be sent to a server for processing.

Tag Description Example
<form> Defines an HTML form <form>...</form>
<input> Input control <input type="text" name="username">
<textarea> Multiline input control <textarea>Enter text here...</textarea>
<button> Clickable button <button type="submit">Send</button>

Here's a simple form example:

<form action="/submit-recipe" method="post">
    <label for="recipe-name">Recipe Name:</label>
    <input type="text" id="recipe-name" name="recipe-name"><br><br>

    <label for="ingredients">Ingredients:</label>
    <textarea id="ingredients" name="ingredients"></textarea><br><br>

    <button type="submit">Submit Recipe</button>
</form>

This form allows users to submit a recipe name and ingredients. The action attribute specifies where the form data should be sent, and the method attribute defines how it should be sent.

HTML Image Tags

Images make your web pages more visually appealing and informative.

Tag Description Example
<img> Embeds an image <img src="cookie.jpg" alt="Chocolate chip cookie">

Let's add an image to our recipe page:

<h2>Chocolate Chip Cookies</h2>
<img src="cookie.jpg" alt="A delicious chocolate chip cookie" width="300" height="200">
<p>Doesn't this look delicious?</p>

The src attribute specifies the image file, while alt provides alternative text for screen readers or if the image fails to load.

HTML Audio and Video Tags

These tags allow you to embed multimedia content in your web pages.

Tag Description Example
<audio> Embeds sound content <audio src="recipe.mp3" controls></audio>
<video> Embeds video content <video src="baking.mp4" controls></video>

Here's how you might add a baking tutorial video to your recipe page:

<h3>Watch the Baking Process</h3>
<video src="cookie-baking.mp4" controls width="400" height="300">
    Your browser does not support the video tag.
</video>

The controls attribute adds play, pause, and volume controls to the video player.

HTML Link Tags

Links are the threads that weave the web together, allowing users to navigate between pages.

Tag Description Example
<a> Defines a hyperlink <a href="https://www.example.com">Visit Example.com</a>

Let's add some links to our recipe page:

<p>Check out our <a href="recipes.html">other recipes</a> or <a href="https://www.cookingchannel.com" target="_blank">visit Cooking Channel</a> for more inspiration.</p>

The href attribute specifies the URL of the page the link goes to. The target="_blank" attribute opens the link in a new tab.

HTML List Tags

Lists help organize information in a clear, easy-to-read format.

Tag Description Example
<ul> Unordered list <ul>...</ul>
<ol> Ordered list <ol>...</ol>
<li> List item <li>Item</li>

Let's use lists for our recipe ingredients and steps:

<h3>Ingredients:</h3>
<ul>
    <li>2 cups all-purpose flour</li>
    <li>1 cup chocolate chips</li>
    <li>1/2 cup sugar</li>
</ul>

<h3>Steps:</h3>
<ol>
    <li>Mix dry ingredients</li>
    <li>Add wet ingredients</li>
    <li>Fold in chocolate chips</li>
    <li>Bake at 350°F for 10-12 minutes</li>
</ol>

This example shows how to create both unordered (bullet) and ordered (numbered) lists.

HTML Table Tags

Tables are great for displaying data in rows and columns.

Tag Description Example
<table> Defines a table <table>...</table>
<tr> Table row <tr>...</tr>
<th> Table header <th>Header</th>
<td> Table data/cell <td>Data</td>

Let's create a nutritional information table for our cookies:

<h3>Nutritional Information (per cookie)</h3>
<table border="1">
    <tr>
        <th>Nutrient</th>
        <th>Amount</th>
    </tr>
    <tr>
        <td>Calories</td>
        <td>150</td>
    </tr>
    <tr>
        <td>Fat</td>
        <td>7g</td>
    </tr>
    <tr>
        <td>Carbohydrates</td>
        <td>20g</td>
    </tr>
</table>

This creates a simple table with headers and data cells. The border attribute adds visible borders to the table.

HTML Styles and Semantics Tags

These tags help improve the structure and appearance of your web page.

Tag Description Example
<div> Defines a section in a document <div>...</div>
<span> Inline container for text <span style="color:red;">Red text</span>
<header> Defines a header for a document or section <header>...</header>
<footer> Defines a footer for a document or section <footer>...</footer>

Let's use some of these tags to improve our recipe page structure:

<header>
    <h1>My Cookbook</h1>
    <nav>
        <a href="index.html">Home</a> |
        <a href="recipes.html">Recipes</a> |
        <a href="about.html">About</a>
    </nav>
</header>

<main>
    <article>
        <h2>Chocolate Chip Cookies</h2>
        <!-- Recipe content here -->
    </article>
</main>

<footer>
    <p>&copy; 2023 My Cookbook. All rights reserved.</p>
</footer>

These semantic tags give more meaning to the structure of your page, which is helpful for both browsers and search engines.

HTML Meta Tags

Meta tags provide metadata about the HTML document. They go inside the <head> section.

Tag Description Example
<meta> Specifies metadata about an HTML document <meta charset="UTF-8">

Here's how you might use meta tags:

<head>
    <meta charset="UTF-8">
    <meta name="description" content="Delicious chocolate chip cookie recipe">
    <meta name="keywords" content="cookies, baking, dessert">
    <meta name="author" content="Jane Doe">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chocolate Chip Cookie Recipe</title>
</head>

These meta tags provide information about the character encoding, page description, keywords, author, and viewport settings for responsive design.

HTML Programming Tags

These tags are used to embed or reference external content or scripts.

Tag Description Example
<script> Defines a client-side script <script src="script.js"></script>
<noscript> Defines alternate content for users who have disabled scripts <noscript>Your browser does not support JavaScript!</noscript>

Here's how you might use these tags:

<head>
    <script src="recipe-calculator.js"></script>
</head>
<body>
    <!-- Other content -->
    <noscript>
        <p>Please enable JavaScript to use the ingredient calculator.</p>
    </noscript>
</body>

The <script> tag links to an external JavaScript file, while the <noscript> tag provides a message for users who have JavaScript disabled.

And there you have it! We've covered a wide range of HTML tags, from the basic structure to more advanced elements. Remember, the best way to learn is by doing, so try creating your own web pages using these tags. Experiment, make mistakes, and learn from them. That's how all great web developers start!

Happy coding, and may your web pages always render beautifully!

Credits: Image by storyset

Previous Tutorial:
HTML - Cheat Sheet
Next Tutorial:
HTML - Attributes Reference