When you're new to web development, creating a webpage can seem daunting. And, rightfully so - there are quite a few parts to it all, but like with most things: start with one piece at a time. With that, 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.
One of the tricks to making your website content discoverable and accessible (a11y) to your users, is making the content structured and meaningful.
- The
langattribute in thehtmltag lets screen readers know what language to read back your webpage's content in to a user. - The
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). - The
viewportmeta setting helps you define your page as responsive or mobile-friendly. - The
charsetattribute specifies the character encoding; ideally, you should include this before thetitletag. - 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:
<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.
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: