HTML

مسیر گام‌به‌گام بدون حاشیه برای HTML معنادار محکم، دسترسی‌پذیری بی‌نقص، و پایه‌های مطمئن فرانت‌اند—گسترش یافته با بخش‌های بیشتر HTML، مثال‌ها و بهترین شیوه‌ها برای همه.

مقدمه: چرا HTML معنادار مهم است؟

قبل از شروع، بیایید ببینیم چرا HTML معنادار و دسترسی‌پذیری اینقدر مهم است:

دسترسی‌پذیری (Accessibility): حدود ۲۰٪ کاربران به فناوری کمکی وابسته هستند. این شامل افرادی است که از صفحه‌خوان‌ها، ناوبری کیبورد، یا سایر ابزارهای کمکی استفاده می‌کنند.

سئو و عملکرد: موتورهای جستجو HTML معنادار را بهتر درک می‌کنند، که منجر به رتبه‌بندی بهتر و بارگذاری سریع‌تر می‌شود.

نگهداری آسان‌تر: کد معنادار برای تیم‌های توسعه قابل فهم‌تر است و تغییرات آینده را آسان‌تر می‌کند.

تجربه کاربری بهتر: ساختار منطقی به همه کاربران کمک می‌کند تا محتوا را بهتر درک کنند.

مفاهیم پایه HTML

قبل از شروع با کد، بیایید مفاهیم اساسی را درک کنیم:

تگ‌ها، عناصر و ویژگی‌ها

تگ (Tag): نام داخل براکت‌های زاویه‌دار است که به مرورگر می‌گوید چه نوع محتوایی را نمایش دهد.

عنصر (Element): تگ باز + محتوا + تگ بسته. برخی تگ‌ها خودبسته هستند.

ویژگی (Attribute): اطلاعات اضافی که به تگ اضافه می‌شود تا رفتار یا ظاهر آن را تغییر دهد.

مثال‌های ساده:

<!-- Opening tag -->
<p>
  <!-- Content -->
  Hello World

  <!-- Closing tag -->
</p>

<!-- Complete element -->
<p>Hello World</p>

<!-- With attribute -->
<p class="greeting">Hello World</p>

عناصر بلوک در مقابل درون‌خطی

عناصر بلوک: عرض کامل می‌گیرند و روی خط جدید شروع می‌شوند.

<div>This is a block element</div>
<p>This paragraph is also block</p>
<section>This section too</section>

عناصر درون‌خطی: داخل یک خط متن قرار می‌گیرند.

<span>This is inline</span>
<a href="#">This link is inline</a>
<strong>This text is inline</strong>

ساختار اولیه یک صفحه HTML

حالا بیایید با ساختار پایه شروع کنیم:

سند HTML5 حداقلی

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>Welcome to semantic HTML.</p>
  </body>
</html>

توضیح هر بخش:

<!DOCTYPE html>: به مرورگر می‌گوید این HTML5 است
<html lang="en">: زبان صفحه را مشخص می‌کند
<meta charset="utf-8">: کاراکترهای صفحه را تعریف می‌کند
<meta name="viewport">: برای نمایش صحیح روی موبایل ضروری است
<title>: عنوان صفحه در تب مرورگر

نکات مهم:

همیشه با <!DOCTYPE html> شروع کنید
همیشه lang را مشخص کنید
همیشه charset و viewport را شامل کنید
هر صفحه فقط یک <h1> باید داشته باشد

عناصر معنادار HTML5

HTML5 عناصر جدیدی معرفی کرد که معنای محتوا را بهتر منتقل می‌کنند:

ساختار اصلی صفحه

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>My Portfolio</title>
  </head>
  <body>
    <!-- Header: اطلاعات بالای صفحه -->
    <header>
      <h1>My Portfolio</h1>
      <nav>
        <ul>
          <li><a href="#projects">Projects</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </nav>
    </header>

    <!-- Main: محتوای اصلی -->
    <main>
      <section id="projects">
        <h2>Featured Projects</h2>
        <article>
          <h3>First Project</h3>
          <p>This is my first amazing project...</p>
        </article>
      </section>

      <section id="about">
        <h2>About Me</h2>
        <p>I'm a passionate developer...</p>
      </section>
    </main>

    <!-- Aside: محتوای مرتبط -->
    <aside>
      <h2>Related Links</h2>
      <ul>
        <li><a href="https://github.com">GitHub</a></li>
        <li><a href="blog.html">Blog</a></li>
      </ul>
    </aside>

    <!-- Footer: اطلاعات پایین صفحه -->
    <footer>
      <p>&copy; 2025 Your Name</p>
    </footer>
  </body>
