Project Planning & Semantic Structure
Plan and structure a professional portfolio website using semantic HTML5 — proper document outline, landmark regions, and content organization.
55 min•By Priygop Team•Last updated: Feb 2026
Project Architecture
- Document Structure: <!DOCTYPE html> <html lang='en'> — always specify lang attribute for accessibility and SEO. Set charset='UTF-8' and viewport meta for mobile responsiveness
- Semantic Layout: <header> (site branding + nav), <main> (primary content), <footer> (copyright + links). Each landmark region helps screen readers navigate and search engines understand page structure
- Page Sections: Use <section> with aria-labelledby for distinct content areas — hero, about, skills, projects, testimonials, contact. Each <section> should have a heading (h2-h6) for proper document outline
- Navigation: <nav aria-label='Primary'> with <ul>/<li>/<a> — semantic navigation that screen readers announce as a landmark. Skip navigation link: <a href='#main-content' class='skip-link'>Skip to content</a>
- Meta Tags for SEO: <title> (60 chars max), <meta name='description'> (155 chars max), <link rel='canonical'>, <meta property='og:title'>, <meta property='og:image'> — essential for search ranking and social sharing
- Favicon & Assets: <link rel='icon' type='image/svg+xml' href='/favicon.svg'> — SVG favicons support dark mode. Apple touch icon for iOS: <link rel='apple-touch-icon' href='/apple-touch-icon.png'>
Content Strategy
- Hero Section: <section id='hero'> with <h1> (only one h1 per page), intro paragraph, and CTA links. The h1 should contain your name/brand and primary keyword for SEO
- About Section: <section id='about'> with <article> for self-contained bio content. Use <figure>/<figcaption> for profile photo with descriptive caption
- Skills Section: <section id='skills'> using <ul> with descriptive <li> items. Use <meter> or <progress> elements for skill proficiency bars — semantically meaningful, not just visual decoration
- Experience/Timeline: <section id='experience'> with <ol> for chronological events. Use <time datetime='2024-01'> for machine-readable dates. Screen readers announce the ordered sequence
- Contact Section: <section id='contact'> with properly structured <form>. Every <input> needs a <label for='id'>. Group related fields with <fieldset>/<legend>. Use appropriate input types (email, tel, url)
- Footer Content: <footer> with <address> for contact info (semantic element specifically for contact details), social links with aria-label, and copyright using <small>