HTML INTRODUCTION

What is HTML?

HTML stands for Hypertext Markup Language.

It is the standard markup language for creating content and structure of a webpage.

General Syntax


Basic HTML Elements

<myElement>myContent</myElement>

HTML consists of a series of elements which tell the browser how to display the content.

An HTML element is defined by an open tag (<myElement>), followed by some contents (myContent) and a closed-tag (</myElement>).

For myContent, it could be a text or another HTML element nested in it.

HTML tag names are case-insensitive, it is a widely accepted convention and best practice to write them in lowercase.

Example; <h1>Hello World!</h1>, <p>Lorem Ipsum</p>, <div>myContent</div>, etc.


Void Elements

<myElement>

Void elements cannot have any content and only have a start tag.

Example; <img>, <hr>, <br>, etc.


Attribute

<myElement myAttribute="myValue">myContent</myElement>

An attribute is a value for an HTML element to adjust the behavior for the element.

It is placed inside the opening tag of an HTML element.

The myValue can be a string or a number, depending on the attribute used for the specific element.



HTML Boilerplate

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Browser Tab -->
<title>MyProjectName</title>
<link rel="icon" type="image/x-icon" href="MyLogo"

<!-- Metadata -->
<meta name="author" content="MyName">
<meta name="description" content="MyDescription">
<meta name="keywords" content="Keyword1, Keyword2, ...">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel="stylesheet" href="MyFile">
</head>

<!-- Open Graph Protocol -->
<meta property="og:title" content="MyTitle">
<meta property="og:type" content="website">
<meta property="og:image" content="MyLogo">
<meta property="og:url" content="MyPageURL">

<body>
<header></header>
<main></main>
<footer></footer>
</body>
</html>

HTML Boilerplate is a ready-made template for the webpages.

A boilerplate includes the basic structure and essential elements every HTML document needs.

It saves developer time and helps ensure the pages are set up properly.

Nesting & Indentation

Nesting is placing elements inside another element.

Indentation is nested elements that placed two spaces further to the right of the element they are nested in.

It is used to make HTML easier to read.

The Important of HTML Boilerplate

It ensures the pages are structured correctly and work well across different browsers.

Using a boilerplate helps developers avoid common mistakes and follow best practices.

It's a great starting point for any web project.

Plus, they can customize their own boilerplate to fit their needs.

As developer gain experience, they might add their own preferred elements or meta tags.

ACCESSIBILITY AND SEO

ACCESSIBILITY

Accessibility is making websites that everyone can understand and interact with, including people with visual, auditory, motor, and cognitive disabilities.

The following are group of people that has disabilities; Blindness, Low vision, Color blindness, Deafness, Difficulty using keyboards, mice, or touchscreens, Attention disorders, Memory issues, Difficulty speaking or understanding spoken language and Sensitivity to flashing lights.

SEARCH ENGINE OPTIMIZATION (SEO)

SEO is a practice that optimizes web pages so they become more visible and rank higher on search engines.

Meta element is a great example to improve the site's SEO.

<meta name="description" content="MyDescription">

By setting the name="description", it ensures that browsers, search engines, and other web tools correctly interpret this metadata.

The content="MyDescription" is where developer will place their description.

It is recommended that the descriptions are short and concise.

This is because search engines will often truncate the description based on the results page layout.

The page description can be found in the search engine results page snippet.

Open Graph Tag

Open Graph Protocol enables developer to control how their website's content appears across various social media platforms.

When the content is shared on social media, well-crafted OG properties can enhance the appearance for their content in users' feeds.

This can lead to higher click-through rates which could signal to search engines that the content is relevant and engaging.


Title

<meta property="og:title" content="MyTitle">

This is where developer will write the title they want to be displayed for social media sites.


Type

<meta property="og:type" content="website">

This is used to represent the type of content being shared on social media.

Other examples could be articles, websites, videos, music.


Image

<meta property="og:image" content="MyLogo">

This open graph image is pointing to the image developer placed.

All of these images should be high quality with good dimensions and ratios.

Most social media platforms will include criteria for image requirements to help developer ensure that their content displays well on their site.

Use images that are at least 1200 by 630 pixels for the best display on high resolution devices.

At the minimum, developer should use images that are 600 by 315 pixels to display link page posts with larger images.


URL

<meta property="og:url" content="MyPageURL">

This open graph url is pointing to the URL of the page.


There are many more OG properties that developer can set, like description, audio, video, locale.

WEB CONTENT ACCESSIBILITY GUIDELINES (WCAG)

World Wide Web Consortium (W3C) developed a set of international standards that developer can follow to make their websites more accessible and easier to use for people with disabilities.

These guidelines are designed with four core principles, known as POUR.

[P] Perceivable

Users must be able to perceive the information that developer are presenting.

For example, developer can provide alternative text for images, so users who access the website with a screen reader can understand them.

<img alt="MyAlternativeText">.

[O] Operable

Users must be able to interact with the user interface.

For example, developer can make sure that all functionality is accessible through the keyboard too, not just the mouse.

[U] Understandable

Users must be able to understand the information.

For example, developer can avoid complex sentences and use simple language as much as possible.

[R] Robust

A wide range of browsers and other tools, including assistive technologies, must be able to interpret the content.

SEMANTIC HTML

It describes the content of the elements, so it's much easier to read, understand, and maintain.

Search engines can easily understand the website when developer use semantic HTML.

It's also helpful for accessibility purposes, because screen readers need semantic information to describe what's on the web page.

For example, the semantic meaning of a p element, is a paragraph of text.

The div element is one of the very few that does not represent semantic HTML.

Benefits

Using proper semantic HTML will improve accessibility and ensure the best experience for users with assistive technology like screen readers.

It can also improves SEO.

Improve development experience.

STRUCTURAL HIERARCHY

The most important aspect of creating a structural hierarchy is the proper use of heading elements.

Heading elements are numbered as h1, h2, h3, and so on.

These numbers represent the heading level for that element.

Best practices

Ensure to use correct order in heading levels and never skip the level.

Each page should have a single h1 element representing the main topic or title.

The h2 element is a sub-heading and should be come after h1 (it can have multiple h2 per page).

Use headings in a hierarchy that reflects clear organization.

Don't skip from h1 to h3, or from h2 to h4, and so on.

Use clear and descriptive text that summarizes the content that follows each heading.

Don't use a heading in isolation - some content must follow the heading.

Use appropriate headings where necessary instead of formatting text to look like headings.

Benefits

Using the right hierarchy is important for accessibility.

Assistive technologies, like screen readers, rely on the structure of a web page to determine how to parse and announce that web page to the user.

Proper structure is also important for SEO.

Search engines use automation to parse the content of the web page and determine when and where it should show up in results.

If the structure is malformed, search engines may not be able to rank very well in the relevant search results.

Depending on how incorrect the structure is, the HTML may not even be technically valid.

When this happens, the web browser has to effectively guess what the developer meant to do.

And what it guesses might not even be what the developer want at all.

WEB ACCESSIBILITY INITIATIVE - ACCESSIBILE RICH INTERNET APPLICATIONS (WAI-ARIA)

It's a specification that enhances accessibility for dynamic content and UI (User Interface) components.

Note that WCAG and WAI-ARIA are not the same.

WCAG provides general guidelines for web accessibility, while WAI-ARIA offers specific rules for making dynamic and interactive content accessible for users of assistive technologies.

So, the primary purpose of WAI-ARIA is to improve accessibility for dynamic content and UI components that do not have native HTML equivalents.

WAI-ARIA works by introducing a set of attributes developer can add to HTML elements to provide additional semantic information.

These attributes are categorized into roles, states, and properties.

role Attribute

ARIA roles specify the semantic meaning of HTML elements.

They're essential for making web content accessible to people who use assistive technologies, like screen readers.

HTML has semantic and non-semantic elements, based on whether they convey meaning about their content.

Many semantic HTML elements already have an ARIA role assigned by default.

