HTML Best Practices & SEO

Write production-quality HTML — semantic markup, SEO optimization, structured data, and HTML best practices for modern web development.

45 min•By Priygop Team•Last updated: Feb 2026

Semantic HTML & SEO

Structured Data (Schema.org): JSON-LD markup in <script type='application/ld+json'> — tells Google about your content (articles, products, FAQs, reviews). Rich search results
Open Graph Tags: <meta property='og:title'> — control how your page appears when shared on social media. Title, description, image for Facebook, Twitter, LinkedIn
Heading Hierarchy: Single <h1> per page, followed by <h2>-<h6> in order — screen readers and search engines use heading structure to understand content organization
Semantic Elements: <article> for self-contained content, <section> for grouped content, <aside> for tangential content, <figure>/<figcaption> for illustrations with captions
Meta Tags: <meta name='description' content='...'> for search snippets. <meta name='viewport'> for mobile. <link rel='canonical'> to prevent duplicate content
Performance Hints: <link rel='preconnect'> early-connect to CDNs. <link rel='preload'> for critical resources. <link rel='prefetch'> for next-page resources. async/defer for scripts

Try It Yourself: Web Storage Demo

Try It Yourself: Web Storage DemoHTML⚠ 6 errors

⚠ Syntax Issues (6)

Line 39: Malformed tag: "< localStorage.length; i++) { const k = localStorage.key(i); items.push(k + ' = ' + localStorage.getItem(k)); } show(items.length ? '📦 Stored data: ' + items.join(' ') : '(empty)'); } function clearData() { localStorage.clear(); show('🗑️ All data cleared'); } function show(t) { document.getElementById('output').textContent = t; } </script>"

💡 Tags must use valid HTML names and be properly formed. Example: <div>, <p class="text">

Line 50: Wrong closing tag: </body> found, expected </script> (line 50)

💡 Close <script> (opened on line 29) with </script> before closing </body>.

Line 51: Wrong closing tag: </html> found, expected </script> (line 51)

💡 Close <script> (opened on line 29) with </script> before closing </html>.

Line 2: Unclosed <html> (opened on line 2)

💡 Add </html> to properly close this element.

Line 16: Unclosed <body> (opened on line 16)

💡 Add </body> to properly close this element.

Line 29: Unclosed <script> (opened on line 29)

💡 Add </script> to properly close this element.

HTML Editor

✕ 6 errorsTab = 2 spaces

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: Arial, sans-serif; padding: 20px; background: #f0f9ff; }
  h2 { color: #0369a1; }
  .card { background: white; padding: 20px; border-radius: 10px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); max-width: 500px; }
  input { width: 100%; padding: 10px; border: 2px solid #e0e7ff; border-radius: 6px; margin: 6px 0; box-sizing: border-box; font-size: 14px; }
  button { padding: 10px 20px; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; margin: 4px; font-weight: bold; }
  .save { background: #2563eb; color: white; }
  .load { background: #059669; color: white; }
  .clear { background: #dc2626; color: white; }
  #output { background: #f8fafc; padding: 12px; border-radius: 6px; margin-top: 12px; min-height: 40px; font-family: monospace; font-size: 13px; }
</style>
</head>
<body>
<div class="card">
  <h2>💾 Web Storage Demo</h2>
  <p>Learn how localStorage saves data in the browser:</p>
  <input id="key" placeholder="Enter a key (e.g., username)" />
  <input id="val" placeholder="Enter a value (e.g., Alex)" />
  <div>
    <button class="save" onclick="saveData()">💾 Save</button>
    <button class="load" onclick="loadData()">📂 Load All</button>
    <button class="clear" onclick="clearData()">🗑️ Clear All</button>
  </div>
  <div id="output">Click Save to store data, then Load to see it.</div>
</div>
<script>
  function saveData() {
    const k = document.getElementById('key').value;
    const v = document.getElementById('val').value;
    if (!k || !v) { show('⚠️ Enter both key and value'); return; }
    localStorage.setItem(k, v);
    show('✅ Saved: ' + k + ' = ' + v);
  }
  function loadData() {
    let items = [];
    for (let i = 0; i < localStorage.length; i++) {
      const k = localStorage.key(i);
      items.push(k + ' = ' + localStorage.getItem(k));
    }
    show(items.length ? '📦 Stored data:
' + items.join('
') : '(empty)');
  }
  function clearData() { localStorage.clear(); show('🗑️ All data cleared'); }
  function show(t) { document.getElementById('output').textContent = t; }
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: Arial, sans-serif; padding: 20px; background: #f0f9ff; }
  h2 { color: #0369a1; }
  .card { background: white; padding: 20px; border-radius: 10px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); max-width: 500px; }
  input { width: 100%; padding: 10px; border: 2px solid #e0e7ff; border-radius: 6px; margin: 6px 0; box-sizing: border-box; font-size: 14px; }
  button { padding: 10px 20px; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; margin: 4px; font-weight: bold; }
  .save { background: #2563eb; color: white; }
  .load { background: #059669; color: white; }
  .clear { background: #dc2626; color: white; }
  #output { background: #f8fafc; padding: 12px; border-radius: 6px; margin-top: 12px; min-height: 40px; font-family: monospace; font-size: 13px; }
</style>
</head>
<body>
<div class="card">
  <h2>💾 Web Storage Demo</h2>
  <p>Learn how localStorage saves data in the browser:</p>
  <input id="key" placeholder="Enter a key (e.g., username)" />
  <input id="val" placeholder="Enter a value (e.g., Alex)" />
  <div>
    <button class="save" onclick="saveData()">💾 Save</button>
    <button class="load" onclick="loadData()">📂 Load All</button>
    <button class="clear" onclick="clearData()">🗑️ Clear All</button>
  </div>
  <div id="output">Click Save to store data, then Load to see it.</div>
</div>
<script>
  function saveData() {
    const k = document.getElementById('key').value;
    const v = document.getElementById('val').value;
    if (!k || !v) { show('⚠️ Enter both key and value'); return; }
    localStorage.setItem(k, v);
    show('✅ Saved: ' + k + ' = ' + v);
  }
  function loadData() {
    let items = [];
    for (let i = 0; i < localStorage.length; i++) {
      const k = localStorage.key(i);
      items.push(k + ' = ' + localStorage.getItem(k));
    }
    show(items.length ? '📦 Stored data:
' + items.join('
') : '(empty)');
  }
  function clearData() { localStorage.clear(); show('🗑️ All data cleared'); }
  function show(t) { document.getElementById('output').textContent = t; }
</script>
</body>
</html>

Result

Click ▶ Run to see the result

Edit the code on the left, then click Run

HTML|51 lines|2117 chars|6 errors, 0 warnings

UTF-8

Quick Quiz — HTML Mastery

Next Module →