When you're new to web development, creating a webpage can seem daunting. Here's a quick overview of how to make a basic page.
To have your content render in a modern browser, you need a basic structure, something like the following:
<!-- E.g. index.html OR default.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Give your page a meaningful title right here friend</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> </head> <body> Your awesome content goes right here, within the opening and closing `body` tags. </body> </html>
One of the tricks to making your website content discoverable and accessible (a11y) to your users, is making the content structured and meaningful.
langattribute in the
htmltag lets screen readers know what language to read back your webpage's content in to a user.
titletag helps you give your webpage a title (the actual title, for instance, that a search engine, e.g. Google, would use to display in a search result).
viewportmeta setting helps you define your page as responsive or mobile-friendly.
charsetattribute specifies the character encoding; ideally, you should include this before the
bodytag is where you put your content.
Learn more about HTML and its tags in the MDN Web Docs.
The above example outlines the basics of making a webpage, but it's easy to deviate into a place where the HTML is not accessible, especially if tags are misused. This is where semantic HTML comes in.
Rather than merely presenting a webpage, semantic markup provides meaning to it. Using either of these HTML tags will display `Hello World`` just fine, for example:
Despite this, the
p tag and
span tag have different meanings for a screen reader, which is what someone with limited vision or no vision would use to access the content of your webpage.
Learn more about semantic HTML and accessibility over at the A11Y project.