Newsgames — HTML

Skeleton Layout

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <meta name="description" content="A challenging skyscraper building game Cardbury by Iffix Y Santaph.">
    <title>Newsgames &mdash; Cardbury</title>
    <link rel="icon" href="/favicon.ico">
    <link rel="canonical" href="https://newsgames.co.za/cardbury/">
    <link rel="stylesheet" href="style.css">
    <script type="module" src="main.js"></script>
  </head>
  <body>
    <header>
      <h1>...</h1>
    </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 of 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”>

Including initial-scale=1.0 was historically necessary to prevent unintended zooming behaviors in older mobile browsers. While modern browsers don’t require initial-scale to resolve this behavior, initial-scale is not entirely redundant and remains useful when defining custom scale defaults or fixed layout widths. — MDN article on viewport

content="width=device-width" sets the vw unit used in the CSS stylesheet.

Lighthouse gives bad marks for some values:

[user-scalable="no"] is not used in the <meta name="viewport"> element and the [maximum-scale] attribute is not less than 5.

<meta name=“description” content=“blah blah”>

Google will sometimes use the <meta name="description"> tag from a page to generate a snippet in search results, if we think it gives users a more accurate description than would be possible purely from the on-page content. A meta description tag generally informs and interests users with a short, relevant summary of what a particular page is about. They are like a pitch that convince the user that the page is exactly what they’re looking for. There’s no limit on how long a meta description can be, but the snippet is truncated in Google Search results as needed, typically to fit the device width. — Google’s Best practices for creating quality meta descriptions

Lighthouse tests “Document has a meta description”.

<title>…</title>

The title is shown by the browser’s title bar and the page’s tab. It’s also tested for by Lighthouse.

<link rel=“icon” href=“/favicon.ico”>

A favicon (favorite icon) is shown next to the title by the browser if available. Usually, a favicon is 16 x 16 pixels in size and stored in the GIF, PNG, or ICO file format.

If there are multiple <link rel="icon">s, the browser uses their media, type, and sizes attributes to select the most appropriate icon. If several icons are equally appropriate, the last one is used. — MDN’s rel article.

<link rel=“canonical” href=“…”>

Document does not have a valid rel=canonical costs you Lighthouse points.

Use landmark elements to improve navigation

<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>

One main landmark

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

<button id="text">Name</button>

🏠 HTML Basics