For example, the button element has a default ARIA role of button.

But non-semantic elements don't have a role.

For example, screen readers will not know how to interpret the purpose of a div if developer don't specify its role explicitly.

Example; <div>Click Me</div>

To specify the ARIA role of an element, add the role attribute where value is the name of a role in the ARIA specification.

Example; <div role="button">Click Me</div>

By putting role="button" in an element, developer is indicating to assistive technology that the element is a button.

Roles do not provide any functionality however.

Merely giving this div a role of button will not make it act like a button.

To make it look and behave like a button developer would need to use CSS and JavaScript to get the desired result.


Document Structure Roles

Document structure roles define the overall structure of the web page.

With these roles, assistive technologies can understand the relationships between different sections and help users navigate the content.

Examples; toolbar, tooltip, feed, math, presentation, none, note.

However, most of the document structure roles are not used in modern web development because browsers already support equivalent semantic HTML elements, which should be prioritized whenever possible.

Example; <div role="math" aria-label="x squared + y squared = 3"> x<sup>2</sup> + y<sup>2</sup> = 3 </div>

The aria-label attribute is used to represent the expression.


Widget Roles

Widget roles define the purpose and functionality of interactive elements, like scrollbars.

Example; scrollbar, searchbox, separator (when focusable), slider, spinbutton, switch, tab, tabpanel, treeitem.


Landmark Roles

Landmark roles classify and label the primary sections of a web page.

Screen readers use them to provide convenient navigation to important sections of a page.

Example; banner, complementary, contentinfo, form, main, navigation, region, search.

Each of these roles has a corresponding HTML equivalent, such as header, footer, aside, form, main, nav, section, and search.


Live Region Roles

Live region roles define elements with content that will change dynamically.

This way, screen readers and other assistive technologies can announce changes to users with visual disabilities.

Example; alert, log, marquee, status, timer.


Window Roles

Window roles define sub-windows, like pop up modal dialogues.

Example; alertdialog, dialog.

It is a best practice to use the HTML dialog element and its associated JavaScript methods instead of manually creating a dialog


Abstract Roles

Abstract roles help organize the document.

They're only meant to be used internally by the browser, not by developers, so you should know that they exist but you shouldn't use them on your websites or web applications.

aria-labelledby Property

The aria-labelledby property lets an element connect to a specific label.

<h2 id="header-id">About Me</h2>
<button id="button-id" aria-labelledby="header-id button-id">Learn More</button>

This will make the elements understandable and navigable for users of assistive technologies.

To get the best out of WAI-ARIA, try to stick with native HTML whenever possible since it generally provides more accessibility out of the box.


aria-label vs aria-labelledby

The aria-label attribute is an invisible label for interactive elements.

It adds a text label to an element that screen readers can read.

It is especially useful for elements that do not have visible text but still need to be described by screen readers.

For input elements, the aria-label attribute provides a label directly if there isn't a visible label associated with the input.


The aria-labelledby attribute does the exact same thing as the aria-label attribute, but instead of defining the text directly in the attribute, developer use a reference to text that already exists on the page.

The existing text must have an id attribute, which will be used for the reference value in the aria-labelledby attribute.

<input type="text" aria-labelledby="search-btn">
<button type="button" id="search-btn">Search</button>

In this case, the text for the button is being used as the label for the search input.

Screen readers will announce the input as something like Search, edit.

If developer later decide they want to change the button text to Find, the label for the input will automatically be updated to the new text since it is referencing the button text.

Combining multiple id values into a single aria-labelledby attribute value is also possible.


aria-labelledby is better than aria-label

If someone is using a translation service to translate the content on the page, the text in an aria-label attribute may not always be translated.

Using aria-labelledby can also help prevent a mismatch between the visible label text and the invisible label for screen reader users since updating the visible text will automatically update the invisible label.

aria-labelledby can make it much easier to programmatically create complex invisible labels consisting of multiple sources of text.

aria-hidden Attribute

The attribute hides the element and all of its children from the accessibility tree, while keeping them visible on the page.

The attribute does not remove it from the DOM.

Basic syntax: aria-hidden="true"

Setting aria-hidden to false will not expose the element to assistive technologies if any of its parents has this attribute set to true.

Common use cases include; Icons and images that only have a decorative purpose and Duplicated content.

The attribute only hides content from assistive technology, such as screen readers.

Developer should never use aria-hidden to hide an element that is focusable with the keyboard.


Cases where aria-hidden are not necessary to be used

The HTML element already has a hidden attribute.

The element or the element's ancestor is already hidden with display: none.

The element or the element's ancestor is already hidden with visibility: hidden.

For this, the element is already removed from the DOM and thus hidden from the accessibility tree, so the aria-hidden attribute is not necessary.

aria-describedby Attribute

The attribute is used to provide additional information about an element to screen reader users by referencing existing content on the page.

It creates a programmatic association between the element and the content (technically referred to as an accessible description), which screen readers can use to inform users of the additional information when they interact with the element.

The most common use for aria-describedby is to associate instructions and error messages with form inputs.

Due to the various methods screen reader users have for navigating a page, they may miss these messages when navigating between inputs.

Using aria-describedby helps ensure that they will hear them.

LIST OF HTML TAGS

COMMENT TAG

The comment tag is used to insert comments in the source code.

Comments are not displayed in the browsers.

Developer can use comments to explain the code, which can help them when they edit the source code at a later date.

This is especially useful if developer have a lot of code.

HTML DECLARATION

All HTML documents must start with a <!DOCTYPE> declaration.

The declaration is not an HTML tag, but it is an "information" to the browser about what document type to expect.

Therefore, this <!DOCTYPE html> declaration defines that this is an HTML 5 document (latest version of HTML).

INSIGHT(S)

No case sensitivity

The <!DOCTYPE> declaration can be written either in uppercase, lowercase or mixed.

ABBREVIATION ELEMENT

The <abbr> tag defines an abbreviation or an acronym, like "HTML", "CSS", "Mr.", "Dr.", "ASAP".

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes

DEFAULT CSS SETTING(S)

abbr { display: inline; }

INSIGHT(S)

Recommended to include title attribute

This is the best way to show the description for the abbreviation/acronym.

User just simply mouse over the element and the desription will be displayed.

ADDRESS ELEMENT

The <address> tag defines the contact information for the author/owner of a document or an article.

The contact information can be an email address, URL, physical address, phone number, social media handle, etc.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes

DEFAULT CSS SETTING(S)

address { display: block; font-style: italic; }

ANCHOR ELEMENT

The <a> tag defines a hyperlink, which is used to link from one page to another.

A link's text must be placed between the opening and closing tags of an anchor element.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes
<a download="myValue">
<a href="myValue">
<a hreflang="myValue">
<a media="myValue">
<a ping="myValue">
<a referrerpolicy="myValue">
<a rel="myValue">
<a target="myValue">
<a type="myValue">

DEFAULT CSS SETTING(S)

a:link, a:visited { color: (internal value); text-decoration: underline; cursor: auto; }

a:link:active, a:visited:active { color: (internal value); }

INSIGHTS

Required to include href attribute

The href attribute indicates the link's destination for <a> tag.

If the href attribute is omitted, it is only a placeholder for a hyperlink.

Optional to include target attribute

By default, a linked page is displayed in the current browser window.

For some feature, it it beneficial when user specify another target so that the webpage is displayed on new tab without changing current webpage.

AREA ELEMENT

The <area> tag defines an area inside an image map (an image map is an image with clickable areas).

<area> elements are always nested inside a <map> tag.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes
<area alt="myValue">
<area coords="myValue">
<area download="myValue">
<area href="myValue">
<area hreflang="myValue">
<area media="myValue">
<area referrerpolicy="myValue">
<area rel="myValue">
<area shape="myValue">
<area target="myValue">
<area type="myValue">

DEFAULT CSS SETTING(S)

area { display: none; }

INSIGHT(S)

