Nuggets of Knowledge Series: Revisiting HTML (Part I) 
Tags: beginners, html, webdev, javascript
Published: 2020-06-30 23:41:31

Following up on my [last post](https://dev.to/abby/starting-like-a-newbie-again-2lla) about starting like a newbie again, I wanted to begin the rediscovery adventure with the [HTML Essential Training](https://www.linkedin.com/learning/html-essential-training-4?pathUrn=urn%3Ali%3AlyndaLearningPath%3A56d7a7053dd559b764b88a92&u=104) course by [Jen Simmons](https://twitter.com/jensimmons). 

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](https://www.w3.org/TR/WCAG20-TECHS/H42.html) 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: 

![alt text][dom_tree]

[dom_tree]: https://user-images.githubusercontent.com/12129852/86134318-77358880-bab7-11ea-9bea-51cd74770f1d.png "Dom Tree Example Image"


* 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](https://www.w3schools.com/jsref/dom_obj_all.asp). 

##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: 
![alt text][attribute_example]

[attribute_example]: https://user-images.githubusercontent.com/12129852/86134276-6ab13000-bab7-11ea-9f3e-a04a9e726bfa.png "Attributes 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](https://www.w3schools.com/tags/ref_attributes.asp) 


##**Bold** and <i>Italics</i>

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 <em>really</em> craving tacos” (uses `<em>`)

And 

“One of my favorite books is <i>The Brief Wondrous Life of Oscar Wao</i> 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](https://www.afb.org/blindness-and-low-vision/using-technology/assistive-technology-products/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] (https://www.youtube.com/watch?v=g9Qff0b-lHk). 


Read more about accessibility [here](https://www.w3.org/standards/webdesign/accessibility). 

##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:

![alt text][Gauss_law_code]

[Gauss_law_code]: https://user-images.githubusercontent.com/12129852/86137419-435c6200-babb-11ea-8b7d-04c620de540a.png "Gauss law code"

This is the output of the for the code above:

![alt text][Gauss_law_equation]

[Gauss_law_equation]: https://user-images.githubusercontent.com/12129852/86186921-6c571400-bb08-11ea-8b1c-92b320544845.png "Gauss law equation"

Pretty cool!

Play around with [MathML](https://www.tutorialspoint.com/mathml/index.htm) when you get a chance! 

##Debugging HTML

Oh no! Your code is messing up, there's a [bug](https://interestingengineering.com/the-origin-of-the-term-computer-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


![alt text][inspector_elements_tab]

[inspector_elements_tab]:https://user-images.githubusercontent.com/12129852/86080013-e3849d80-ba5f-11ea-95f4-bed8e395e8f8.png "Inspector Element Tab Picture"

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](https://blog.pragmatists.com/how-to-debug-front-end-elements-d97da4cbc3ea) by Michał Witkowski. It dives much deeper! I might write another post just on this down the line! 

##What to expect in the next post? 
More code samples and a deep dive into links, images, media and more! 

See you then! 

####Resources to check out: 
[HTML Living Standard](https://html.spec.whatwg.org/dev/)
[MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML)