When you only create a new base template every few months (or longer!), it’s hard to remember the little details of the structure that you don’t touch often.
As of HTML5, the <doctype>
declaration and structure has gotten a lot easier, but it’s still easy to forget. Here’s the basics:
<!DOCTYPE html> <html lang="en"> <head> <title>Page Title</title> <meta charset="utf-8" /> <!-- other meta, CSS, and custom tags --> </head> <body> <header>Site Title</header> <main> <h1>Page Title</h1> <p>Body content</p> </main> <footer>Site Footer</footer> <!-- load JS here so it doesn't block the rendering of the page --> </body> </html>
Notes on Easily Forgotten Structural Tags
- <!DOCTYPE html>: Tells the browser/parser that the file is written in HTML.
- <html lang=”en”>: Tells screen readers and search engines that the page is written in English. You can look up other language character codes.
- <main>: Sets the main content for this page. This is generally what makes this page unique. For example, a news article would be wrapped in the
HTML tag.
Copy/Paste this boilerplate HTML and get going!
Further Reading
- Using the HTML lang attribute by Leonie Watson for the Paciello Group
- Recommended Doctype Declarations to use in your Web document from W3.org
- ISO 2 Letter Language Codes from SitePoint