HTML

HTML primary, and probably only purpose, is to build web pages 🌍.

  • 👉 It can be used in PHP scripts
  • 👉 It can be used in JavaScript scripts
  • 👉 It's pretty similar to XML which is used on Android/...

Where to learn?

HTML versions

Since HTML5, similarly to CSS, HTML has become complete, and versioning was dropped. HTML is now a living standard, and new versions (HTML 5.2/5.3) were dropped.


Some tools

HTML syntax

An HTML file (.html) is a tree of tags (html, head, body...).

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Title of your website</title>
        <!-- ... -->
    </head>
    <body>
        <!-- ... -->
    </body>
</html>

➡️ <!doctype html> is not a tag, but an element telling a browser what kind of document type to expect.

  • Every tag is a child of html.
  • The head is where we put metadata (ex: the title of the website).
  • The body is where we put the code (ex: the navigation bar...).

Notes

  • 👉 Tags are case-insensitive (head or HEAD or hEAd...)
  • 👉 Tags can have attributes (lang="en"...)
    • 👉 Properties are case-insensitive (lang or LANG...)
    • 👉 Quotes are optional (lang="en" or lang=en)
    • 👉 Quotes can be single quotes (lang="en" or lang='en')
  • 👉 Indentations are optional
  • 👉 You can put multiple tags on one line

🧼 The most important takeaway is to be consistent.

HTML tags

HTML tags are divided into three categories:

  • 🌍 Normal HTML tags: <a></a>, <span></span>...
  • 🎹 Auto-closing tags: <img>, <input>, <br>...
  • 🗃️ Blocking tags: <p></p>, <div></div>, <h1></h1>...

👑 To be correct, non-blocking tags are called inline elements, while blocking tags are called block-level elements, and they usually group a bunch of inline elements.

➡️ For auto-closing tags, <img> or <img /> is the same.

➡️ The browser will try to display as many tags as possible on the same line. You can use <br> to force a line break. For blocking tags, by default, they will take a whole line for themselves.

<p>one line for this one</p>
<span>This one,</span>
<span>this one,</span>
<a href="#">and this one, are on the same line.</a>

HTML elements

Headers

From h1 to h6, the lower the number, the bigger the title.

<h6>Some small title</h6>
Some small title

➡️ HTML standard: up to one <h1> per page.


Paragraphs

Note that <p> is blocking, while <span> is not.

<p>xxx</p>
<span>xxx</span>

xxx

xxx

➡️ You can write multiline texts. Note that two or more spaces are merged into one. Indentations are NOT kept either.

➡️ You can use &code; to encode some characters like: &nbsp; (space) &#244; (ô) &#224; (à) &lt; (<) &gt; (>)...


Links

Use <a>Text</a> to create a link. The user will see Text.

<a href="test.html">Link to a local file</a>
<a href="https://duckduckgo.com/">External link</a>
<a href="..." target="_blank">Open in a new tab</a>
<a href="#">Do nothing</a>
<a href="#id">Move to the div id="#id"</a>
<a href="mailto:a@b.c">Send a mail to xxx</a>

Images

If an image cannot be loaded, alt will be shown instead.

<img src="xxx.png" alt="alternative text">
<img src="xxx.png" alt="xxx" title="shown on hover">
<img src="xxx.png" alt="xxx" width="48" height="48">

➡️ See also figure/figcaption, and picture.


Lists

You can make ordered lists (1., 2....) with <ol>, and unordered lists with <ul>. Each entry in the list is inside a tag <li>.

<ol>
  <li>one</li>
  <li>two
    <ul>
      <li>xxx</li>
      <li>yyy</li>
    </ul>
  </li>
</ol>
  1. one
  2. two
    • xxx
    • yyy

➡️ You can change the ordered starting value with start="n", and the kind of value used, using the CSS attribute list-style-type.

Containers: div

A div is a blocking component that is not visible to the user, and is mainly used to group components, either to apply a CSS to the block, or to make the code more readable.

<div>
    <h3>XXX</h3>
    <p>xxx</p>
</div>

Tables

Use table, tr, th/td to make tables.

Click to see the code

column1 titlecolumn2 title
line-1 col-1line-1 col-2
line-2 col-1line-2 col-2
line-3

➡️ thead/tbody were added in HTML5, and are optional. See also <tfoot>, and <caption>.

<table class="table table-bordered border-dark">
    <!-- header of your table / tr + th -->
    <thead>
        <tr>
            <th>column1 title</th>
            <th>column2 title</th>
        </tr>
    </thead>
    <!-- body of your table / tr + td -->
    <tbody>
        <!-- tr = a line -->
        <tr>
            <td>line-1 col-1</td>
            <td>line-1 col-2</td>
        </tr>
        <tr>
            <td>line-2 col-1</td>
            <td>line-2 col-2</td>
        </tr>
        <tr>
          <!-- multiple columns -->
          <td colspan="2">line-3</td>
        </tr>
    </tbody>
</table>

Style

We can add some charm to our website without CSS.

<b>bold</b>
<u>underlined</u>
<s>crossed out</s>
<i>italic</i>
<em>emphasis</em>
<small>small</small>
<mark>marked</mark>
<kbd>key</kbd>
<sup>superscript</sup>
<sub>subscript</sub>
<abbr title="xxx">x</abbr>

bold
underlined
crossed out
italic
emphasis
small
yellow background
CTRL+S
at the top
at the bottom
hover me

➡️ See also var, samp, q, strong, del...


Others

  • Use <hr> to create a horizontal separator.
  • Use <br> to create a blank line.
  • Use <wbr> to force a new line (in a long text).
  • Use <nobr>xxx</nobr> to not break a long text.
  • Use details/summary to create a dropdown
  • Use <audio src="URL" controls></audio> for audio
  • Use <video src="URL" controls></video>+track for videos
  • Use <dialog> to display a dialog
  • Use <code> to display some code
  • Use <pre> to preserve indentations/...

HTML5 tags

HTML5, or more HTML now, is something toward giving a semantic to each part of the website. It's more for robots than humans. All of them are simply named div.

  • header: usually the top of the website, with the navbar...
  • nav: a navbar (ex: one can be inside "header")
  • main: the main content of the website (~one per page)
  • article: a group of sections about a topic
  • section: a part of an article (ex: Introduction)
  • aside: complements to the article (ex: contact information...)
  • footer: the footer of your website...

➡️ You can add a header/footer/... to a section/...

These tags are, in my opinion, semantic tags

  • Use <cite>ref</cite> to reference something
  • Use <q cite="src">xxx</q> to quote something short
  • Use <blockquote cite="src">xxx</blockquote> to quote something long
  • Use <time datetime="2020-12-06">December 6</time> for dates
  • Use <dl><dt>term</dt><dd>def</dd></dl> for a definition
  • Use <address>xxx</address> to wrap an address
  • ...

Forms

An HTML form (<form>) is a group of input elements (<input>, <textarea>...). You can use either GET or POST HTTP methods.

<form method="POST" action="https://example.com/login.php">
    <!-- ... -->
</form>

➡️ GET is used for searches/..., while POST is used for logins/...

➡️ See also fieldset and legend for decorations.


Action

The attribute action is where the data should be sent. You will need a server (a PHP/Node server, an API...) to handle the submission.

Each input field must have a unique name. This name is what the server will receive, along with the value.

<input name="username" value="toto" />
<input name="password" value="toto" />

What the server receives: username=toto&password=toto.


Submit/Reset a form

Any button inside a form will submit the whole form.

<button>submit the form</button>
<button type="submit">submit the form</button>
<button type="button">won't submit the form</button>
<button type="reset">reset the form</button>

External input fields

It's possible to have input fields outside the tag <form>. In such a scenario, you must add an id to the form, and the input must reference it.

<form id="xxx"></form>
<input form="xxx"> <!-- reference id="xxx" -->

Input

An input field has a type which could be text, date, password, tel, range, checkbox, radio, number, email...

<input type="text" name="xxx">
<!-- many useful attributes -->
<input type="text" name="xxx" value="default value">

➡️ For "checkbox", you can use the property checked.

➡️ For radio buttons, every input field must have the same name.


TextArea

Any button inside a form will submit the whole form.

<textarea name="xxx">simple text area</textarea>
<textarea name="xxx" rows="10" cols="50"></textarea>

Labels 👑

Labels are used to associate prompt text with an input field. When clicking on the text, the matching input field is automatically focused.

<label>email: <input type="email"></label>
<!-- OR -->
<label for="email">email:</label>
<input id="email" type="text">

Input elements attributes

These can be used on any input elements such as <input>.

<input required> <!-- must have a value -->
<input hidden> <!-- hidden -->
<input disabled> <!-- cannot be edited -->
<input placeholder="shown when empty">
<input pattern="[a-z]+"> <!-- pattern to match -->
<input min="x" max="y"> <!-- range -->
<input minlength="z" maxlength="t"> <!-- ... -->

Metadata

  • ➡️ The icon of the website
<link rel="icon" href="icon.png">
  • ➡️ Basic information
<meta name="author" content="...">
<meta name="copyright" content="...">
<meta name="keywords" content="....">
<meta name="description" content="...">

👉 See also metatags for social network tags.

  • ➡️ Crawlers (robots indexing your website) 
<!-- index and follow -->
<meta name='robots' content='index, follow'>
<!-- don't index nor follow -->
<meta name='robots' content='noindex, nofollow'>
  • ➡️ HTML Refresh/Redirect
<!-- refresh in 5 seconds -->
<meta http-equiv="refresh" content="5">
<!-- HTML redirect -->
<meta http-equiv="refresh" content="0; url=URL">

Accessibility

Apple touch icon

More at webhint.io/Apple Touch Icon.

<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png" />

URL/humans.txt

Learn more about it at humanstxt.org, and humanstxt.org - Standard.

<link type="text/plain" rel="author" href="URL/humans.txt"/>

Semantic Web

The goal was to make page easy to understand for robots. Some languages were introduced like RDF, a triple model, in which every piece of knowledge is broken down into (subject, predicate, object). A query language called SPARQL can query RDF triples.

HTML security 🛡️

Subresource Integrity (SRI): to ensure that an external CSS/JS file has not been tampered with, we add a hash of the file, and check the integrity. If needed, you can generate an SRI here.

<script src="SOME/URL" 
        integrity="sha512-93xLZnNMlYI6xaQPf/cSdXoBZ23DThX7VehiGJJXB76HTTalQKPC5CIHuFX8dlQ5yzt6baBQRJ4sDXhzpojRJA==" 
        crossorigin="anonymous" referrerpolicy="no-referrer">
</script>

URL opener: most browsers were patched in 2021, but before, a vulnerability allowed malicious websites to access the website users were coming from before clicking on a link to the malicious website.

👻 To-do 👻

Stuff that I found, but never read/used yet.

  • aria (aria-label)
  • role attribute (role="search"/role="tab")
  • mhtml
  • Introducing HTML5
  • Select tag
  • math tag LaTeX Math to HTML
  • PHP comments
  • template tag
<noscript></noscript>
<a download="xxx"></a>

<link rel="shortcut icon" sizes="16x16" href="static/images/favicons/favicon.png">
<link rel="shortcut icon" sizes="32x32" href="static/images/favicons/favicon-32.png">

<meta name="mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#333333">