</html>

توضیح عناصر معنادار:

<header>: اطلاعات بالای صفحه، معمولاً شامل لوگو، منو و اطلاعات تماس

<nav>: منوی ناوبری اصلی

<main>: محتوای اصلی صفحه - فقط یک بار در هر صفحه

<section>: بخش‌های مختلف محتوا

<article>: محتوای مستقل که می‌تواند جداگانه استفاده شود

<aside>: محتوای مرتبط اما حاشیه‌ای

<footer>: اطلاعات پایین صفحه

ساختار متن و عناوین

سلسله مراتب عناوین

عنوان‌ها باید منطقی و منظم باشند:

<h1>My Recipe Blog</h1>

<section>
  <h2>Chocolate Cake Recipe</h2>

  <h3>Ingredients</h3>
  <ul>
    <li>1 cup flour</li>
    <li>2 eggs</li>
    <li>1/2 cup sugar</li>
  </ul>

  <h3>Instructions</h3>
  <ol>
    <li>Preheat oven to 350°F</li>
    <li>Mix ingredients in a bowl</li>
    <li>Bake for 30 minutes</li>
  </ol>
</section>

<section>
  <h2>Lemon Tart Recipe</h2>
  <h3>Ingredients</h3>
  <h3>Instructions</h3>
</section>

قوانین مهم:

هر صفحه فقط یک <h1> داشته باشد
سطوح عنوان را نپرید (مثلاً از <h1> به <h3>)
عناوین باید منطقی و منظم باشند
از <h1> تا <h6> استفاده کنید

پاراگراف‌ها و متن

<p>
  HTML is the backbone of every web page. It provides structure and meaning to
  your content. Write clear, simple sentences in paragraphs.
</p>

<p>
  Each paragraph should focus on one main idea. This makes your content easier
  to read and understand.
</p>

لیست‌ها

لیست نامرتب (Bullet points):

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

لیست مرتب (Numbered):

<ol>
  <li>First step</li>
  <li>Second step</li>
  <li>Third step</li>
</ol>

لیست توضیحات:

<dl>
  <dt>HTML</dt>
  <dd>
    HyperText Markup Language - the standard markup language for web pages
  </dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets - used for styling web pages</dd>
</dl>

تگ‌های متن درون‌خطی

<p>
  This is <strong>important text</strong> that should stand out. This is
  <em>emphasized text</em> that adds emphasis. This is
  <mark>highlighted text</mark> for special attention. This is
  <small>smaller text</small> for less important information.
</p>

<p>
  Visit our <a href="https://example.com">website</a> for more information. The
  event is on <time datetime="2025-06-04">June 4, 2025</time>.
</p>

توضیح تگ‌ها:

<strong>: متن مهم (معمولاً پررنگ)
<em>: تأکید (معمولاً ایتالیک)
<mark>: متن برجسته شده
<small>: متن ریزتر
<a>: لینک
<time>: تاریخ/زمان با فرمت قابل خواندن ماشین

لینک‌ها و ناوبری

لینک‌های پایه

<!-- لینک داخلی -->
<a href="about.html">About Us</a>

<!-- لینک خارجی -->
<a href="https://example.com">External Website</a>

<!-- لینک به بخش خاص صفحه -->
<a href="#contact">Contact Section</a>

<!-- لینک ایمیل -->
<a href="mailto:info@example.com">Send Email</a>

<!-- لینک تلفن -->
<a href="tel:+1234567890">Call Us</a>

لینک‌های خارجی با امنیت

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  External link (opens in new tab)
</a>

توضیح ویژگی‌ها:

target="_blank": لینک در تب جدید باز می‌شود
rel="noopener noreferrer": امنیت را بهبود می‌دهد

منوی ناوبری

<nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/services">Services</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

