Abby

Posted on Jun 30, 2020

Nuggets of Knowledge Series: Revisiting HTML (Part I)

#beginners #html #webdev #javascript

Following up on my last post about starting like a newbie again, I wanted to begin the rediscovery adventure with the HTML Essential Training course by Jen Simmons.

Let’s dig right into it!

Oh sturdy, HTML, our resilient, human-readable, and forgiving friend. How I’ve missed going into depth with you!

HTML is the foundation of everything web… without it, it would be like the human body without a skeleton. It defines the meaning and structure of web content; the markup language for documents designed to be displayed in the web browser. A markup that provides meaning between the human and the computer

I want to divide this blog post into the stand out sections from the course, with a little more information on the topics and extra links for your in-depth pleasure!

Formatting HTML elements:

Tags:
- all html markup is surrounded by carets like: “<” and “>”
- Example: <p>,</p>, <video>, or </video>;
Elements:
- contains a starting tag, content and closing tag
- " <p> You are very smart. </p> "
Sometimes the words 'tags' and 'elements' are used interchangeably, but I like to be super specific.
The hard part comes when you are trying to figure out what to use when
- You ask yourself… should I use <h2> or <h4> here?
- To answer that question, head over to Using h1-h6 to identify headings for more insight.

DOM Tree

When you start accumulating all of these tags... you start creating a family tree! Congrats!!!

Well... it's really a Document Object Model (DOM) tree, which can look like this:

Each branch of the tree is a node and each node is an object. This means you can do ALOT of things with them, including adding DOM methods.
DOM methods are actions you can perform on HTML elements, you'll be able to modify the structure, style, or alter the content of the documents.
Some examples are:
- focus() - which gives focus to an element
- getElementsByClassName() - which will return a collection of child elements with that specific class name
- replaceChild() - replaces a child node in the element

*Check out the list of the many properties and methods that can be used on all HTML elements here.

HTML Attributes

Tags are cool, but what if you wanted to enhanced them?

Hello Attributes! Attributes provide HTML elements with more information and usually comes in name/value pairs like: name="value".

An attribute is just an additional value that configures the elements or adjusts it's behavior.

Let's take a look!

Here's an example:

What attributes do you see there?

I see...."charset", "href", "rel", "type", "class" and "src"

Want to get to know more attributes? You got it: HTML Attribute Reference Sheet

Bold and Italics

This honestly seemed like a simple enough concept, but I wanted to emphasize the differences between <em> ( emphasis) versus <i>(italics). They both visually make their words italicized, but are perceived very differently.

There is a big difference between:

“I am really craving tacos” (uses <em>)

And

“One of my favorite books is The Brief Wondrous Life of Oscar Wao by Junot Diaz.” (uses <i>)

Think about it as a word that is being emphasized versus a word that is used as a title for something.

This is incredibly important because of screen readers and how they interpret the text on the page.

Apply the same kind of thinking to <bold> and <strong>.

By saying the word as you intended it to be understood, you would be giving the user on the other end of the screen reader a much better experience.

ARIA roles and ARIA labels

Speaking of user experience...it's so important that everyone can read your website. It's an absolute human right for all types of people to be able to access your webpage.

Let's talk about ARIA aka Accessible Rich Internet. ARIA is a set of attributes that modify the way those elements are translated in the accessibility tree.

<button aria-label="screen reader only label"></button>

<div aria-live="polite"> <span>GOOG: $400</span> </div>

<div role="alert"> Please upgrade your computer! </div>

As a developer, you have to take into account that sometimes what you see is not what is read by a screenreader, so take some extra time for this.

For a glorious deep dive into how ARIA roles can work, take a look at the Google Chrome Developers A11ycasts series.

Superscripts, subscripts, and small text

Sometimes <sub> and <sup> aren't enough to show your mathematical examples.

I was reintroduced to MathML, a mathematical markup language used to add mathematical and scientific content on the web.

Here's an example:

This is the output of the for the code above:

Pretty cool!

Play around with MathML when you get a chance!

Debugging HTML

Oh no! Your code is messing up, there's a bug, go get it!!

No need to worry! DEBUGGER IS HERE!!!!!

If you use Chrome like I do, the Elements tab in Inspector is going to be your best friend!

How to get into the Elements Tab?
- Click on the right mouse button --> Inspect --> Elements Tab

There are so many things you can do within the inspector to debug your HTML.

Want to learn more? Of course you do! Check out How to Debug Front-end by Michał Witkowski. It dives much deeper! I might write another post just on this down the line!