Preparations and Semantic Tags
Before creating this website, I carefully planned the structure and layout to ensure the use of semantic HTML tags, improving both accessibility and SEO. Tags like <header>, <main>, <section>, and <footer> provide meaningful structure and hierarchy to the page.
<header>: Defines the introductory section, including the title and navigation.<nav>: Ensures easy navigation for users and screen readers.<main>: Contains the main content of the page.<section>: Separates different thematic parts of the content.<footer>: Marks the end of the page, providing credits and copyright information.
Why I Included Specific Content
- Header: Introduces the website and includes a navigation bar for easy access to other sections.
- Main Content: Provides the core information in a structured manner, using
<section>elements to separate different topics. - Footer: Includes necessary information like copyright and credits to maintain proper attribution.
Layout Sketch (Box Model)
The sketch above shows the box model layout for this website, outlining the placement of the header, navigation, main content, and footer. This layout approach ensures consistent padding, margins, and borders across all elements.