ebeshero / DHClass-Hub

a repository to help introduce and orient students to the GitHub collaboration environment, and to support DH classes.
GNU Affero General Public License v3.0
27 stars 27 forks source link

HTML Semantic Elements for structuring a page #765

Closed ebeshero closed 4 years ago

ebeshero commented 4 years ago

We've been exploring CSS flexboxes, which get us thinking about webpage structure and how you want to organize information. The w3c (World-Wide Web Consortium) recently introduced in HTML5 a collection of "semantic elements," to help with making a website accessible for screen reader "assistive technology" and really anyone who needs to access a site "under the hood" to read the code. You might be getting used to organizing portions of a website with <div> elements (we've done that too), but there are better ways that are helpful for people who have to access your site in unusual ways like with screen-reader software or braille browsers. Here's a good, clear orientation to the semantic HTML elements with examples.

We'd love to see these HTML semantic elements implemented in your personal and project sites! Also, it's easier to read your own code as you're working on it with elements like <section> , <aside>, and <details> available now instead of just <div>.