<!-- منوی دوم با برچسب متفاوت -->
<nav aria-label="Footer navigation">
  <ul>
    <li><a href="/privacy">Privacy Policy</a></li>
    <li><a href="/terms">Terms of Service</a></li>
  </ul>
</nav>

نکات مهم:

از <nav> برای منوهای ناوبری استفاده کنید
اگر چندین منو دارید، از aria-label استفاده کنید
منوها را با <ul> و <li> ساختار دهید

تصاویر و محتوای چندرسانه‌ای

تصاویر پایه

<img
  src="photo.jpg"
  alt="A beautiful sunset over the mountains"
  width="800"
  height="600"
/>

ویژگی‌های مهم:

src: مسیر فایل تصویر
alt: متن جایگزین برای صفحه‌خوان‌ها
width و height: ابعاد تصویر (اختیاری اما توصیه می‌شود)

تصاویر واکنش‌گرا

<img
  src="photo-small.jpg"
  srcset="photo-small.jpg 480w, photo-medium.jpg 800w, photo-large.jpg 1200w"
  sizes="(max-width: 600px) 480px, (max-width: 1200px) 800px, 1200px"
  alt="Beautiful landscape"
/>

توضیح ویژگی‌ها:

srcset: لیست تصاویر با اندازه‌های مختلف
sizes: به مرورگر می‌گوید کدام تصویر را در عرض‌های مختلف انتخاب کند

تصاویر با توضیحات

<figure>
  <img
    src="chart.png"
    alt="Sales performance chart showing 20% growth"
    width="600"
    height="400"
  />
  <figcaption>
    Our sales increased by 20% in the first quarter.
    <a href="#detailed-chart">View detailed analysis</a>
  </figcaption>
</figure>

ویدیو و صدا

<!-- ویدیو -->
<video controls width="640" height="360">
  <source src="video.mp4" type="video/mp4" />
  <source src="video.webm" type="video/webm" />
  <track
    kind="captions"
    src="captions-en.vtt"
    srclang="en"
    label="English"
    default
  />
  Your browser does not support HTML5 video.
</video>

<!-- صدا -->
<audio controls>
  <source src="audio.mp3" type="audio/mpeg" />
  <source src="audio.ogg" type="audio/ogg" />
  Your browser does not support the audio element.
</audio>

نکات مهم:

همیشه controls را شامل کنید
برای ویدیو، زیرنویس ارائه دهید
برای صدا، رونوشت در متن را در نظر بگیرید

فرم‌ها و ورودی کاربر

ساختار فرم پایه

<form action="/submit" method="post" novalidate>
  <fieldset>
    <legend>Contact Information</legend>

    <label for="name">Full Name</label>
    <input type="text" id="name" name="name" required />

    <label for="email">Email Address</label>
    <input
      type="email"
      id="email"
      name="email"
      required
      aria-describedby="email-hint"
    />
    <p id="email-hint">We never share your email with anyone.</p>

    <label for="message">Message</label>
    <textarea id="message" name="message" rows="4" required></textarea>

    <button type="submit">Send Message</button>
  </fieldset>
</form>

توضیح ویژگی‌ها:

action: آدرس ارسال فرم
method: روش ارسال (GET یا POST)
novalidate: اعتبارسنجی HTML5 را غیرفعال می‌کند
required: فیلد اجباری است
aria-describedby: راهنمای اضافی را لینک می‌کند

انواع مختلف ورودی

<!-- ورودی متن -->
<label for="username">Username</label>
<input type="text" id="username" name="username" required />

<!-- ورودی ایمیل -->
<label for="user-email">Email</label>
<input type="email" id="user-email" name="email" required />

<!-- ورودی شماره -->
<label for="age">Age</label>
<input type="number" id="age" name="age" min="18" max="100" />

<!-- ورودی تاریخ -->
<label for="birthdate">Birth Date</label>
<input type="date" id="birthdate" name="birthdate" />

<!-- ورودی زمان -->
<label for="meeting-time">Meeting Time</label>
<input type="time" id="meeting-time" name="meeting-time" />

<!-- ورودی URL -->
<label for="website">Website</label>
<input type="url" id="website" name="website" />

