Simple Menus
If the site has just a few links in the navigation you can put the links inside of a list which is inside of a nav tag. The
nav tag should have an aria-label="Main Navigation" to describe for screenreaders the purpose of the navigation.
Since the links are enclosed inside a list the screenreader will announce how many links are in the navigation.
Lists are normally block-level elements so the default style of this menu is vertical - though it can easily
be converted to a horizontal layout using CSS.
<nav aria-label="Main Navigation">
<ul>
<li><a href="resume.html" title="My resume.">Resume</a></li>
<li><a href="programming.html" title="My programming experience.">Programming</a></li>
<li><a href="education.html" title="My educational journey.">Education</a></li>
<li><a href="design.html" title="My design portfolio.">Design</a></li>
<li><a href="hobbies.html" title="My hobbies and off-work activities.">Hobbies</a></li>
<li><a href="contact.html" title="Contact me.">Contact</a></li>
</ul>
</nav>
Styling with CSS
The example HTML above can be styled with CSS in many different ways. For example, the menu could be styled to display vertically or horizontally.