Recommended to include name attribute

Since <area> elements nested within <map>, the elements also needed <img> too.

The name attribute will be associated with the <img>'s usemap attribute and creates a relationship between the image and the map.

ARTICLE ELEMENT

The <article> tag specifies independent, self-contained content.

Potential sources for the <article> element are like forum post, blog post, news story.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes

DEFAULT CSS SETTING(S)

article { display: block; }

ASIDE ELEMENT

The <aside> tag defines some content aside from the content it is placed in.

The aside content should be indirectly related to the surrounding content.

The <aside> content is often placed as a sidebar in a document.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes

DEFAULT CSS SETTING(S)

aside { display: block; }

AUDIO ELEMENT

The <audio> tag is used to embed sound content in a document, such as music or other audio streams.

The MyText between the <audio> tags will only be displayed in browsers that do not support the audio element.

There are three supported audio formats in HTML: MP3, WAV, and OGG.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes
<audio autoplay>
<audio controls>
<audio loop>
<audio muted>
<audio preload="myValue">
<audio src="myValue">

INSIGHT(S)

Multiple <source> tags within <audio>

The <audio> tag can contains one or more <source> tags with different audio sources.

The browser will choose the first source it supports.

BOLD ELEMENT

The <b> tag specifies bold text without any extra importance.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes

DEFAULT CSS SETTING(S)

b { font-weight: bold; }

BASE ELEMENT

The <base> tag specifies the base URL and/or target for all relative URLs in a document.

Hence, the <base> tag must have either href or target attribute present, or both.

There can only be one single <base> element in a document, and it must be inside the <head> element.

RELATED ATTRIBUTE(S)

HTML Global Attributes
<base href="myValue">
<base target="myValue">

BI-DIRECTIONAL ISOLATION ELEMENT

The <bdi> tag isolates a part of text that might be formatted in a different direction from other text outside it.

This element is useful when embedding user-generated content with an unknown text direction.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes

BI-DIRECTIONAL OVERRIDE ELEMENT

The <bdo> tag is used to override the current text direction.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes

DEFAULT CSS SETTING(S)

bdo { unicode-bidi: bidi-override; }

INSIGHT(S)

Required to include dir attribute

The attribute is obviously required that specifies the text direction of the text inside the <bdo> element.

BLOCKQUOTE ELEMENT

The <blockquote> tag specifies a section that is quoted from another source.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes
<blockquote cite="myValue">

DEFAULT CSS SETTING(S)

blockquote { display: block; margin: 1em 40px; }

BODY ELEMENT

The <body> tag defines the document's body.

The <body> element contains all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.

There can only be one <body> element in an HTML document.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes

DEFAULT CSS SETTING(S)

body { display: block; margin: 8px; }

body:focus { outline: none; }

BREAK ELEMENT

The <br> tag inserts a single line break.

The <br> tag is useful for writing addresses or poems.

Use the <br> tag to enter line breaks, not to add space between paragraphs.

RELATED ATTRIBUTE(S)

HTML Global Attributes

HTML Event Attributes

BUTTON ELEMENT

The <button> tag defines a clickable button.

Inside a <button> element user can put text, or tags <i>, <b>, <strong>, <br>, <img>, etc.

That is not possible with a button created with the <input> element.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes
<button autofocus>
<button disabled>
<button form="myValue">
<button formaction="myValue">
<button formenctype="myValue">
<button formmethod="myValue">
<button formnovalidate="myValue">
<button formtarget="myValue">
<button popovertarget="myValue">
<button popovertargetaction="myValue">
<button name="myValue">
<button type="myValue">
<button value="myValue">

CANVAS ELEMENT

The <canvas> tag is used to draw graphics, on the fly, via scripting (usually JavaScript).

The <canvas> tag is transparent, and is only a container for graphics, user must use a script to actually draw the graphics.

The MyText will be displayed in browsers with JavaScript disabled and in browsers that do not support canvas.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes
<canvas height="MyValue">
<canvas width="MyValue">

DEFAULT CSS SETTING(S)

canvas { height: 150px; width: 300px; }

CAPTION ELEMENT

The <caption> tag defines a table caption.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes

DEFAULT CSS SETTING(S)

caption { display: table-caption; text-align: center; }

CITE ELEMENT

The <cite> tag defines the title of a creative work.

Example of creative works include books, poems, songs, movies, paintings, sculptures, etc.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes

DEFAULT CSS SETTING(S)

cite { font-style: italic; }

CODE ELEMENT

The <code> tag is used to define a piece of computer code.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes

DEFAULT CSS SETTING(S)

code { font-family: monospace; }

COLUMN ELEMENT

The <col> tag specifies column properties for each column within a <colgroup> element.

The <col> tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes
<col span="myValue">

DEFAULT CSS SETTING(S)

col { display: table-column; }

COLUMN GROUP ELEMENT

The <colgroup> tag specifies a group of one or more columns in a table for formatting.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes
<colgroup span="myValue">

DEFAULT CSS SETTING(S)

colgroup { display: table-column-group; }

INSIGHT(S)

The placement of the <colgroup> element

The <colgroup> tag must be a child of a <table> element, and after any <caption> elements.

The <thead>, <tbody>, <tfoot>, <tr> elements should be placed after <colgroup>.

To define different properties to a column within a <colgroup>, use the <col> tag within it.

DATA ELEMENT

The <data> tag is used to add a machine-readable translation of a given content.

This element provides both a machine-readable value for data processors, and a human-readable value for rendering in a browser.

RELATED ATTRIBUTE(S)

HTML Global Attributes
<data value="MyValue">

DATALIST ELEMENT

The <datalist> tag specifies a list of pre-defined options for an <input> element.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes

INSIGHT(S)

Some essential attributes & elements to be included

The <datalist> tag is used to provide an "autocomplete" feature for <input> elements.

Users will see a drop-down list of pre-defined options as they input data.

The <datalist> element's id attribute must be equal to the <input> element's list attribute.

DEFINITION ELEMENT

The <dfn> tag specifies a term that is going to be defined within the content.

The nearest parent of the <dfn> tag must also contain the definition/explanation for the term.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes

DEFAULT CSS SETTING(S)

dfn { font-style: italic; }

DELETE ELEMENT

The <del> tag defines text that has been deleted from a document.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes
<del cite="MyValue">
<del datetime="MyValue">

DEFAULT CSS SETTING(S)

del { text-decoration: line-through; }

DESCRIPTION DATA ELEMENT

The <dd> tag is used to describe a data in a description list.

The <dd> tag is used in conjunction with <dl> and <dt>.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes

DEFAULT CSS SETTING(S)

dd { display: block; margin-left: 40px; }

DESCRIPTION LIST ELEMENT

The <dl> tag defines a description list.

The <dl> tag is used in conjunction with <dt> and <dd>.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes

DEFAULT CSS SETTING(S)

dl { display: block; margin: 1em 0; }

DESCRIPTION TERM ELEMENT

The <dt> tag defines a term/name in a description list.

The <dt> tag is used in conjunction with <dl> and <dd>.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes

DEFAULT CSS SETTING(S)

dt { display: block; }

DETAILS ELEMENT

The <details> tag specifies additional details that the user can open and close on demand.

The <details> tag is often used to create an interactive widget that the user can open and close.

By default, the widget is closed and when open, it expands, and displays the content within.

The <summary> tag is used in conjunction with <details> to specify a visible heading for the details.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes
<details open>

DEFAULT CSS SETTING(S)

details { display: block; }

DIALOG ELEMENT

The <dialog> tag defines a dialog box or subwindow.

The <dialog> element makes it easy to create popup dialogs and modals on a web page.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes
<dialog open="MyValue">

DIVISION ELEMENT

The <div> tag defines a division in an HTML document.

The <div> tag is widely used as a container for HTML elements, which is then styled with CSS or manipulated with JavaScript.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes

DEFAULT CSS SETTING(S)

div { display: block; }

EMBED ELEMENT

