About this Post

Keep it Simple. Keep it Semantic.


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>

This minimal example doesn't have any references to JavaScript or CSS for styling, it's just barebones, vanilla HTML, which is all you really need for starters.

The more I build accessible UI elements the more I witness how friggin powerful semantic HTML is. Sure, I already knew how important it is but seriously accessibility is one of those things that make it SHINE! Writing proper HTML+CSS certainly is a very powerful job of its own.
Loading...

One of the tricks to making your website content discoverable and accessible (a11y) to your users, is making the content structured and meaningful.

  • The lang attribute in the html tag lets screen readers know what language to read back your webpage's content in to a user.
  • The title tag 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).
  • The viewport meta setting helps you define your page as responsive or mobile-friendly.
  • The charset attribute specifies the character encoding; ideally, you should include this before the title tag.
  • The body tag 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:

<p>Hello world!</p>

and

<span>Hello world!</span>

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.

“a11y” is short for “accessibility”. That is all. This is my tweet. #a11y 👇🏻 Image via @mds
“a11y” is short for “accessibility”.

That is all. This is my tweet. #a11y

👇🏻 Image via @mds https://t.co/1LH1sTRskc
Loading...

Learn more about semantic HTML and accessibility over at the A11Y project.

If you want to host your webpage on the Web, you'll need to upload it to a server. You can do this for free with Zeit, Netlify or GitHub Pages (just to name a few).

Related: