Overview

See HTML Element Reference on W3 schools.

See specific tags of interest to me covered below.

Code and pre

Use pre for preformatted text - linebreaks are kept and HTML symbols don’t need escaping.

Use code for representing code snippets or if you have actual JSON data for example to store on the page.

Code

<pre>Using the
pre tag
over multiple lines.</pre>

Result

Using the
pre tag
over multiple lines.

Code

It’s best to keep everything one line to avoid rendering the whitespace.

<code><pre>console.log('Hello, world');</pre></code>

Result

<pre>console.log('Hello, world');</pre>

Code

<code><pre><div>HTML snippet</div></pre></code>

Result

<pre><div>HTML snippet</div></pre>

Table

See table tutorial

<table>
    <tr>
        <th>Month</th>
        <th>Savings</th>
    </tr>
    <tr>
        <td>January</td>
        <td>$100</td>
    </tr>
</table>

The <table> tag defines an HTML table.

An HTML table consists of one <table> element and one or more <tr>, <th>, and <td> elements.

The <tr> element defines a table row, the <th> element defines a table header, and the <td> element defines a table cell.

An HTML table may also include <caption>, <colgroup>, <thead>, <tfoot>, and <tbody> elements.

nav

<nav>
    <a href="/html/">HTML</a> |
    <a href="/css/">CSS</a> |
    <a href="/js/">JavaScript</a> |
    <a href="/python/">Python</a>
</nav>

The <nav> tag defines a set of navigation links.

Notice that NOT all links of a document should be inside a <nav> element. The <nav> element is intended only for major block of navigation links.

Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content.

Script

  • script tag reference in Mozilla docs.

Examples

You don’t have to set type="text/javascript" as that is implied.

Inline:

<script>
  alert("Hello World!");
</script>

External script:

<script src="main.js"></script>

Modules:

<script type="module" src="main.js"></script>

<script nomodule src="fallback.js"></script>

In a module, you can use the module import syntax in a script to load a library from a CDN or your own packages.

Embedding non-JS data:

<!-- Generated by the server -->
<script id="data" type="application/json">
  {"userId":1234,"userName":"John Doe","memberSince":"2000-01-01T00:00:00.000Z"}
</script>

<!-- Static -->
<script>
  const userInfo = JSON.parse(document.getElementById("data").text);
  console.log("User information: %o", userInfo);
</script>