HTML Course

Learn HTML5

As explained in the Web course, HTML is the language used to write a web page. To be exact, the final result is in HTML, but you could have used other languages to generate the HTML page (such as PHP or Node.js), as there is no way to factorize code in pure HTML.

The current version that you should use is HTML5, but even if many browsers have yet to support it, and not many people are aware of it, we are in HTML5.2 (HTML 5 2nd minor version, December 2017). You can check the coverage of HTML5 by your browser here (for instance, try "summary", a new tag introduced in HTML5.1, or simply enter "HTML5").

The usual place to learn HTML/CSS/JS is W3Schools. Personally, I'm enjoying MDN/Mozilla Developer Network.

Note: as a good developer ๐Ÿ˜Ž, you should follow the standards when writing code. You can test your code using the W3C validator. You can also add a badge that will redirect to the validator with your page inside as explained here.

Recently, I discovered that you could check your website with webhint.io, which is also embedded in edge developer tools, and providing quite good feedback. You also got other tools, such as Lighthouse to check the performances, etc. (check WEB course)


Introduction

To summarize what was written in the WEB course,

  • a browser and a server are communicating using the protocol HTTP (or HTTPS=HTTP Secure)
  • when you are visiting a page (ex: https://duckduckgo.com)
  • you are asking the server to return the HTML for this page
  • usually, no HTML file in the URL means
    • that the server is using a router
    • or, that the file index.html (or index.php...) is loaded
    • ex: for DuckDuckGo, https://duckduckgo.com is the same as https://duckduckgo.com/index.html.
An HTML file is made a tags (ex: title, meta, ...) that have attributes (properties such as lang="fr" etc.).
<!doctype html>
<html lang="fr">
<head>
    <title>title of your website</title>
    <!-- UTF-8 -->
    <meta charset="utf-8">
    <!-- RESPONSIVE (responsive CSS) -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <!-- your code below -->
    <h1>A big title here</h1>
    <p>Some text here</p>
    <!-- image -->
    <img src="https://cdn.jsdelivr.net/gh/memorize-code/memorize-references/.assets/icons/icon64.png" alt="an image">
    <!-- link -->
    <a href="https://memorize.be/" target="_blank" rel="noopener">Link to memorize.be</a>
</body>
</html>
How do I "run" HTML code?

Create a file index.html (ex: with the content above), drag and drop it inside a browser, and you should see your page. You don't need a server as your code is fully in HTML (no PHP). You can change the name of the file, but the main file of your website must be called index. Your browser isn't "executing" code, it's simply rendering the code it received (the URL is a sort of file://path/to/a/file.html, and as we learned before, if there is no file in the URL, and you got an index.html, then it's loaded instead).