<!-- ورودی تلفن -->
<label for="phone">Phone Number</label>
<input type="tel" id="phone" name="phone" />

<!-- ورودی رمز عبور -->
<label for="password">Password</label>
<input type="password" id="password" name="password" minlength="8" />

Textarea

<label for="bio">Short Biography</label>
<textarea
  id="bio"
  name="bio"
  rows="4"
  cols="50"
  placeholder="Tell us about yourself..."
  maxlength="500"
></textarea>

منوی انتخاب

<label for="country">Country</label>
<select id="country" name="country" required>
  <option value="">Please select a country</option>
  <option value="ir">Iran</option>
  <option value="us">United States</option>
  <option value="uk">United Kingdom</option>
  <option value="ca">Canada</option>
</select>

چک‌باکس‌ها و دکمه‌های رادیویی

<!-- گروه چک‌باکس -->
<fieldset>
  <legend>Newsletter Subscriptions</legend>

  <input type="checkbox" id="news" name="newsletter" value="news" />
  <label for="news">General News</label>

  <input type="checkbox" id="updates" name="newsletter" value="updates" />
  <label for="updates">Product Updates</label>

  <input type="checkbox" id="events" name="newsletter" value="events" />
  <label for="events">Event Notifications</label>
</fieldset>

<!-- گروه دکمه رادیویی -->
<fieldset>
  <legend>Preferred Contact Method</legend>

  <input type="radio" id="contact-email" name="contact" value="email" checked />
  <label for="contact-email">Email</label>

  <input type="radio" id="contact-phone" name="contact" value="phone" />
  <label for="contact-phone">Phone</label>

  <input type="radio" id="contact-sms" name="contact" value="sms" />
  <label for="contact-sms">SMS</label>
</fieldset>

دکمه‌ها

<!-- دکمه ارسال -->
<button type="submit">Submit Form</button>

<!-- دکمه بازنشانی -->
<button type="reset">Reset Form</button>

<!-- دکمه معمولی -->
<button type="button" onclick="saveDraft()">Save Draft</button>

<!-- دکمه با آیکون -->
<button type="submit">
  <svg width="16" height="16" viewBox="0 0 16 16">
    <path d="M8 1L15 8L8 15L1 8L8 1Z" fill="currentColor" />
  </svg>
  Send Message
</button>

جداول

جدول پایه

<table>
  <caption>
    Monthly Sales Report
  </caption>

  <thead>
    <tr>
      <th scope="col">Month</th>
      <th scope="col">Revenue</th>
      <th scope="col">Expenses</th>
      <th scope="col">Profit</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row">January</th>
      <td>$10,000</td>
      <td>$7,000</td>
      <td>$3,000</td>
    </tr>
    <tr>
      <th scope="row">February</th>
      <td>$12,000</td>
      <td>$8,000</td>
      <td>$4,000</td>
    </tr>
    <tr>
      <th scope="row">March</th>
      <td>$15,000</td>
      <td>$9,000</td>
      <td>$6,000</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <th scope="row">Total</th>
      <td>$37,000</td>
      <td>$24,000</td>
      <td>$13,000</td>
    </tr>
  </tfoot>
</table>

توضیح بخش‌ها:

<caption>: توضیح مختصر هدف جدول
<thead>: هدر جدول
<tbody>: محتوای اصلی جدول
<tfoot>: خلاصه یا جمع جدول
scope="col": برای ستون‌ها
scope="row": برای ردیف‌ها

جدول پیچیده با ادغام سلول‌ها

<table>
  <caption>
    Company Departments and Employees
  </caption>

  <thead>
    <tr>
      <th scope="col">Department</th>
      <th scope="col">Employee Name</th>
      <th scope="col">Position</th>
      <th scope="col">Salary</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row" rowspan="3">Engineering</th>
      <td>John Doe</td>
      <td>Senior Developer</td>
      <td>$80,000</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>Frontend Developer</td>
      <td>$65,000</td>
    </tr>
    <tr>
      <td>Bob Johnson</td>
      <td>Backend Developer</td>
      <td>$70,000</td>
    </tr>

    <tr>
      <th scope="row" rowspan="2">Marketing</th>
      <td>Alice Brown</td>
      <td>Marketing Manager</td>
      <td>$75,000</td>
    </tr>
    <tr>
      <td>Charlie Wilson</td>
      <td>Content Writer</td>
      <td>$50,000</td>
    </tr>
  </tbody>
