Skip to main content
Every HTML document follows a standard structure with two main sections: the <head> and the <body>. The head contains metadata and configuration, while the body contains the visible content.

​
The HEAD Section

The <head> section contains metadata - information about the document that browsers and search engines use, but that isn’t directly visible to users. 
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="Your page description" />
  <title>Page Title</title>
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
  <link rel="stylesheet" href="/style.css" />
</head>

​
Essential Meta Tags

<meta charset="UTF-8" />
Purpose: Defines the character encoding for the document
  • UTF-8: Supports all characters worldwide (Spanish, Chinese, Arabic, emojis)
  • Must be one of the first tags in the <head>
  • Without it, special characters like ñ, á, é might display incorrectly
Always use UTF-8 encoding. It’s the web standard and supports internationalization out of the box.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Purpose: Essential for responsive web designAttributes:
  • width=device-width: Page width equals device width
  • initial-scale=1.0: Initial zoom level at 100%
Without this tag: Mobile devices would display the desktop version zoomed out (very small text)With this tag: The page adapts to the device width, providing an optimal mobile experience
<!-- Optional viewport settings -->
<meta name="viewport" 
  content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes" />

<meta name="description" 
  content="ML Store - Tu tienda online con los mejores productos. Tutorial educativo de HTML, CSS y TypeScript." />
Purpose: Description shown in search engine results
  • Appears in Google results below the page title
  • Ideal length: 150-160 characters
  • Should be descriptive and include relevant keywords
  • Unique for each page
Don’t duplicate the same description across multiple pages. Each page should have a unique, relevant description.
<meta name="keywords" content="tienda online, productos, tutorial HTML" />
Purpose: Keywords for search engines (legacy)
Google no longer uses meta keywords for ranking. Other search engines might still consider it, but it’s much less important than quality content and the description meta tag.

​
Page Title

<title>ML Store | Tu Tienda Online</title>
The <title> element is crucial for SEO and user experience: Where it appears:
  • Browser tab
  • Search engine results (as the clickable headline)
  • Bookmarks/favorites
  • Social media shares (if no Open Graph title is set)
Best practices:
  • Length: 50-60 characters (longer titles get truncated in search results)
  • Format: Include brand name and key content, e.g., “Page Name | Brand Name”
  • Keywords: Include relevant keywords naturally
  • Unique: Every page should have a unique title
<title>Laptops Gaming - ML Store</title>
<title>Contact Us | ML Store</title>
<title>How to Buy | ML Store Help Center</title>
Clear, descriptive, includes brand, uses keywords naturally.

​
Linking Resources

<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
Purpose: The small icon that appears in browser tabsCommon formats:
  • .ico - Traditional format
  • .png - Good browser support
  • .svg - Scalable, modern choice
Also appears in:
  • Browser tabs
  • Bookmarks
  • History
  • Mobile home screen shortcuts
<!-- Multiple sizes for different contexts -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />

<link rel="stylesheet" href="/src/style.css" />
Purpose: Links external CSS filesBenefits:
  • Separates content (HTML) from presentation (CSS)
  • Browser caches CSS, improving performance on subsequent page loads
  • Can be shared across multiple HTML pages
Multiple stylesheets:
<link rel="stylesheet" href="/css/normalize.css" />
<link rel="stylesheet" href="/css/main.css" />
<link rel="stylesheet" href="/css/responsive.css" />

<link rel="preconnect" href="https://api.escuelajs.co" />
Purpose: Performance optimization
  • Establishes early connection to external servers
  • Useful for APIs, CDNs, or external fonts
  • Reduces latency when fetching resources
Example with Google Fonts:
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" 
  rel="stylesheet" />

​
The BODY Section

The <body> contains all visible content: 
<body>
  <header>
    <!-- Site header, logo, navigation -->
  </header>
  
  <main>
    <!-- Primary content -->
  </main>
  
  <footer>
    <!-- Site footer -->
  </footer>
</body>

​
What Goes in the Body?

  • Text content: Headings, paragraphs, lists
  • Images and media: Photos, videos, audio
  • Structure: Semantic HTML5 elements
  • Forms: User input elements
  • Interactive elements: Buttons, links
  • Scripts: JavaScript files (typically at the end)

​
Complete Document Example

Here’s a complete, production-ready HTML document structure: 
<!DOCTYPE html>
<html lang="es">
<head>
  <!-- Essential meta tags -->
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  
  <!-- SEO meta tags -->
  <meta name="description" 
    content="ML Store - Tu tienda online con los mejores productos." />
  <meta name="keywords" 
    content="tienda online, productos, mercado libre" />
  
  <!-- Title -->
  <title>ML Store | Tu Tienda Online</title>
  
  <!-- Favicon -->
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
  
  <!-- Stylesheets -->
  <link rel="stylesheet" href="/src/style.css" />
  
  <!-- Preconnect for performance -->
  <link rel="preconnect" href="https://api.escuelajs.co" />
</head>

<body>
  <!-- Header -->
  <header class="header" id="main-header">
    <!-- Navigation, logo, search -->
  </header>
  
  <!-- Main content -->
  <main class="main" id="main-content">
    <!-- Page-specific content -->
  </main>
  
  <!-- Footer -->
  <footer class="footer" id="main-footer">
    <!-- Copyright, links, contact -->
  </footer>
  
  <!-- Scripts at the end -->
  <script type="module" src="/src/main.ts"></script>
</body>
</html>

​
Head vs Body Comparison

Contains: Metadata and configurationNot visible to users, but crucial for:
  • Browser configuration
  • Search engines (SEO)
  • Social media sharing
  • Performance optimization
Common elements:
  • <meta> tags
  • <title>
  • <link> (CSS, favicons)
  • <script> (with defer/async)
  • <style> (inline CSS)

​
Best Practices

Do

  • Always include charset and viewport meta tags
  • Write unique, descriptive titles for each page
  • Use semantic HTML5 elements in the body
  • Place scripts at the end of body or use defer

Don't

  • Don’t put visible content in the head
  • Don’t duplicate titles across pages
  • Don’t omit alt text on images
  • Don’t use deprecated tags

Build docs developers (and LLMs) love

Get started for freeTalk to us