The <embed> tag defines a container for an external resource, such as a web page, a picture, a media player, or a plug-in application.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes
<embed height="MyValue">
<embed src="MyValue">
<embed type="MyValue">
<embed width="MyValue">

DEFAULT CSS SETTING(S)

embed:focus { outline: none; }

EMPHASIZE ELEMENT

The <em> tag is used to define emphasized text.

A screen reader will pronounce the words in <em> with an emphasis, using verbal stress.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes

DEFAULT CSS SETTING(S)

em { font-style: italic; }

FIELDSET ELEMENT

The <fieldset> tag is used to group related elements in a form.

The <fieldset> tag draws a box around the related elements.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes
<fieldset disabled">
<fieldset form="myValue">
<fieldset name="myValue">

DEFAULT CSS SETTING(S)

fieldset { display: block; margin: 0 2px; padding: 0.35em 0.75em 0.625em; border: 2px groove (internal value); }

INSIGHT(S)

Recommended to include legend element together

The legend element is used to name the section of the fieldset.

FIGURE ELEMENT

The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.

While the content of the <figure> element is related to the main flow, its position is independent of the main flow.

It should not affect the flow of the document if removed.

The <figcaption> element is used to add a caption for the <figure> element.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes

DEFAULT CSS SETTING(S)

figure { display: block; margin: 1em 40px; }

FIGURE CAPTION ELEMENT

The <figcaption> tag defines a caption for a <figure> element.

The <figcaption> element can be placed as the first or last child of the <figure> element.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes

DEFAULT CSS SETTING(S)

figcaption { display: block; }

FORM ELEMENT

The <form> tag is used to create an HTML form for user input.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes
<form accept-charset="myValue">
<form action="myValue">
<form autocomplete="myValue">
<form enctype="myValue">
<form method="myValue">
<form name="myValue">
<form novalidate>
<form rel="myValue">
<form target="myValue">

DEFAULT CSS SETTING(S)

form { display: block; margin-top: 0em; }

HEAD ELEMENT

The <head> tag is a container for metadata, placed between the <html> tag and the <body> tag.

Metadata typically define the document title, character set, styles, scripts, and other meta information, which they are not displayed in webpage.

Hence, tags like <title>, <style>, <base>, <link>, <meta> are commonly placed here.

The <script> and <noscript> can also be placed here eventhough they are not considered the essential parts of the page structure.

RELATED ATTRIBUTE(S)

HTML Global Attributes

DEFAULT CSS SETTING(S)

head { display: none; }

HEADER ELEMENT

The <header> element represents a container for various purposes, depending on user's needed.

Mostly, it is represents introductory content, including heading elements (<h1> - <h6>) and some authorship informations.

Other than that, the element also provide a space for a set of navigational links, logo or icons.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes

DEFAULT CSS SETTING(S)

header { display: block; }

INSIGHT(S)

Usage of the header tag

User can have several <header> elements in one HTML document.

However, the element cannot be placed within a <footer>, <address> or another <header> element.

HEADING ELEMENT

The <h1> to <h6> tags are used to define HTML headings.

<h1> defines the most important heading while <h6> defines the least important heading.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes

DEFAULT CSS SETTING(S)

h1 { display: block; font-weight: bold; font-size: 2em; margin: 0.67em 0; }

h2 { display: block; font-weight: bold; font-size: 1.5em; margin: 0.83em 0; }

h3 { display: block; font-weight: bold; font-size: 1.17em; margin: 1em 0; }

h4 { display: block; font-weight: bold; font-size: 1em; margin: 1.33em 0; }

h5 { display: block; font-weight: bold; font-size: 0.83em; margin: 1.67em 0; }

h6 { display: block; font-weight: bold; font-size: 0.67em; margin: 2.33em 0; }

INSIGHTS

The usage of <h1> tag

Only use one <h1> per page, which it should represent the main heading/subject for the whole page.

Heading flow level

Do not skip heading levels, start with <h1>, then use <h2>, and so on until <h6>.

HEADING GROUP ELEMENT

The <hgroup> tag is used to surround a heading and one or more <p> elements.

The heading inside the <hgroup> element can be any of the <h1> to <h6> headings.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes

DEFAULT CSS SETTING(S)

hgroup { display: block; }

HORIZONTAL RULE ELEMENT

The <hr> tag defines a thematic break in an HTML page.

The <hr> element is most often displayed as a horizontal rule that is used to separate content in an HTML page.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes

DEFAULT CSS SETTING(S)

hr { display: block; margin: 0.5em auto; border-style: inset; border-width: 1px; }

HTML ELEMENT

The <html> tag represents the root of an HTML document.

The <html> tag is the container for all other HTML elements except for the <!DOCTYPE> declaration.

RELATED ATTRIBUTE(S)

HTML Global Attributes
<html xmlns="myValue">

DEFAULT CSS SETTING(S)

html { display: block; }

html:focus { outline: none; }

INSIGHT(S)

Recommended to include lang attribute

Always include the lang attribute inside the <html> tag, to declare the language of the webpage.

This is meant to assist search engines and browsers.

IMAGE ELEMENT

The <img> tag is used to embed an image in an HTML page.

Images are not technically inserted into a web page, images are linked to web pages.

The <img> tag creates a holding space for the referenced image.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes
<img alt="myValue">
<img crossorigin="myValue">
<img height="myValue">
<img ismap>
<img loading="myValue">
<img longdesc="myValue">
<img referrerpolicy="myValue">
<img sizes="myValue">
<img src="myValue">
<img srcset="myValue">
<img usemap="myValue">
<img width="myValue">

DEFAULT CSS SETTING(S)

img { display: inline-block; }

INSIGHT(S)

Recommended to include src, alt, width, height attributes

The src attribute specifies the path to the image.

The alt attribute is used for screen readers to improve accessibility and is displayed if the image fails to load.

Always specify the width and height of an image because if they are omitted, the page might flicker while the image loads.

Establish image as a clickable link

To link an image to another document, simply nest the <img> tag inside an <a> tag.

Image optimization

Size

When preparing an image, the image should be scaled to a 640x480 size (width=640px, height=480px).

If the image size is 1920x1080 but styling it to be much smaller, the users may be required to download unnecessary data.

A smaller resolution results in a smaller file size.


Format

Developer should consider using a more optimized format, like WEBP or AVIF.

Two of the most common file formats are PNG and JPG, but these are no longer the most ideal formats for serving images.


Compression

A compression algorithm is used to reduce the size for files or data.

There are options like pngcrush to compress the images locally, or developer can use online compression tools.

However, it's worth noting that specific file formats, such as JPG, are not lossless.

Lossless means that the original data can be perfectly reconstructed from the compressed data.

Example, if the JPG image is compressed, it will result in a degraded quality.

Image licenses

All right reserved

Images are considered intellectual property, this means that they are protected by copyright regulations, most often belonging to the creator.

By default, images are released as all rights reserved.

The creator, or publisher sometimes, holds all copyright for the image.

This means that developer cannot use them in their web page unless they do one of three things:
Obtain written permission from the copyright holder
Purchase a license from the copyright holder
Incorporate the image in a way that falls under fair use


Fair use

Fair use requires that their use of the image is both limited and transformative.

Some examples of fair use would be to comment on or review the art or create a parody of the image.


Permissive license

Some images might be released under a permissive license, like a Creative Commons license, or the BSD license.

Developer might be required to make their website open source, or they may not be permitted to modify the image in any way.


Public domain

An image under the public domain has no copyright attached to it and is free to be used without any restrictions.

Images licensed specifically under the Creative Commons 0 license are considered public domain.


Free-to-use image

There are also sites like Pixabay and Unsplash, which offer free-to-use images.

INLINE FRAME ELEMENT

The <iframe> tag specifies an inline frame.

