@fggdbdsbfd
Posted
I'd be happy to give you some advice on the topic of landmarks in HTML documents! Here are some tips, presented in bullet points with a professional tone and a few helpful emojis:
-🏠 Every good HTML document should have a main landmark! This landmark helps users understand the structure of the page and navigate it more easily.
-📌 The main landmark should typically be the <main> element. This element should contain the main content of the page, such as articles, posts, or product listings.
-🔎 You can use ARIA attributes to help identify your main landmark and make it more accessible to users who rely on assistive technologies.
-🧐 Remember that other landmarks, such as <header>, <nav>, <aside>, and <footer>, can also be helpful for organizing your content and making it easier to navigate.
-💻 When designing your HTML document, it's important to consider the needs of all users, including those with disabilities. By using proper landmarks and ARIA attributes, you can make your site more accessible and user-friendly for everyone.
-I hope these tips help you create an organized and accessible HTML document with a clear main landmark! If you have any more questions, feel free to ask.
Marked as helpful
@faruquedewan
Posted
@fggdbdsbfd Can you show me some examples of a properly landmarked HTML file?
@fggdbdsbfd
Posted
@faruquedewan Certainly! Here's an example of a properly landmarked HTML file using HTML5 semantic elements:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example Landmarked HTML File</title>
</head>
<body>
<header>
<h1>Example Landmarked HTML File</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Section 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>
<section>
<h2>Section 2</h2>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</section>
</main>
<footer>
<p>Copyright © 2023 Example Company</p>
</footer>
</body>
</html>
In this example, we've used the following semantic elements:
<header> to mark up the top section of the page, which contains the main heading and navigation menu. <nav> to mark up the navigation menu within the header. <main> to mark up the main content of the page. <section> to mark up individual sections of content within the main element. <footer> to mark up the bottom section of the page, which contains copyright information. Using these semantic elements helps to make the structure of the page clearer and easier to understand for both humans and machines. It also improves accessibility for users who rely on assistive technologies to navigate the web.Marked as helpful