</table>

نکات مهم:

از جداول فقط برای داده‌های جدولی استفاده کنید
برای layout از CSS استفاده کنید
همیشه <caption> شامل کنید
از scope برای مشخص کردن روابط استفاده کنید

دسترسی‌پذیری و ARIA

ویژگی‌های ARIA رایج

<!-- برچسب پنهان برای دکمه آیکون -->
<button aria-label="Close dialog">✖</button>

<!-- برچسب قابل مشاهده خارجی -->
<table aria-labelledby="pricing-title">
  <caption id="pricing-title">
    Pricing Plans
  </caption>
  <!-- table content -->
</table>

<!-- راهنمای اضافی -->
<input type="email" id="email" aria-describedby="email-help" required />
<p id="email-help">We'll never share your email with anyone.</p>

<!-- منطقه زنده برای به‌روزرسانی‌های پویا -->
<div aria-live="polite" id="notifications">
  <!-- Dynamic content will be announced -->
</div>

لینک پرش برای دسترسی‌پذیری کیبورد

<!-- لینک پرش (اولین فرزند body) -->
<a href="#main-content" class="skip-link">Skip to main content</a>

<header>
  <!-- header content -->
</header>

<main id="main-content">
  <!-- main content -->
</main>

CSS برای لینک پرش:

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #fff;
  padding: 8px;
  z-index: 100;
  text-decoration: none;
  color: #000;
}

.skip-link:focus {
  top: 0;
}

مدیریت فوکوس

/* استایل فوکوس قابل مشاهده */
:where(a, button, input, select, textarea, [tabindex]) :focus-visible {
  outline: 3px solid #004bcc;
  outline-offset: 2px;
}

/* حذف outline فقط برای موشواره */
:where(a, button, input, select, textarea, [tabindex])
  :focus:not(:focus-visible) {
  outline: none;
}

عناصر پیشرفته HTML

SVG درون‌خطی

<!-- SVG تزئینی -->
<svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true">
  <path d="M12 2L2 22h20L12 2z" fill="orange" />
</svg>

<!-- SVG با معنی -->
<svg
  width="100"
  height="100"
  viewBox="0 0 100 100"
  role="img"
  aria-labelledby="triangle-title"
>
  <title id="triangle-title">Warning Triangle Icon</title>
  <path d="M50 5 L95 95 H5 Z" fill="orange" />
</svg>

جاسازی محتوای خارجی

<!-- ویدیو یوتیوب -->
<iframe
  width="560"
  height="315"
  src="https://www.youtube-nocookie.com/embed/VIDEO_ID"
  title="YouTube Video Player"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
>
</iframe>

<!-- نقشه گوگل -->
<iframe
  width="600"
  height="450"
  src="https://www.google.com/maps/embed?pb=..."
  title="Google Maps Location"
  frameborder="0"
  allowfullscreen
>
</iframe>

عناصر متادیتا

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <!-- توضیحات برای موتورهای جستجو -->
  <meta
    name="description"
    content="Learn semantic HTML and accessibility best practices"
  />

  <!-- کلمات کلیدی -->
  <meta
    name="keywords"
    content="HTML, accessibility, semantic, web development"
  />

  <!-- نویسنده -->
  <meta name="author" content="Your Name" />

  <!-- Open Graph برای شبکه‌های اجتماعی -->
  <meta property="og:title" content="HTML Guide" />
  <meta property="og:description" content="Learn semantic HTML" />
  <meta property="og:image" content="https://example.com/image.jpg" />

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="HTML Guide" />

  <!-- آیکون سایت -->
  <link rel="icon" href="favicon.ico" type="image/x-icon" />
  <link rel="apple-touch-icon" href="apple-touch-icon.png" />

  <!-- فایل‌های CSS -->
  <link rel="stylesheet" href="styles.css" />

  <title>HTML Guide</title>
</head>

بهبود تدریجی و پشتیبانی

HTML پایه بدون JavaScript

<button id="menu-toggle">Menu</button>
<nav id="site-nav">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/services">Services</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