An inline frame is used to embed another document within the current HTML document.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes
<iframe allow="MyValue">
<iframe allowfullscreen="MyValue">
<iframe allowpaymentrequest="MyValue">
<iframe height="MyValue">
<iframe loading="MyValue">
<iframe name="MyValue">
<iframe referrerpolicy="MyValue">
<iframe sandbox="MyValue">
<iframe src="MyValue">
<iframe srcdoc="MyValue">
<iframe width="MyValue">

DEFAULT CSS SETTING(S)

iframe:focus { outline: none; }

iframe[seamless] { display: block; }

INPUT ELEMENT

The <input> tag specifies an input field where the user can enter data.

The <input> element is the most important form element.

The <input> element can be displayed in several ways, depending on the type attribute.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes
<input accept="myValue">
<input alt="myValue">
<input autocomplete="myValue">
<input autofocus>
<input checked>
<input dirname="myValue">
<input disabled>
<input form="myValue">
<input formaction="myValue">
<input formenctype="myValue">
<input formmethod="myValue">
<input formnovalidate>
<input formtarget="myValue">
<input height="myValue">
<input list="myValue">
<input max="myValue">
<input maxlength="myValue">
<input min="myValue">
<input minlength="myValue">
<input multiple
<input name="myValue">
<input pattern="myValue">
<input placeholder="myValue">
<input popovertarget="myValue">
<input popovertargetaction="myValue">
<input readonly>
<input required>
<input size="myValue">
<input src="myValue">
<input step="myValue">
<input type="myValue">
<input value="myValue">
<input width="myValue">

INSIGHT(S)

Recommended to include <label> tag together

It serves greater accessibility for the following <input> elements:
<input type="text">, <input type="checkbox">, <input type="radio">, <input type="file">, <input type="password">

INSERT ELEMENT

The <ins> tag defines a text that has been inserted into a document.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes
<ins cite="myValue">
<ins datetime="myValue">

DEFAULT CSS SETTING(S)

ins { text-decoration: underline; }

IDIOMATIC ELEMENT

The <i> tag defines a part of text in an alternate voice or mood.

The <i> tag is often used to indicate a technical term, a phrase from another language, a thought, a ship name, etc.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes

DEFAULT CSS SETTING(S)

i { font-style: italic; }

KEYBOARD ELEMENT

The <kbd> tag is used to define keyboard input.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes

DEFAULT CSS SETTING(S)

kbd { font-family: monospace; }

LABEL ELEMENT

The <label> tag defines a label for several elements.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes
<label for="myValue">
<label form="myValue">

DEFAULT CSS SETTING(S)

label { cursor: default; }

INSIGHT(S)

Better accessibility

Without <label>, some users will have difficulty clicking on very small regions.

With <label>, this increases the hit area and they can clicks the text within the label element.

Other than that, it can serve as screen reader users (will read out loud the label, when the user is focused on the element).

Recommended to bound related element to <label> tag

Only selective elements of the following can be bounded with label element:
<input type="checkbox">, <input type="color">, <input type="date">, <input type="datetime-local">, <input type="email">, <input type="file">, <input type="month">, <input type="number">, <input type="password">, <input type="radio">, <input type="range">, <input type="search">, <input type="tel">, <input type="text">, <input type="time">, <input type="url">, <input type="week">, <meter>, <progress>, <select>, <textarea>

LEGEND ELEMENT

The <legend> tag defines a caption for the <fieldset> element.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes

DEFAULT CSS SETTING(S)

legend { display: block; padding: 0 2px; border: none; }

LIST ITEM ELEMENT

The <li> tag defines a list item.

The <li> tag is used inside <ol>, <ul>, <menu>.

In <ul> and <menu>, the list items will usually be displayed with bullet points.

In <ol>, the list items will usually be displayed with numbers or letters.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes
<li value="myValue">

DEFAULT CSS SETTING(S)

li { display: list-item; }

MAIN ELEMENT

The <main> tag specifies the main content of a document.

The content inside the <main> element should be unique to the document.

It should not contain any content that is repeated across documents, like sidebars, navigation links, copyright information, site logos, and search forms.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes

INSIGHT(S)

Best practice for SEO & Accessibility

There must not be more than one <main> element in a document.

The element must NOT be a descendant of an <article>, <aside>, <footer>, <header>, <nav> element.

MAP ELEMENT

The <map> tag is used to define an image map, where it is an image map with clickable areas.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes
<map name="myValue">

DEFAULT CSS SETTING(S)

map { display: inline; }

INSIGHT(S)

Recommended to include name attribute

The name attribute will be associated with the <img>'s usemap attribute and creates a relationship between the image and the map.

The <map> element contains a number of <area> elements, that defines the clickable areas in the image map.

MARK ELEMENT

The <mark> tag defines text that should be marked or highlighted.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes

DEFAULT CSS SETTING(S)

mark { background-color: yellow; color: black; }

META ELEMENT

The <meta> tag defines metadata (informations) about an HTML document.

The tag is typically used to specify character set, page description, keywords, author of the document, and viewport settings.

Metadata will not be displayed on the page, but is machine parsable.

Metadata is used by browsers (how to display content or reload page), search engines (keywords), and other web services.

RELATED ATTRIBUTE(S)

HTML Global Attributes
<meta charset="myValue">
<meta content="myValue">
<meta http-equiv="myValue">
<meta name="myValue">

INSIGHT(S)

Custom setting on viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">.

This gives the browser instructions on how to control the page's dimensions and scaling.

The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

METER ELEMENT

The <meter> tag defines a scalar measurement within a known range, or a fractional value.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes
<meter form="myValue">
<meter high="myValue">
<meter low="myValue">
<meter max="myValue">
<meter min="myValue">
<meter optimum="myValue">
<meter value="myValue">

INSIGHT(S)

Some essential attributes & elements to be included

Always add the <label> tag for best accessibility practices.

The <meter> tag is not suitable for representing a progress, use the <progress> tag instead.

NO SCRIPT ELEMENT

The <noscript> tag defines an alternate content to be displayed that have disabled scripts in the browser.

It can also be used to display some text when a browser doesn't support script.

RELATED ATTRIBUTE(S)

HTML Global Attributes

INSIGHT(S)

The usage of <noscript> tags

The <noscript> element can be used in both <head> and <body>.

When used inside <head>, the element could only contain <link>, <style>, <meta> elements.

OBJECT ELEMENT

The <object> tag defines a container for an external resource.

The external resource can be a web page, a picture, a media player, or a plug-in application.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes
<object data="MyValue">
<object form="MyValue">
<object height="MyValue">
<object name="MyValue">
<object type="MyValue">
<object typemustmatch="MyValue">
<object usemap="MyValue">
<object width="MyValue">

DEFAULT CSS SETTING(S)

object:focus { outline: none; }

INSIGHT(S)

The <object> mainly used for Plug-ins

The <object> tag was originally designed to embed browser Plug-ins.

Plug-ins are computer programs that extend the standard functionality of the browser.

Plug-ins have been used for many different purposes, like scan for viruses and verify a bank id.

Plug-ins have been used for running Java applets, but now most browsers no longer support Java Applets and Plug-ins.

Plug-ins have been used for running ActiveX controls, but now are no longer supported in any browser.

Plug-ins have been used for displaying Flash movies and maps, but the support for Shockwave Flash has also been turned off in modern browsers.

OPTION ELEMENT

The <option> tag defines an option in a select list.

The <option> elements go inside a <select>, <optgroup>, or <datalist> element.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes
<option disabled>
<option label="myValue">
<option selected>
<option value="myValue">

OPTION GROUP ELEMENT

The <optgroup> tag is used to group related options in a <select> element (drop-down list).

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes
<optgroup disabled>
<optgroup label="myValue">

ORDERED LIST ELEMENT

The <ol> tag defines an ordered list.

An ordered list can be numerical or alphabetical.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes
<ol reversed="myValue">
<ol start="myValue">
<ol type="myValue">

DEFAULT CSS SETTING(S)

ol { display: block; list-style-type: decimal; margin: 1em 0; padding-left: 40px; }

