Skeleton Layout
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A challenging skyscraper building game Cardbury by Iffix Y Santaph..">
<link rel="stylesheet" href="style.css">
<script type="module" src="main.js"></script>
<link rel="canonical" href="https://newsgames.co.za/cardbury/">
<link rel="icon" href="/favicon.ico">
<title>Newsgames — Cardbury</title>
</head>
<body>
<header>
</header>
<nav>
</nav>
<main>
</main>
<footer>
</footer>
</body>
</html>No self-closing tags
Something I’ve found confusing is things like
<meta charset="utf-8"> are often coded as
<meta charset="utf-8" />.
MDN’s article on void
elements explains one the differences between HTML and XML is
<elementName /> is always wrong. Most of MDN’s
examples of void elements such as img and
meta, however, use closing tags.
A reason to avoid closing tags is it leads to common mistakes such as
<script src="script.js"/>. This is a mistake because
script
is not a void element, so has to have the closing
</script> even if used with the src
attribute as a link with no contents between the opening and closing
tags.
<!doctype html>
This is for historical reasons dating back to Netscape Navigator vs Microsoft Internet Explorer vs W3C standards.
If forgotten, Lighthouse warns:
Source code for Page lacks the HTML doctype, thus triggering quirks mode audit
<html lang=“en”>
Lighthouse stipulates <html> element must have a lang attribute and it must be valid.
<meta charset=“utf-8”>
This declaration has to be within the first 1024 bytes of an HTML file, so best put immediately after the head opening tag. The only legal value is “utf-8”, but Lighthouse will complain if you don’t declare a character encoding.
<meta name=“viewport” content=“width=device-width, initial-scale=1”>
[user-scalable="no"]is not used in the<meta name="viewport">element and the[maximum-scale]attribute is not less than 5.
The page contains a heading, skip link, or landmark region
<header>
<div>This is the header.</div>
</header>
<nav>
<div>This is the navigation.</div>
</nav>
<main>
<div>This is the main content.</div>
<section>
<div>This is a section.</div>
</section>
<article>
<div>This is an article.</div>
</article>
<aside>
<div>This is an aside.</div>
</aside>
</main>
<footer>
<div>This is the footer.</div>
</footer>Document should have one main landmark
The content of a <main> element should be unique to the document. Content that is repeated across a set of documents or document sections such as sidebars, navigation links, copyright information, site logos, and search forms shouldn’t be included unless the search form is the main function of the page. — HTML main element
Heading elements appear in a sequentially-descending order
There should only be one h1 heading, others nested in h2.
Buttons have an accessible name
<button id="text">Name</button>