[TIL] 20201106 HTML: Next Steps & Semantics

<HTML5>

The latest evolution of the standard that defines HTML. It includes new elements & features for browsers to implement.
- A new version o fthe language HTML, with new elements, attributes, and behaviors.
- A larger set of technologies that allows the building of more diverse and powerful websites and applications.
Living Standard : The HTML standard is a document that describes how HTML should work.
Role of the browsers : The standard describes the rules of HTML, but browsers actually hav eto do the work and implement HTML according to those rules.
<!DOCTYPE html>
- It tells the browser what to expect. But it works fine without it.
- Even if the developer specifies that they'll use HTML4, if the webpage has HTML5 element, the browser will automatically recognize it anyway.

Block level element
- Takes up a whole "block" of space
- ex) heading elements, paragraph <p>
Inline element
- Fits alongside other elements
- ex) anchor tag <a>
<div>
- The content division element
- The generic container for flow content. It groups elements together.
- It has no effect on the content or layout until styled using CSS
- Block level element
- A way to group content together to treat it similarly or to do something with it.
<span>
- A generic inline container for phrasing content, which does not inherently represent anything.
- Used to group elements for styling purposes, or because they share attribute values.
- Very much like <div>, but inline element
- ex) In an recipe, wrap all the ingredients with <span> individually and style them with CSS all at once.

<hr>
- THe thematic break (Horizontal Rule) element
- Represents a thematic break between paragraph-level elements
- Doesn't have a closing tag
- In the webpage, it looks like this :
<br>
- The line break element
- Doesn't have a closing tag
- Useful for poems
<sup>
- The superscript element
- Specifies inline text which is to be displayed as superscript for solely typographical reasons
- Superscript : text rthat is elevated of fof the baseline
- ex) a² + b² = c²
<sub>
- The subscript element
- Specifies inline text which should be displayed as subscript for solely typographical reasons
- ex) C₈H₁₀N₄O₂

HTML Entity Code
- Special codes or special sequences that can be used instead of HTML that will resultin different characters
- Starts with an ampersand(&) and end with a semicolon(;)
- Used to display reserved characters, that normally would be invalid.
- Also used in place of difficult-to-type characters
- THe browser interprets them and renders the correct character instead.
Reserved Characters
- They are "reserved" for specific occasions.
- < : < or <
- > : > or >
- & : &

Search Engines will consider its contents as important keywords to influence the page's search rankings
Screen Readers can use it as a signpost to help visually impaired users navigate a page
Finding blocks of meaningful code is significantly easier than searching through endless <div>s with or without semantic or namespaced classes
Suggests to the developer the type of data that will be populated
Semantic naming mirrors proper custom element/component naming

<main>
- represents the dominent content of the <body> of a document
- shouldn't include repeated contents such as sidebars, navigation links, copyright information, site logos, and search forms (unless the search form is the main function of the page)
<nav>
- The navigation section element
- represents a section o fa page whose purpose is to provide navigation links, either within the current document or to other documents
- ex) menus, tables of contents, indexes, etc.
<section>
- The generic section element
- represent sa standalone section of content
<article>
- The article contents element
- represents a self-contained composition ina document, page, application, or site, which is intended to be independently distributable or reusable
- There can be subarticles within an article
- There should be a heading
- ex) forum post, magazine, newspaper article, blog entry
<aside>
- represents a portion of a document whose content is onlyu indirectly related to the document's main content
- frequently presented as sidebars or call-out bars
- (Not essential)
<header>
- represents introductory content
- often includes navigational content
<footer>
- represents a footer for its nearest sectioning content or sectioning root element.
- Other elements can contain header & footer (ex) <article> containing <footer>)
<time>
- represents a specific period in time
- call the text out as time in a machine readable format
- inline element

<time datetime="2020-11-06">November 6th</time>

<figure>
- represents self-contained content, potentially witha n optional caption, which is specified using the <figcaption> element

<figure>
	<img src=" "
    	 alt="elephant">
    <figcaption> An elephant</figcaption>
</figure>

Cheat Sheet

Download cheat sheet as printable PDF A5

docs.emmet.io

* This post is a summary of Udemy Course "The Web Developer Bootcamp" by Colt Steele.