OUTPUT ELEMENT

The <output> tag is used to represent the result of a calculation, like one performed by a script.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes
<output for="myValue">
<output form="myValue">
<output name="myValue">

DEFAULT CSS SETTING(S)

output { display: inline; }

PARAGRAPH ELEMENT

The <p> tag defines a paragraph.

Browsers automatically add a single blank line before and after each <p> element.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes

DEFAULT CSS SETTING(S)

p { display: block; margin: 1em 0; }

PARAMETER ELEMENT

The <param> tag is used to define parameters for an <object> element.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes
<param name="MyValue">
<param value="MyValue">

DEFAULT CSS SETTING(S)

param { display: none; }

PICTURE ELEMENT

The <picture> tag gives users more flexibility in specifying image resources.

The most common use of the <picture> element will be for art direction in responsive designs.

Instead of having one image that is scaled up or down based on the viewport width, multiple images can be designed to more nicely fill the browser viewport.

The <picture> element contains two tags: one or more <source> tags and one <img> tag.

The browser will look for the first <source> element where the media query matches the current viewport width.

Then it will display the proper image (specified in the srcset attribute).

The <img> element is required as the last child of the <picture> element, as a fallback option if none of the source tags matches.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes

PREFORMAT ELEMENT

The <pre> tag defines preformatted text.

Text in a <pre> element is displayed in a fixed-width font, and the text preserves both spaces and line breaks.

The text will be displayed exactly as written in the HTML source code.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes

DEFAULT CSS SETTING(S)

pre { display: block; font-family: monospace; white-space: pre; margin: 1em 0; }

PROGRESS ELEMENT

The <progress> tag represents the completion progress of a task.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes
<progress max="myValue">
<progress value="myValue">

INSIGHT(S)

Some essential attributes & elements to be included

Always add the <label> tag for best accessibility practices.

Use the <progress> tag in conjunction with JavaScript to display the progress of a task.

The <progress> tag is not suitable for representing a gauge, use the <meter> tag instead.

QUOTE ELEMENT

The <q> tag defines a short quotation.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes
<q cite="myValue">

DEFAULT CSS SETTING(S)

q { display: inline; }

q:before { content: open-quote; }

q:after { content: close-quote; }

RUBY ELEMENT

The <ruby> tag specifies a ruby annotation.

A ruby annotation is a small extra text, attached to the main text to indicate the pronunciation or meaning of the corresponding characters.

This kind of annotation is often used in Japanese publications.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes

INSIGHT(S)

Use <ruby> together with <rt> and <rp>

The <ruby> element consists of one or more characters that needs an explanation/pronunciation.

An <rt> element gives that information.

An optional <rp> element that defines what to show for browsers that do not support ruby annotations.

RUBY PARANTHESES ELEMENT

The <rp> tag can be used to provide parentheses around a ruby text, to be shown by browsers that do not support ruby annotations.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes

INSIGHT(S)

Use <rp> together with <ruby> and <rt>

The <ruby> element consists of one or more characters that needs an explanation/pronunciation.

An <rt> element gives that information.

An optional <rp> element that defines what to show for browsers that do not support ruby annotations.

RUBY TEXT ELEMENT

The <rt> tag defines an explanation or pronunciation of characters (for East Asian typography) in a ruby annotation.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes

DEFAULT CSS SETTING(S)

rt { line-height: normal; }

INSIGHT(S)

Use <rt> together with <ruby> and <rp>

The <ruby> element consists of one or more characters that needs an explanation/pronunciation.

An <rt> element gives that information.

An optional <rp> element that defines what to show for browsers that do not support ruby annotations.

SAMPLE ELEMENT

The <samp> tag is used to define sample output from a computer program.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes

DEFAULT CSS SETTING(S)

samp { font-family: monospace; }

SCALABLE VECTOR GRAPHIC ELEMENT

The <svg> tag defines a container for SVG graphics.

It sets up the space where all the shapes appear.

SVG has several methods for drawing paths, boxes, circles, text, and graphic images.

The circle element is used to draw a circle.

The path element is used to draw a curved line.

COMMON IMAGES VS SVG

Common image formats like PNG and JPG are classified as raster formats.

This essentially means that they are pixel-based, with the data tracking the color value in each pixel.

A large downside of raster based images is that they do not upscale well.

If the PNG files is edited to be larger file, it can becomes pixelated, or blurry.

As for SVG, a vector graphic tracks data based on paths and equations to plot points, lines, and curves.

It can be scaled to any size without impacting the quality.

SVGs specifically have the added benefit of storing data in XML.

Developer can use them directly in their code as raw HTML with the SVG element.

It also means they can programmatically change the color of the image.

BENEFITS

SVG is great for icons uses.

If developer want to create custom bullet points, or add icons to their links to represent social media platforms, using SVGs is the best approach.

One of the most popular icon libraries, Font Awesome, uses SVG images for their icons.

SVGs are also great for webpage logos, because they scale perfectly.

They allow developer to adapt their layout to any responsive design they need.

HEART ICONS

Path Element

The path element defines the image shape.


Distance Attribute

The d attribute defines a series of command letters and numbers that draw a shape.

The letters represent commands like move to, draw line, and close, while the numbers represent coordinates.


Viewbox Attribute

The viewBox="a b c d" attribute controls what part of the image is visible inside the SVG.

The first two numbers (a b) set the starting position of the viewBox, which is the top-left corner (x and y).

The next two numbers (c d) define the viewBox's width and height.


Fill Attribute

The fill="myColor" attribute defines the color.

SCRIPT ELEMENT

The <script> tag is used to embed a client-side script, usually JavaScript.

The <script> element either contains scripting statements, or it points to an external script file through the src attribute.

Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content.

RELATED ATTRIBUTE(S)

HTML Global Attributes
<script async>
<script crossorigin="myValue">
<script defer>
<script integrity="myValue">
<script nomodule="myValue">
<script referrerpolicy="myValue">
<script src="myValue">
<script type="myValue">

DEFAULT CSS SETTING(S)

script { display: none; }

INSIGHT(S)

The usage of <script> and <noscript> tags

The <script> element can be used in both <head> and <body>.

In <body>, the <noscript> is used in the case of <script> have been disabled in browser.

It could also be used in the case of a browser that doesn't support client-side scripting.

SEARCH ELEMENT

The <search> tag is used to specify that here comes a set of elements that is related to search.

Elements inside a <search> elements can typically be form elements used to perform a search.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes

DEFAULT CSS SETTING(S)

search { display: block; }

SECTION ELEMENT

The <section> tag defines a section in a document.

It is a semantic element that helps with SEO and accessibility.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes

DEFAULT CSS SETTING(S)

section { display: block; }

SELECT ELEMENT

The <select> element is used to create a drop-down list.

The <select> element is most often used in a form, to collect user input.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes
<select autofocus>
<select disabled>
<select form="myValue">
<select multiple>
<select name="myValue">
<select required>
<select size="myValue">

INSIGHT(S)

Some essential attributes & elements to be included

The name attribute is needed to reference the form data after the form is submitted.

If the name attribute is omitted, no data from the drop-down list will be submitted.

The id attribute is needed to associate the drop-down list with a label.

The <option> tags inside the <select> element define the available options in the drop-down list.

Always add the <label> tag for best accessibility practices.

SMALL ELEMENT

The <small> tag defines smaller text (like copyright and other side-comments).

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes

DEFAULT CSS SETTING(S)

small { font-size: smaller; }

SOURCE ELEMENT

The <source> tag is used to specify multiple media resources for media elements, such as audio, video and picture.

The <source> tag allows user to specify alternative files which the browser may choose from, based on browser support or viewport width.

The browser will choose the first <source> it supports.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes
<source media="myValue">
<source src="myValue">
<source type="myValue">

SPAN ELEMENT

The <span> tag is an inline container used to mark up a part of a text, or a part of a document.

The <span> tag is easily styled by CSS or manipulated with JavaScript.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes

STRIKE ELEMENT

The <s> tag specifies text that is no longer correct, accurate or relevant.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes

DEFAULT CSS SETTING(S)

s { text-decoration: line-through; }

STRONG ELEMENT

The <strong> tag is used to define text with strong importance.

Use the <b> tag to specify bold text without any extra importance.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes

DEFAULT CSS SETTING(S)

strong { font-weight: bold; }

STYLE ELEMENT

The <style> tag is used to define style information (CSS) for a document.

Inside the <style> element user can specify how HTML elements should render in a browser.

The <style> element must be included inside the <head> of the document.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes
<style media="myValue">
<style type="myValue">

DEFAULT CSS SETTING(S)

style { display: none; }

INSIGHT(S)

CSS specificity

When a browser reads a style sheet, it will format the HTML document according to the information in the style sheet.

If some properties have been defined for the same selector (element) in different style sheets, the value from the last read style sheet will be used.

There are more info regarding to CSS specificity in CSS section.

SUBSCRIPT ELEMENT

The <sub> tag defines subscript text.

Subscript text can be used for chemical formulas, like H2O.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes

DEFAULT CSS SETTING(S)

sub { vertical-align: sub; font-size: smaller; }

SUMMARY ELEMENT

The <summary> tag defines a visible heading for the <details> element.

The heading can be clicked to view/hide the details.

The <summary> element should be the first child element of the <details> element.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes

DEFAULT CSS SETTING(S)

summary { display: block; }

SUPERSCRIPT ELEMENT

The <sup> tag defines superscript text.

Superscript text can be used for footnotes, like WWW[1].

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes

DEFAULT CSS SETTING(S)

sup { vertical-align: super; font-size: smaller; }

TABLE ELEMENT

The <table> tag defines an HTML table.

An HTML table consists of one <table> element, one or more <tr>, <th>, <td> elements.

An HTML table may also include <caption>, <colgroup>, <col>, <thead>, <tbody>, <tfoot> elements.

RELATED ATTRIBUTE(S)

HTML Global Attributes

HTML Event Attributes

DEFAULT CSS SETTING(S)

table { display: table; border-collapse: separate; border-spacing: 2px; border-color: gray; }

TABLE BODY ELEMENT

The <tbody> tag is used to group the body content in an HTML table.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes

DEFAULT CSS SETTING(S)

tbody { display: table-row-group; vertical-align: middle; border-color: inherit; }

INSIGHT(S)

The usage of <tbody> element

The <tbody> element is used in conjunction with the <thead>, <tfoot> elements to specify each part of a table.

Browsers can use these elements to enable scrolling of the table body independently of the header and footer.

When printing a large table that spans multiple pages, these elements can enable the table header and footer to be printed at the top and bottom of each page.

The <tbody> element must have one or more <tr> tags inside.

TABLE DATA ELEMENT

The <td> tag defines a standard data cell in an HTML table.

The text in <td> elements are regular and left-aligned by default.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes
<td colspan="myValue">
<td headers="myValue">
<td rowspan="myValue">

DEFAULT CSS SETTING(S)

td { display: table-cell; vertical-align: inherit; }

TABLE HEAD ELEMENT

The <thead> tag is used to group header content in an HTML table.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes

DEFAULT CSS SETTING(S)

thead { display: table-header-group; vertical-align: middle; border-color: inherit; }

INSIGHT(S)

The usage of <thead> element

The <thead> element is used in conjunction with the <tbody>, <tfoot> elements to specify each part of a table.

Browsers can use these elements to enable scrolling of the table body independently of the header and footer.

When printing a large table that spans multiple pages, these elements can enable the table header and footer to be printed at the top and bottom of each page.

The <thead> element must have one or more <tr> tags inside.

TABLE HEADER ELEMENT

The <th> tag defines a header cell in an HTML table.

The text in <th> elements are bold and centered by default.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes
<th abbr="myValue">
<th colspan="myValue">
<th headers="myValue">
<th rowspan="myValue">
<th scope="myValue">

DEFAULT CSS SETTING(S)

th { display: table-cell; vertical-align: inherit; font-weight: bold; text-align: center; }

TABLE ROW ELEMENT

The <tr> tag defines a row in an HTML table.

A <tr> element contains one or more <th> or <td> elements.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes

DEFAULT CSS SETTING(S)

tr { display: table-row; vertical-align: inherit; border-color: inherit; }

TEMPLATE ELEMENT

The <template> tag is used as a container to hold some HTML content hidden from the user when the page loads.

The content inside <template> can be rendered later with a JavaScript.

User can use the <template> tag if they have some HTML codes to use over and over again, but not until they ask for it.

To do this without the <template> tag, user have to create the HTML code with JavaScript to prevent the browser from rendering the code.

RELATED ATTRIBUTE(S)

HTML Global Attributes

TEXT AREA ELEMENT

The <textarea> tag defines a multi-line text input control.

The <textarea> element is often used in a form, to collect user inputs like comments or reviews.

A text area can hold an unlimited number of characters, and the text renders in a fixed-width font (usually Courier).

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes
<textarea autofocus>
<textarea cols="myValue">
<textarea dirname="myValue">
<textarea disabled="myValue">
<textarea form="myValue">
<textarea maxlength="myValue">
<textarea name="myValue">
<textarea placeholder="myValue">
<textarea readonly>
<textarea required>
<textarea rows="myValue">
<textarea wrap="myValue">

INSIGHT(S)

Some essential attributes & elements to be included

The size of a text area is specified by the cols and rows attributes.

The name attribute is needed to reference the form data after the form is submitted.

Always add the <label> tag for best accessibility practices.

TIME ELEMENT

The <time> tag defines a specific time (or datetime).

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes
<time datetime="myValue">

INSIGHT(S)

Recommended to include datetime attribute

The datetime attribute of this element is used translate the time into a machine-readable format.

By doing this, browsers can offer to add date reminders through the user's calendar, and search engines can produce smarter search results.

TITLE ELEMENT

The <title> tag defines the title of the document.

The title must be text-only, and it is shown in the browser's title bar or in the page's tab.

RELATED ATTRIBUTE(S)

HTML Global Attributes

DEFAULT CSS SETTING(S)

title { display: none; }

INSIGHT(S)

Required to include <title> element

The <title> tag is required in HTML documents.

The contents of a page title is very important for search engine optimization (SEO).

The page title is used by search engine algorithms to decide the order when listing pages in search results.

User can not have more than one <title> element in an HTML document.

Guidelines for creating <title> element

Go for a longer, descriptive title (avoid one- or two-word titles).

Search engines will display about 50-60 characters of the title, so try not to have titles longer than that.