You can also try an online editor such as this one. If you want something cleaner (using a server, http/https instead of file), then refer to the PHP course (this isn't complicated).


Tags

The main idea when writing HTML is that you are going to write some tags, such as p for a paragraph or a for a link. Then you can add some attributes, such as href for a link that is the URL the link will be pointing to.

You will have two types of tags, tags like <img ...> called auto-closing tags because you don't write <img></img>, as you would with others such as <a ...>this is a link</a>.

You may also note that tags such as p are called blocking tags, because unless you use CSS, the tags after p will be rendered starting from a newline. To be accurate, "p", "div", etc. are block-level elements while "a", "span", etc. are called inline elements. A block element is usually storing a bunch of inline elements. I'm usually calling those "containers".

Notes

  • the name of a tag can be in lowercase or in uppercase (ex: "a" or "A" are working), use lowercase ๐Ÿ˜Ž
  • you can write attribute=value (without ", but that may not work every time according to the value, do not use this ๐Ÿ˜Ÿ)
  • you can write attribute='value' (instead of ", do not use this ๐Ÿ˜Ÿ)
  • you may write <img ...></img> or <img ... /> (without the /), but we are usually writing <img ...> for auto-closable tags.
  • you do not need to indent your code, but it makes things cleaner ๐Ÿ™‚
  • you do not need to put one tag per line, but it makes things cleaner ๐Ÿ™‚
  • so tags are optional (such as
  • or , but you shouldn't omit/forget them)

When I'm saying "do not use/do this", I mean that developers are usually not using this, and if you do, then you should make sure to not mix things (do not mix ' and ") as this is what bad developers do. Pick one, and be consistent until the end.


HTML5

The usual way to structure a website is the following [...]

The first line is <!doctype html> (or DOCTYPE), and the code is inside a tag called html <html lang="en"> ... </html>. To make things cleaner, we are splitting the content of "html" into

  • head (metadata): we are defining here the properties of your website such as the title, the icon, linking the CSS, etc.
  • body (content): this is the real content of your website
We need to improve the structure of the body. Since HTML5, you can use [...]
  • header: the top of your website, it may contain the navbar, you can put one in each aside/section
  • nav: for your navbar
  • section: a section of your website (you can have many of them)
  • aside: some content aside from your main content in your section (ex: your contact information etc.)
  • footer: the footer of your website
These two are less well-know, but you should learn them too [...]
  • main: the main content of your page (one per page)
  • article: a part of the website that may be extracted from the website (you may split a page into multiples articles with a header, a footer, and some sections)
  • address: to wrap your contact information

I used dropdowns to make this section more readable. To summarize

  • the first line is doctype, followed by a html
  • split the html into head/body
  • split the body into section(s)/aside(s)/header/nav/footer
  • wrap sub-sections into section, articles into article, the main content into main
  • you may add header/footer to sections/articles/main
Example (image)

html5_doc_sections

Example (code)
<!doctype html>
<html lang="fr">
<head>
    <title>title of your website</title>
    <!-- UTF-8 -->
    <meta charset="utf-8">
    <!-- RESPONSIVE (CSS) -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <main>
        <header>
          Some title
            <nav>... some tags ...</nav>
        </header>
        <section><h2>Some title</h2>... some tags ...</section>
        <section><h2>Some title</h2>... some tags ...</section>
        <footer>... some tags ...</footer>
    </main>
    <aside>... some tags ...</aside>
</body>
</html>

Learn the tags

These are the tags that I'm using the most, and the tags that you must know, with their attributes.

Tag For what? Attributes Code Preview
TITLES
h1 title of your page,
one per page
<h1>title</h1>
title
h2 big title <h2>title</h2>
title
h3 to h5 ... ... ...
h6 small title <h6>title</h6>
title
TEXT
p a paragraph <p>some text</p>

some text

span break a paragraph into parts (for styling)
non-blocking p
<span>some text</span> some text
a comment <!-- a comment here --> you can't see it ๐Ÿ˜…
IMAGES AND LINKS
a a link
  • href (required): page opened by the link,
    • you may use relative path (such as file.html)
    • you may use "#" (go to top)
    • you may use "#id" (go to id="id")
    • you may use "mailto:email" for an email
  • target="_blank": open in a new tab
  • rel="noopener": prevent a security breach with target blank

<a href="URL">some link</a>

<a href="URL" target="_blank"
rel="noopener">some link</a>
some link

some link
img an image
  • src (required): link (URL/path) to the image
  • alt (required): alternative text if the image is not found
  • title: text shown when hovering
  • width, height (recommended)
<img src="URL" alt="alternative text" title="some title">

<img src="URL" alt="alternative text"
width="48" height="48">
alternative text

alternative text

Learn the tag: div

The tags main, header, footer, section, etc. introduced in HTML5 are simply named divs. A div is a container, allowing you to group tags. This makes the code more readable, and later, it may help if you want to apply a style to a group of components.

Note that a div is "invisible", meaning that the user won't see any difference between the code with or without a div.

<div>
    <h3>a title here</h3>
    <p>
      We got a paragraph that is a bit longer than usual (๐Ÿคจ)
      with one <span>span</span> inside.
    </p>
</div>

Learn the tags: style

You may want to style your website, but you don't want/know CSS. This is a list of HTML tags that you may use.

Tag For what? Attributes Code Preview
b bold <p>This <b>is in bold</b></p> This is in bold.
u Underline <p>This <u>is underlined</u></p> This is underlined.
s Strikethrough <p>This <s>is crossed out</s></p> This is crossed out
i Italic <p>This <i>is in italic</i></p> This is in italic
em Emphasis <p>This text has <em>emphasis</em></p> This text has emphasis
br Force a newline <span>This is</span><br><span>on 2 lines</span> This is
on 2 lines
sr Horizontal separator <hr>
Rarely used tags
small smaller text This is <small>small</small> This is small
mark marked text
(=yellow background)
This is <mark>marked</mark> This is marked
kbd keyboard keys This is a <kbd>key</kbd> This is a key
sup superscript This is a <sup>superscript</sup> This is a superscript
sub subscript This is a <sub>subscript</sub> This is a subscript
var for a variable This is a <var>variable</var> This is a variable
samp for the output of a program This is a <samp>sample output</samp> This is a sample output
abbr show title when hovered <abbr title="some text here">word</abbr> word
cite referencing a work This is a <cite>reference</cite> This is a reference
blockquote Quoting something You may add cite="URL/to/source". <blockquote>quote</blockquote>
quote

You got even more tags that I never used such as strong (rendered as bold), del (rendered like s), q (short quote), etc. You can learn more about them (and add them here if you want) in the HTML reference.


Learn the tags: advanced

You will use these tags a lot too, but they are a little more complex than the previous ones.

And, you may want to learn about


Global attributes

This may be something that you won't need to know, at least until you aren't writing CSS/JavaScript. You can use these attributes on any tag

  • id="value": give an ID to a tag, the value mustn't be used twice on a page
  • class="a" or class="a b c ...": give classes to a tag
  • hidden: hide a component
  • style="some CSS": inline style
  • you got inline JavaScript too (onclick, onload, ...)
  • contenteditable="true" spellcheck="true": you can click and edit some HTML, as long as the HTML got these attributes

You got the list of Global Attributes on W3Schools with some examples.


Forms

Forms aren't something that you can use without a server, but at least since they are rendered using HTML, then you can show one on your website. I haven't tested, but you may be able to use formspree to handle your forms (without PHP).

Basically, you will enter data into fields (such as a name in a textField). You will give a name to each field, so that when the form is submitted, the server knows what this value is supposed to be. You will add a label to each field, so that the user knows what value the field is supposed to take.

Example (code)
<form method="POST">
    <!-- input name -->
    <div>
      <label for="name">Name</label>
      <input id="name" name="name" type="text" placeholder="John Doe" value="">
    </div>
    <!-- submit -->
    <button type="submit">submit</button>
</form>
Example (preview)
Example (explanation)

First, if you don't know what is POST (or GET), then you MUST read the section about the HTTP protocol in the Web course.

Then, we are usually making one div per field. Each div is made of

  • a label, with an attribute "for" referring to the ID of a field
    • clicking on the label will focus the field
    • the message inside the label is something describing the field
  • a field, it can be an input, a textarea, a select, etc.
    • the ID must match the one on the label
    • you must add a name for the server to know what's this value
    • the value is what will be sent to the server

Finally, you add either a button submit (to send the form) and/or a button reset to reset the form.


Features of HTML5, 5.1, and 5.2

Notes and tags introduced in HTML 5 (and 5.1/5.2), that I haven't added before, as I didn't use them.

Description Code Preview
Adding a caption to an image. <figure>
<img src="URL" alt="Memorize logo" title="Memorize logo"
width="64" height="64">
<figcaption>Memorize logo</figcaption>
</figure>
Memorize logo
Memorize logo
Adding a dropdown. <details>
<summary>Some summary</summary>
Some content
</details>
Some summary Some content
Wrap a date/moment inside time. <time datetime="FOR_A_COMPUTER">FOR_YOUR_USER</time>
<time datetime="2020-12-06">December 6</time>
<time datetime="2020-12-06T00:00:00">December 6</time>

See MDN documentation.


Audio <audio src="URL" controls></audio>
Video <video src="URL" controls></video>
You can add inside video, the tag track to add subtitles.
If you got multiples sources/format, then you may use the tag source instead of "src".

My notes

  • HTML5.1: you can add option inside the browser content-menu (menu type="context")
  • HTML5.1: srcset for images allows us to give a batch of images for some resolutions. sizes allows us to resize the image according to the size of the screen.
  • HTML5.1: new tag picture, to show different pictures according to the resolution
  • HTML5.1: the rev attribute for links. You can give it "prev" or "next" if there is a relation previous page/next page with the current page
  • HTML5.2: new tag dialog, not supported everywhere, see MDN doc and can i use.
  • HTML5.2: multiples main are allowed, but only when can be visible (use hidden)

Support of HTML 5.1. Support of HTML 5.2. As for HTML 5.3 (in progress).


Notes

<!-- 
 Force a space, or write a character using UTF8 codes
 Note that you will rarely (never?) need that
 -->
&nbsp; (space) &#244; (รด) &#224; (ร ) &lt; (<) &gt; (>)

<!-- refresh in 5 seconds -->
<meta http-equiv="refresh" content="5">
<!-- HTML redirect -->
<meta http-equiv="refresh" content="0; url=URL">

External resources

Guidelines

CheatSheet


Sources

Templates/Tools/?