Skip to main content
This page provides a comprehensive reference of all HTML tags used in the ML Store project, organized by category.

​
Document Structure

TagPurposeExample
<!DOCTYPE html>Declares HTML5 document type<!DOCTYPE html>
<html>Root element of document<html lang="es">
<head>Container for metadata<head>...</head>
<body>Container for visible content<body>...</body>

​
Metadata Tags

TagPurposeExample
<meta charset>Character encoding<meta charset="UTF-8" />
<meta viewport>Responsive design settings<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta description>SEO description<meta name="description" content="ML Store..." />
<meta keywords>SEO keywords<meta name="keywords" content="tienda, productos" />
<title>Page title<title>ML Store</title>
<link>External resource<link rel="stylesheet" href="/style.css" />

​
Semantic HTML5 Elements

​
Layout Structure

TagPurposeUsed In Project
<header>Page or section headerMain header with logo and navigation
<nav>Navigation links containerPrimary navigation, category links
<main>Main content areaProduct catalog and hero section
<section>Thematic content sectionHero, benefits, products sections
<article>Independent contentBenefit cards, product cards
<aside>Related side contentNot used in this project
<footer>Page or section footerSite footer with links and social

​
Content Elements

TagPurposeExample from Project
<h1>-<h6>Headings (h1 is main)<h1 class="hero__title">Envío gratis...</h1>
<p>Paragraph<p class="hero__subtitle">Aprovecha...</p>
<div>Generic container<div class="header__container">
<span>Inline container<span class="header__logo-text">ML</span>
<a>Hyperlink<a href="/" class="header__logo-link">
<ul>Unordered list<ul class="header__nav-list">
<ol>Ordered listNot used (but available for steps)
<li>List item<li class="header__nav-item">
<figure>Image with caption<figure class="product-card__figure">
<figcaption>Figure captionNot used in project
<address>Contact information<address class="footer__address">
<small>Fine print<small class="footer__copyright">
<hr>Thematic break<hr class="footer__divider" />

​
Form Elements

​
Form Structure

<form class="header__search-form" action="/buscar" method="GET">
  <input type="search" name="q" placeholder="Search..." />
  <button type="submit">Search</button>
</form>

​
Input Types

Text Inputs

  • type="text" - Plain text
  • type="search" - Search field
  • type="email" - Email validation
  • type="password" - Hidden input
  • type="tel" - Phone number
  • type="url" - URL validation

Other Inputs

  • type="number" - Numeric input
  • type="checkbox" - Toggle option
  • type="radio" - Single choice
  • type="date" - Date picker
  • type="file" - File upload
  • type="submit" - Submit button

​
Form Elements Reference

TagPurposeExample
<form>Form container<form action="/submit" method="POST">
<input>Input field<input type="text" name="username">
<textarea>Multi-line text<textarea rows="4"></textarea>
<select>Dropdown menu<select><option>...</option></select>
<option>Select option<option value="1">Option 1</option>
<button>Clickable button<button type="submit">Send</button>
<label>Input label<label for="email">Email</label>

​
Media Elements

​
Images

<img 
  src="/product.jpg" 
  alt="Product description"
  loading="lazy"
  class="product-card__image"
/>

​
Key Attributes

AttributePurposeExample
srcImage source URLsrc="/images/logo.png"
altAlternative text (accessibility)alt="Company logo"
loadingLazy loadingloading="lazy"
widthImage widthwidth="400"
heightImage heightheight="300"

​
SVG (Inline Graphics)

Used for icons in the project: 
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
  <circle cx="11" cy="11" r="8"></circle>
  <path d="m21 21-4.35-4.35"></path>
</svg>

​
Special Elements

​
Template

<template id="product-card-template">
  <article class="product-card">
    <!-- Content that won't render until cloned by JavaScript -->
  </article>
</template>
The <template> tag contains HTML that isn’t rendered but can be cloned and inserted dynamically with JavaScript.

​
Scripts

<!-- At end of body -->
<script type="module" src="/src/main.ts"></script>

​
Script Attributes

AttributePurposeUsage
type="module"ES6 moduleEnables import/export
srcExternal scriptsrc="/main.js"
deferExecute after parsing<script defer src="...">
asyncExecute when ready<script async src="...">

​
Void Elements (Self-Closing)

These elements don’t have closing tags:
  • <br> - Line break
  • <hr> - Horizontal rule
  • <img> - Image
  • <input> - Form input
  • <meta> - Metadata
  • <link> - External resource
In HTML5, you can write void elements as <img> or <img /> - both are valid. The tutorial uses the self-closing syntax <... /> for clarity.

​
HTML Entities

Special characters used in the project:
EntityCharacterUsage
&copy;©Copyright symbol
&nbsp;(space)Non-breaking space
&lt;<Less than
&gt;>Greater than
&amp;&Ampersand
&quot;”Quote

​
Best Practices

Use semantic HTML elements instead of generic <div> tags when possible
Always include alt attributes on images for accessibility
Use proper heading hierarchy (h1 → h2 → h3, don’t skip levels)
Include lang attribute on <html> tag
Use <button> for clickable actions, <a> for navigation
Don’t use deprecated tags like <center>, <font>, or <marquee>. Use CSS for styling instead.

​
Next Steps

CSS Properties

Learn about CSS properties used in the project

HTML Fundamentals

Deep dive into HTML concepts