Learning HTML

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>
      • <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
      • <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
      • &nbsp; whitespace
      • &copy; copyright symbol
      • &lt; less than
      • &gt; 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:

  1. Avoid the whole link itself
  2. Avoid “Links to” phrase
  3. Keep link text short
  4. 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>&lt;h1&gt;Hello World!&lt;/h1;&gt;</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 &nbsp;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
        • <tfoot>
    • 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!