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.html is 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>
- 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
<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
- 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
<!-- 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 named main.css in the same folder as the document.
- Internal reference: directly to the
<section> in the document, identified with a id="specific_name attribute. Then refer to the document as <a href="#specific_name>
- 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 the index.html document- 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
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 unique id attribute 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
- 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 a scope="row" or scope="col"
- In the
<thead> element, scope will be col
- In the
<tbody> element, scope will be row
- if row headers are needed, then first
<th> is the html entity to create an empty column
- 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
- Avoid using
id attribute 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!