tylensthilaire/portfolio

Set up base html template

Closed this issue · 0 comments

tylensthilaire commented
  • Doctype is declared as HTML 5 and is at the top of all HTML pages.
<!doctype html> <!-- HTML5 -->
  • Basic structure is set up
<html>
  <head>
  </head>
  <body>
  </body>
</html>
  • Language of page is set
<html lang="en">
  • Writing direction is set
<html dir="rtl">
  • Default language page is set
<link rel="alternate" href="https://example.com/" hreflang="x-default" />
  • Character set is declared as UTF-8, and is the first item in the <head> element
<!-- Set character encoding for the document -->
<meta charset="utf-8">
  • Viewport is declared for responsive web and is the second item in the head element
  • Set viewport to screen width in CSS pixels
  • Set initial scale to 1, preventing odd zooming when viewport size changes (e.g. orientation change)
  • User can control the UI scale, with no min or max
  • UI covers the screen on non-rectangular devices (e.g. iPhone X)
<!-- Viewport for responsive web design -->
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  • Each page has a unique title
  • Each page can have it‘s own title, with a master title appended to it, delimited by ‧
<!-- Document Title -->
<title></title>
  • Each page has a unique meta description
<!-- Meta Description -->
<meta name="description" content="">
  • Each page has a canonical tag
  • Can be overridden if needed
<!-- Prevent duplicate content issues -->
<link rel="canonical" href="http://example.com">
  • Feeds are present
<link rel="alternate" href="feed/feed.xml" type="application/atom+xml" title="title">
<link rel="alternate" href="feed/feed.json" type="application/feed+json" title="title">
  • CSS links are present
<link rel="preload" as="style" href="css/critical.css">
<link rel="stylesheet" href="css/non-critical.css" media="print" onload="this.onload=null;this.removeAttribute('media');">
<noscript>
<link rel="stylesheet" href="css/non-critical.css">
</noscript>
  • Javascript is included after CSS, with async and defer attributes as needed
<script async src="js/main.js"></script>
<script defer src="js/other.js"></script>