Do not use just a list of words as the title (this may reduce the page's position in search results).

TRACK ELEMENT

The <track> tag specifies text tracks for <audio> or <video> elements.

This element is used to specify subtitles, caption files or other files containing text, that should be visible when the media is playing.

Tracks are formatted in WebVTT format (.vtt files).

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes
<track default>
<track kind="myValue">
<track label="myValue">
<track src="myValue">
<track srclang="myValue">

UNARTICULATE ELEMENT

The <u> tag represents some text that is unarticulated and styled differently from normal text.

The text can be like misspelled words or proper names in Chinese text.

Avoid using the <u> element where it could be confused for a hyperlink.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes

DEFAULT CSS SETTING(S)

u { text-decoration: underline; }

UNORDERED LIST ELEMENT

The <ul> tag defines an unordered list.

Use the <ul> tag together with the <li> tag to create unordered lists.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes

DEFAULT CSS SETTING(S)

ul { display: block; list-style-type: disc; margin: 1em 0; padding-left: 40px; }

VARIABLE ELEMENT

The <var> tag is used to defines a variable in programming or in a mathematical expression.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes

DEFAULT CSS SETTING(S)

var { font-style: italic; }

VIDEO ELEMENT

The <video> tag is used to embed video content in a document, such as a movie clip or other video streams.

The MyText between the <video> tags will only be displayed in browsers that do not support the video element.

There are three supported video formats in HTML: MP4, WebM, and OGG.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes
<video autoplay>
<video controls>
<video height="myValue">
<video loop>
<video muted>
<video poster="myValue">
<video preload="myValue">
<video src="myValue">
<video width="myValue">

WORD BREAK ELEMENT

The <wbr> tag specifies "Word Break Opportunity" where in a text it would be ok to add a line-break.

When a word is too long, the browser might break it at the wrong place.

User can use the <wbr> element to add word break opportunities.

RELATED ATTRIBUTE(S)

HTML Global Attributes
HTML Event Attributes

LIST OF HTML ATTRIBUTES

ACCEPT ATTRIBUTE

ACCEPT-CHARSET ATTRIBUTE

ACCESSKEY ATTRIBUTE

ACTION ATTRIBUTE

ALTERNATE ATTRIBUTE

ASYNCHRONOUS ATTRIBUTE

AUTOCOMPLETE ATTRIBUTE

AUTOFOCUS ATTRIBUTE

AUTOPLAY ATTRIBUTE

CHARSET ATTRIBUTE

CHECKED ATTRIBUTE

CITE ATTRIBUTE

CLASS ATTRIBUTE

COLUMNS ATTRIBUTE

COLUMNSPAN ATTRIBUTE

CONTENT ATTRIBUTE

CONTENTEDITABLE ATTRIBUTE

CONTROLS ATTRIBUTE

COORDINATES ATTRIBUTE

DATA ATTRIBUTE

DATA-* ATTRIBUTE

DATETIME ATTRIBUTE

DEFAULT ATTRIBUTE

DEFER ATTRIBUTE

DIRECTION ATTRIBUTE

DIRECTIONNAME ATTRIBUTE

DISABLED ATTRIBUTE

DOWNLOAD ATTRIBUTE

DRAGGABLE ATTRIBUTE

ENCODETYPE ATTRIBUTE

ENTERKEYHINT ATTRIBUTE

FOR ATTRIBUTE

FORM ATTRIBUTE

FORMACTION ATTRIBUTE

HEADERS ATTRIBUTE

HEIGHT ATTRIBUTE

HIDDEN ATTRIBUTE

HIGH ATTRIBUTE

HYPERLINKREFERENCE ATTRIBUTE

HYPERLINKREFERENCELANGUAGE ATTRIBUTE

HTTP-EQUIVALENT ATTRIBUTE

IDENTIFIER ATTRIBUTE

INERT ATTRIBUTE

INPUTMODE ATTRIBUTE

ISMAP ATTRIBUTE

KIND ATTRIBUTE

LABEL ATTRIBUTE

LANGUAGE ATTRIBUTE

LIST ATTRIBUTE

LOOP ATTRIBUTE

LOW ATTRIBUTE

MAXIMUM ATTRIBUTE

MAXIMUMLENGTH ATTRIBUTE

MEDIA ATTRIBUTE

METHOD ATTRIBUTE

MINIMUM ATTRIBUTE

MULTIPLE ATTRIBUTE

MUTED ATTRIBUTE

NAME ATTRIBUTE

NOVALIDATE ATTRIBUTE

ONABORT ATTRIBUTE

ONAFTERPRINT ATTRIBUTE

ONBEFOREPRINT ATTRIBUTE

ONBEFOREUNLOAD ATTRIBUTE

ONBLUR ATTRIBUTE

ONCANPLAY ATTRIBUTE

ONCANPLAYTHROUGH ATTRIBUTE

ONCHANGE ATTRIBUTE

ONCLICK ATTRIBUTE

ONCONTEXTMENU ATTRIBUTE

ONCOPY ATTRIBUTE

ONCUECHANGE ATTRIBUTE

ONCUT ATTRIBUTE

ONDOUBLECLICK ATTRIBUTE

ONDRAG ATTRIBUTE

ONDRAGEND ATTRIBUTE

ONDRAGENTER ATTRIBUTE

ONDRAGLEAVE ATTRIBUTE

ONDRAGOVER ATTRIBUTE

ONDRAGSTART ATTRIBUTE

ONDROP ATTRIBUTE

ONDURATIONCHANGE ATTRIBUTE

ONEMPTIED ATTRIBUTE

ONENDED ATTRIBUTE

ONERROR ATTRIBUTE

ONFOCUS ATTRIBUTE

ONHASHCHANGE ATTRIBUTE

ONINPUT ATTRIBUTE

ONINVALID ATTRIBUTE

ONKEYDOWN ATTRIBUTE

ONKEYPRESS ATTRIBUTE

ONKEYUP ATTRIBUTE

ONLOAD ATTRIBUTE

ONLOADEDDATA ATTRIBUTE

ONLOADEDMETADATA ATTRIBUTE

ONLOADSTART ATTRIBUTE

ONMOUSEDOWN ATTRIBUTE

ONMOUSEMOVE ATTRIBUTE

ONMOUSEOUT ATTRIBUTE

ONMOUSEOVER ATTRIBUTE

ONMOUSEUP ATTRIBUTE

ONMOUSEWHEEL ATTRIBUTE

ONOFFLINE ATTRIBUTE

ONONLINE ATTRIBUTE

ONPAGEHIDE ATTRIBUTE

ONPAGESHOW ATTRIBUTE

ONPASTE ATTRIBUTE

ONPAUSE ATTRIBUTE

ONPLAY ATTRIBUTE

ONPLAYING ATTRIBUTE

ONPOPSTATE ATTRIBUTE

ONPROGRESS ATTRIBUTE

ONRATECHANGE ATTRIBUTE

ONRESET ATTRIBUTE

ONRESIZE ATTRIBUTE

ONSCROLL ATTRIBUTE

ONSEARCH ATTRIBUTE

ONSEEKED ATTRIBUTE

ONSEEKING ATTRIBUTE

ONSELECT ATTRIBUTE

ONSTALLED ATTRIBUTE

ONSTORAGE ATTRIBUTE

ONSUBMIT ATTRIBUTE

ONSUSPEND ATTRIBUTE

ONTIMEUPDATE ATTRIBUTE

ONTOGGLE ATTRIBUTE

ONUNLOAD ATTRIBUTE

ONVOLUMECHANGE ATTRIBUTE

ONWAITING ATTRIBUTE

ONWHEEL ATTRIBUTE

OPEN ATTRIBUTE

OPTIMUM ATTRIBUTE

PATTERN ATTRIBUTE

PLACEHOLDER ATTRIBUTE

POPOVER ATTRIBUTE

POPOVERTARGET ATTRIBUTE

POPOVERTARGETACTION ATTRIBUTE

POSTER ATTRIBUTE

PRELOAD ATTRIBUTE

READONLY ATTRIBUTE

RELATION ATTRIBUTE

REQUIRED ATTRIBUTE

REVERSED ATTRIBUTE

ROWS ATTRIBUTE

ROWSPAN ATTRIBUTE

SANDBOX ATTRIBUTE

SCOPE ATTRIBUTE

SELECTED ATTRIBUTE

SHAPE ATTRIBUTE

SIZE ATTRIBUTE

SIZES ATTRIBUTE

SPAN ATTRIBUTE

SPELLCHECK ATTRIBUTE

SOURCE ATTRIBUTE

SOURCEDOCUMENT ATTRIBUTE

SOURCELANGUAGE ATTRIBUTE

SOURCESET ATTRIBUTE

START ATTRIBUTE

STEP ATTRIBUTE

STYLE ATTRIBUTE

TABINDEX ATTRIBUTE

TARGET ATTRIBUTE

TITLE ATTRIBUTE

TRANSLATE ATTRIBUTE

TYPE ATTRIBUTE

USEMAP ATTRIBUTE

VALUE ATTRIBUTE

WIDTH ATTRIBUTE

WRAP ATTRIBUTE