اضافه کردن JavaScript

<script>
  // JavaScript برای بهبود تجربه کاربری
  document.getElementById("menu-toggle").addEventListener("click", function () {
    const nav = document.getElementById("site-nav");
    nav.classList.toggle("open");
  });
</script>

نکات مهم:

همیشه HTML پایه کارآمد ارائه دهید
JavaScript را برای بهبود تجربه اضافه کنید
بدون JavaScript، سایت همچنان قابل استفاده باشد

پروژه عملی: ساخت صفحه "درباره من"

حالا بیایید همه چیز را با هم ترکیب کنیم و یک صفحه کامل بسازیم:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="Personal portfolio and about me page" />
    <title>About Me - Your Name</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <!-- لینک پرش -->
    <a href="#main-content" class="skip-link">Skip to main content</a>

    <!-- Header -->
    <header>
      <h1>Your Name</h1>
      <p>Web Developer & Designer</p>

      <nav aria-label="Main navigation">
        <ul>
          <li><a href="#about">About</a></li>
          <li><a href="#skills">Skills</a></li>
          <li><a href="#projects">Projects</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </nav>
    </header>

    <!-- Main content -->
    <main id="main-content">
      <!-- About section -->
      <section id="about">
        <h2>About Me</h2>
        <figure>
          <img
            src="profile-photo.jpg"
            alt="Your Name - Professional headshot"
            width="300"
            height="300"
          />
          <figcaption>Your Name - Professional Developer</figcaption>
        </figure>

        <p>
          I'm a passionate web developer with 5 years of experience creating
          accessible and user-friendly websites. I believe in writing clean,
          semantic code that works for everyone.
        </p>
      </section>

      <!-- Skills section -->
      <section id="skills">
        <h2>Technical Skills</h2>
        <ul>
          <li>HTML5 & CSS3</li>
          <li>JavaScript (ES6+)</li>
          <li>React & Vue.js</li>
          <li>Node.js & Express</li>
          <li>Accessibility (WCAG 2.1)</li>
        </ul>
      </section>

      <!-- Projects section -->
      <section id="projects">
        <h2>Featured Projects</h2>

        <article>
          <h3>E-commerce Website</h3>
          <p>
            A fully accessible e-commerce platform built with modern web
            technologies. Features include semantic HTML, ARIA labels, and
            keyboard navigation.
          </p>
          <a
            href="https://project1.com"
            target="_blank"
            rel="noopener noreferrer"
          >
            View Project
          </a>
        </article>

        <article>
          <h3>Portfolio Template</h3>
          <p>
            A responsive portfolio template that follows accessibility best
            practices. Includes skip links, proper heading structure, and
            semantic markup.
          </p>
          <a
            href="https://project2.com"
            target="_blank"
            rel="noopener noreferrer"
          >
            View Project
          </a>
        </article>
      </section>

      <!-- Contact section -->
      <section id="contact">
        <h2>Get In Touch</h2>

        <form action="/contact" method="post" novalidate>
          <fieldset>
            <legend>Contact Form</legend>

            <label for="contact-name">Name</label>
            <input type="text" id="contact-name" name="name" required />

            <label for="contact-email">Email</label>
            <input type="email" id="contact-email" name="email" required />

            <label for="contact-message">Message</label>
            <textarea
              id="contact-message"
              name="message"
              rows="5"
              required
            ></textarea>

            <button type="submit">Send Message</button>
          </fieldset>
        </form>
      </section>
    </main>

    <!-- Aside -->
    <aside>
      <h2>Quick Links</h2>
      <ul>
        <li><a href="https://github.com/yourusername">GitHub</a></li>
        <li><a href="https://linkedin.com/in/yourusername">LinkedIn</a></li>
        <li><a href="https://twitter.com/yourusername">Twitter</a></li>
      </ul>
    </aside>

    <!-- Footer -->
    <footer>
      <p>&copy; 2025 Your Name. All rights reserved.</p>
      <nav aria-label="Footer navigation">
        <ul>
          <li><a href="/privacy">Privacy Policy</a></li>
          <li><a href="/terms">Terms of Service</a></li>
        </ul>
      </nav>
    </footer>
  </body>
</html>