After multiple unsuccessful attempts at grokking HTML, I finally took Dave Gray’s Learn HTML tutorial for beginners It’s about 4 hours long, and gives a very good overview and a project to complete to understand the basics of HTML.
I’ve spent about 10 hours in total on this whole thing: making notes, doing the project at the end, and then looking through the areas that caused me trouble a few times. Well worth the effort, methinks – not least because I at least understand why I could not get those ioslide templates to work for me 😺
Hyper Text Markup Language
The Standard markup language for documents designed to be displayed in a web browser. Assisted by Cascading Style Sheets and scripting languages like JavaScript
Installation of tools
- VS Code as code editor
- Plugins: Live Server, Prettier, vscode-icons, github (dark) theme
- Some Chrome extensions (I didn’t use this)
- My own GIthub & Git configuration
- HTML validation service from W3C.
Text Basics
index.htmlis always the first page to build.- ⚠ Every
<element>that shows up needs a corresponding</element>close-tag element - Anatomy of a
<html>document<head><title>Title shows up on the browser tab<meta>name="author"name="description"a longer description
<link rel="icon" href="html5.png" >relate to an icon, with a hypertext reference to a file or resource.<link rel="stylesheet" href="css/stylesheet.css" >relate to an icon, with a hypertext reference to a file or resource.
<body><header><main><footer>
- Keyboard shortcuts will save so much time in navigating around text in the code editor
- Elements
- Block Level elements
- Each html page should have only one
<h1>element - There can be more than one
<h2>on a page, and each<h2>can have more than one<h3>element. Headers have semantic importance <hr>is a horizontal rule with some semantic meaning attached to it<br>is a line break<p>paragraph<nav>navigation area- attribute
<aria-label="">I don’t know what this does tbh
- attribute
<section><article><img><figure>a better way of doing images<img>as above<figcaption>includes a caption under the image- gives a bit of padding / indentation to this section
<aside>renders as a toggle button, and requires some more details. A semantic element<details>A headline question, for example<summary>A bit more detail (this messes with my head)
<time datetime="08:00">8 am</time><time datetime="PT3H">3 hours</time><mark>highlights the text
- Each html page should have only one
- inline elements
<em>italics<strong>bold<a href="">hyperlink to somewhere</a>anchor tag, hyperlinking to other html documents<abbr title="Tooltip>allows some expansion of an abbreviation using the tooltip, but isn’t an accessible to all assisted technologies.<address>allows semantic meaning to the text
- HTML entities
whitespace©copyright symbol<less than>greater than
- Block Level elements
<!-- Comment --> won’t show up on the page but can show up in the “Inspect” view on a browser.
Lists
<li> creates a list item inside one of the following tags:
<ul>Unordered lists, shows up as bullet lists<ol>Ordered lists, show up as numbered<dl>Description lists, like a table but not as pretty. NOTE: Doesn’t need a<li>item<dt>Description term<dd>Description detail
Adding Links
- not the same as the
<link>tag seen in the<head>part of the<html>document. <a href=""></a>is an anchor tag.- Links can be of three types:
- Absolute reference:
<a href="https://google.com">Open a Google Search</a>links to Google with the words “Open a Google Search” showing up with an underline. - Relative reference:
<a href="main.css"></a>links to the file namedmain.cssin the same folder as the document. - Internal reference: directly to the
<section>in the document, identified with aid="specific_nameattribute. Then refer to the document as<a href="#specific_name>
- Absolute reference:
- This tag can link to any other html document, whether in the same folder, or on the Internet. You can also link to a specific place in the same html document, and uses some special characters to identify the location.
<a href="#">Back to top</a>takes you to the top of the existing page<a href="/">Home</a>takes you to theindex.htmldocument- Special attributes in anchor tags:
<a href="favicon.png" download>HTML favicon</a>to download the file<a href="mailto:random@randommail.com">my email ID</a>to start an email<a href="tel:+19845022345">Call Us</a>works best on a mobile- the attribute
target="_blank"opens the link in a new tab
Some linking rules:
- Avoid the whole link itself
- Avoid “Links to” phrase
- Keep link text short
- No links that say “click here” 😨
✂
lorem*3 can give you three paragraphs of lorem ipsum placeholder
Adding Images
- Save images in a separate folder, usually titled
img - Block level element to include image:
<img src="img/file_name.jpg"
alt="a descriptive file, allows accesible tools"
title="shows up on hover"
width="400, width of the image"
height="200, height of the image"
loading="lazy, improves page load performance">
Providing width & height to deal with [cumulative layout shift](https://web.dev/articles/cls)
`figure` allows non-image content too:
```html
<figure>
<p>
<code><h1>Hello World!</h1;></code>
</p>
</figure>will render as
<h1>Hello World</h1>
Resources for images
- Placeholder image generators for a source of specific sized placeholder images
- Pixabay for images
- Unsplash
- Pexels
- Gratisography
- Preview on Mac & IrfanView on Windows for picture editing.
- TinyPNG to compress the images
Semantic Tags
- These elements give additional meaning rather than just a separator
- Very useful for assistive technology
- Allows quick scan of the content on the page
<hr>as a separator of topics- See Anatomy of a html – Header, Main, Footer within the
<main>section of the page as a ‘collection’ <section>can be called<article>with a specific uniqueidattribute to identify it. The difference between these two is not entirely clear: a thumb rule might be to consider an article as a self-containing blob of text, while<section>is merely carving off a small part of the document.<aside>,<time>are examples of semantic tags. See
[!Caution]+
Avoid<div>and<span>; instead use semantic elements
Handy Tool: Chrome extension called HTML5 Outliner to see how the document shows up for assistive technologies. Remember that not everyone uses a mouse to browse the internet.
Tables
This caused me some trouble. I don’t understand this whole syntax just yet.
-
- Structured tabular data, don’t ever use this for the whole html document!
- They need a little css to make them reasonably legible 😺
- Use semantics extensively here to make sense!
- Elements to work with:
- Table
<table>: defines the table<caption>: creates a centred caption for the table<tr>: create a row to hold the data- Use attribute
colspan="n"to define how the text flows between columns - Use attribute
rowspan="n"to define how the text flows between rows
- Use attribute
- Data headings
<thead>: creates a header section for the table.`<tr>: create a row to insert the data, whether heading or content<th>: creates the headers, with ascope="row"orscope="col"- In the
<thead>element,scopewill becol - In the
<tbody>element,scopewill berow - if row headers are needed, then first
<th>is the html entity to create an empty column
- In the
- Body
<tbody>: creates the body of the table<tr>: create a row to insert the data<th scope="row">: with value of the first column data<td>: create the data in the column. Include the semantic element (for example<time>inside this element)
- Footer
<tfoot>
- Table
- Avoid using
idattribute with tables. Very quickly becomes a PITA.
Forms and inputs
This was the most annoying, and least interesting. I might go back to this someday… or more likely, never!