HTML INTRODUCTION
What is HTML?
HTML (Hypertext Markup Language) is the standard markup language for creating webpages
HTML describes the structure of a webpage
HTML consists of a series of elements
HTML elements tell the browser how to display the content
HTML Syntax
An HTML element is defined by an open-tag (<>), some contents, and a closed-tag (</>)
Example → <TagName> MyContents </TagName>
Some HTML elements have no content (like the <br> element)
These elements are called empty elements which do not have a closed-tag
HTML PAGE STRUCTURE
<!DOCTYPE html>
<html>
<head>
<title> MyText </title>
<style> MyContents </style>
<base>
<link>
<meta>
<script> MyContents </script>
<noscript> MyText </noscript>
</head>
<body>
<header> MyContents </header>
<main> MyContents </main>
<footer> MyContents </footer>
</body>
</html>
<!DOCTYPE>
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
<html> MyContents </html>
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
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
<head> MyContents </head>
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
DEFAULT CSS SETTING(S)
head { display: none; }
<title> MyText </title>
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
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)
<style> MyContents </style>
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
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
<base>
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
<link>
The <link> tag defines the relationship between the current document and an external resource
The <link> tag is most often used to link to external style sheets or to add a favicon to the website
RELATED ATTRIBUTE(S)
<link crossorigin="myValue"><link hreflang="myValue"><link referrerpolicy="myValue">
DEFAULT CSS SETTING(S)
link { display: none; }
INSIGHT(S)
Custom favicon
A favicon is a small image displayed next to the page title in the browser tab
User can use any image as the desired favicon, or can also create "
custom favicon" on the site
The favicon should be a simple image with high contrast due to its small size
The attributes required for creating favicon are rel, type, href
Example; <link rel="icon" type="image/x-icon" href="myFavicon.ico">
<script> MyContents </script>
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)
<script crossorigin="myValue"><script integrity="myValue"><script nomodule="myValue"><script referrerpolicy="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
<noscript> MyText </noscript>
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
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
<body> MyContents </body>
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
DEFAULT CSS SETTING(S)
body { display: block; margin: 8px; }
body:focus { outline: none; }
<main> MyContents </main>
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
INSIGHT(S)
Usage of the main tag
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
HTML SEMANTIC CONTAINER
<nav> MyContents </nav>
<aside> MyContents </aside>
<article> MyContents </article>
<section> MyContents </section>
<div> MyContents </div>
<span> MyContents </span>
<hgroup> MyContents </hgroup>
<picture> MyContents </picture>
<search> MyContents </search>
<svg> MyContents </svg>
<template> MyContents </template>
<nav> MyContents </nav>
The <nav> tag defines a set of navigation links
The <nav> element is intended only for major blocks of navigation links
However, not all links of a document should be inside a <nav> element
DEFAULT CSS SETTING(S)
nav { display: block; }
INSIGHT(S)
Provide better accessibility
Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content
<aside> MyContents </aside>
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
DEFAULT CSS SETTING(S)
aside { display: block; }
<article> MyContents </article>
The <article> tag specifies independent, self-contained content
Potential sources for the <article> element are like forum post, blog post, news story
DEFAULT CSS SETTING(S)
article { display: block; }
<section> MyContents </section>
The <section> tag defines a section in a document
DEFAULT CSS SETTING(S)
section { display: block; }
<div> MyContents </div>
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
DEFAULT CSS SETTING(S)
div { display: block; }
<span> MyContents </span>
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
<hgroup> MyContents </hgroup>
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
DEFAULT CSS SETTING(S)
hgroup { display: block; }
<picture> MyContents </picture>
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
<search> MyContents </search>
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
DEFAULT CSS SETTING(S)
search { display: block; }
<svg> MyContents </svg>
The <svg> tag defines a container for SVG graphics
SVG has several methods for drawing paths, boxes, circles, text, and graphic images
<template> MyContents </template>
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
HTML SEMANTIC TEXT
<!-- MyText -->
<h1> MyText </h1>
<p> MyText </p>
<a> MyText </a>
<address> MyText </address>
<abbr> MyText </abbr>
<dfn> MyText </dfn>
<cite> MyText </cite>
<q> MyText </q>
<blockquote> MyText </blockquote>
<strong> MyText </strong>
<em> MyText </em>
<ins> MyText </ins>
<del> MyText </del>
<b> MyText </b>
<i> MyText </i>
<u> MyText </u>
<s> MyText </s>
<mark> MyText </mark>
<small> MyText </small>
<sup> MyText </sup>
<sub> MyText </sub>
<code> MyText </code>
<kbd> MyText </kbd>
<pre> MyText </pre>
<samp> MyText </samp>
<var> MyText </var>
<bdi> MyText </bdi>
<bdo> MyText </bdo>
<time> MyText </time>
<h1> MyText </h1>
The <h1> to <h6> tags are used to define HTML headings
<h1> defines the most important heading while <h6> defines the least important heading
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>
<p> MyText </p>
The <p> tag defines a paragraph
Browsers automatically add a single blank line before and after each <p> element
DEFAULT CSS SETTING(S)
p { display: block; margin: 1em 0; }
<a> MyText </a>
The <a> tag defines a hyperlink, which is used to link from one page to another
RELATED ATTRIBUTE(S)
<a referrerpolicy="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
<address> MyText </address>
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.
DEFAULT CSS SETTING(S)
address { display: block; font-style: italic; }
<abbr> MyText </abbr>
The <abbr> tag defines an abbreviation or an acronym, like "HTML", "CSS", "Mr.", "Dr.", "ASAP"
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
<dfn> MyText </dfn>
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
DEFAULT CSS SETTING(S)
dfn { font-style: italic; }
<cite> MyText </cite>
The <cite> tag defines the title of a creative work
Example of creative works include books, poems, songs, movies, paintings, sculptures, etc.
DEFAULT CSS SETTING(S)
cite { font-style: italic; }
<q> MyText </q>
The <q> tag defines a short quotation
DEFAULT CSS SETTING(S)
q { display: inline; }
q:before { content: open-quote; }
q:after { content: close-quote; }
<blockquote> MyText </blockquote>
The <blockquote> tag specifies a section that is quoted from another source
RELATED ATTRIBUTE(S)
<blockquote cite="myValue">
DEFAULT CSS SETTING(S)
blockquote { display: block; margin: 1em 40px; }
<strong> MyText </strong>
The <strong> tag is used to define text with strong importance
Use the <b> tag to specify bold text without any extra importance
DEFAULT CSS SETTING(S)
strong { font-weight: bold; }
<em> MyText </em>
The <em> tag is used to define emphasized text
A screen reader will pronounce the words in <em> with an emphasis, using verbal stress
DEFAULT CSS SETTING(S)
em { font-style: italic; }
<ins> MyText </ins>
The <ins> tag defines a text that has been inserted into a document
DEFAULT CSS SETTING(S)
ins { text-decoration: underline; }
<del> MyText </del>
The <del> tag defines text that has been deleted from a document
DEFAULT CSS SETTING(S)
del { text-decoration: line-through; }
<b> MyText </b>
The <b> tag specifies bold text without any extra importance
DEFAULT CSS SETTING(S)
b { font-weight: bold; }
<i> MyText </i>
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.
DEFAULT CSS SETTING(S)
i { font-style: italic; }
<u> MyText </u>
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
DEFAULT CSS SETTING(S)
u { text-decoration: underline; }
<s> MyText </s>
The <s> tag specifies text that is no longer correct, accurate or relevant
DEFAULT CSS SETTING(S)
s { text-decoration: line-through; }
<mark> MyText </mark>
The <mark> tag defines text that should be marked or highlighted
DEFAULT CSS SETTING(S)
mark { background-color: yellow; color: black; }
<small> MyText </small>
The <small> tag defines smaller text (like copyright and other side-comments)
DEFAULT CSS SETTING(S)
small { font-size: smaller; }
<sup> MyText </sup>
The <sup> tag defines superscript text
Superscript text can be used for footnotes, like WWW[1]
DEFAULT CSS SETTING(S)
sup { vertical-align: super; font-size: smaller; }
<sub> MyText </sub>
The <sub> tag defines subscript text
Subscript text can be used for chemical formulas, like H2O
DEFAULT CSS SETTING(S)
sub { vertical-align: sub; font-size: smaller; }
<code> MyText </code>
The <code> tag is used to define a piece of computer code
DEFAULT CSS SETTING(S)
code { font-family: monospace; }
<kbd> MyText </kbd>
The <kbd> tag is used to define keyboard input
DEFAULT CSS SETTING(S)
kbd { font-family: monospace; }
<samp> MyText </samp>
The <samp> tag is used to define sample output from a computer program
DEFAULT CSS SETTING(S)
samp { font-family: monospace; }
<var> MyText </var>
The <var> tag is used to defines a variable in programming or in a mathematical expression
DEFAULT CSS SETTING(S)
var { font-style: italic; }
<bdi> MyText </bdi>
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
<bdo> MyText </bdo>
The <bdo> tag is used to override the current text direction
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
<time> MyText </time>
The <time> tag defines a specific time (or datetime)
RELATED ATTRIBUTE(S)
<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
HTML FORM STRUCTURE
<form>
<fieldset>
<legend> MyText </legend>
<label> MyText </label>
<input>
<label> MyText </label>
<textarea> MyText </textarea>
<label> MyText </label>
<select>
<optgroup>
<option> MyText </option>
</optgroup>
</select>
<label> MyText </label>
<datalist>
<option>
</datalist>
<label> MyText </label>
<progress> MyText </progress>
<label> MyText </label>
<meter> MyText </meter>
<output></output>
<button> MyText </button>
</fieldset>
</form>
<fieldset> MyContents </fieldset>
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)
<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
<legend> MyText </legend>
The <legend> tag defines a caption for the <fieldset> element
DEFAULT CSS SETTING(S)
legend { display: block; padding: 0 2px; border: none; }
<label> MyText </label>
The <label> tag defines a label for several elements
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>
<textarea> MyText </textarea>
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)
<textarea cols="myValue"><textarea dirname="myValue"><textarea disabled="myValue"><textarea form="myValue"><textarea maxlength="myValue"><textarea name="myValue"><textarea placeholder="myValue"><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
<select> MyContents </select>
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
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 lis
Always add the <label> tag for best accessibility practices
<optgroup> MyContents </optgroup>
The <optgroup> tag is used to group related options in a <select> element (drop-down list)
RELATED ATTRIBUTE(S)
<optgroup label="myValue">
<option> MyText </option>
The <option> tag defines an option in a select list
The <option> elements go inside a <select>, <optgroup>, or <datalist> element
<datalist> MyContents </datalist>
The <datalist> tag specifies a list of pre-defined options for an <input> element
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
<progress> MyText </progress>
The <progress> tag represents the completion progress of a task
RELATED ATTRIBUTE(S)
<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
<meter> MyText </meter>
The <meter> tag defines a scalar measurement within a known range, or a fractional value
RELATED ATTRIBUTE(S)
<meter optimum="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
<output></output>
The <output> tag is used to represent the result of a calculation, like one performed by a script
DEFAULT CSS SETTING(S)
output { display: inline; }
HTML TABLE STRUCTURE
<table>
<caption> MyText </caption>
<colgroup>
<col>
</colgroup>
<thead>
<tr>
<th> MyTableHeader </th>
</tr>
</thead>
<tbody>
<tr>
<td> MyTableData </td>
</tr>
</tbody>
<tfoot>
<tr>
<td> MyTableData </td>
</tr>
</tfoot>
</table>
<table> MyContents </table>
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
DEFAULT CSS SETTING(S)
table { display: table; border-collapse: separate; border-spacing: 2px; border-color: gray; }
<caption> MyText </caption>
The <caption> tag defines a table caption
DEFAULT CSS SETTING(S)
caption { display: table-caption; text-align: center; }
<colgroup> MyContents </colgroup>
The <colgroup> tag specifies a group of one or more columns in a table for formatting
RELATED ATTRIBUTE(S)
<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
<col>
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
DEFAULT CSS SETTING(S)
col { display: table-column; }
<thead> MyContents </thead>
The <thead> tag is used to group header content in an HTML table
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
<tr> MyContents </tr>
The <tr> tag defines a row in an HTML table
A <tr> element contains one or more <th> or <td> elements
DEFAULT CSS SETTING(S)
tr { display: table-row; vertical-align: inherit; border-color: inherit; }
<th> MyTableHeader </th>
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)
<th headers="myValue">
DEFAULT CSS SETTING(S)
th { display: table-cell; vertical-align: inherit; font-weight: bold; text-align: center; }
<tbody> MyContents </tbody>
The <tbody> tag is used to group the body content in an HTML table
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
<td> MyTableData </td>
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)
<td headers="myValue">
DEFAULT CSS SETTING(S)
td { display: table-cell; vertical-align: inherit; }
HTML LIST STRUCTURE
<ol>
<li> MyText </li>
</ol>
<ul>
<li> MyText </li>
</ul>
<menu>
<li> MyText </li>
</menu>
<dl>
<dt> MyText </dt>
<dd> MyText </dd>
</dl>
<ol> MyContents </ol>
The <ol> tag defines an ordered list
An ordered list can be numerical or alphabetical
DEFAULT CSS SETTING(S)
ol { display: block; list-style-type: decimal; margin: 1em 0; padding-left: 40px; }
<li> MyText </li>
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
DEFAULT CSS SETTING(S)
li { display: list-item; }
<ul> MyContents </ul>
The <ul> tag defines an unordered list
Use the <ul> tag together with the <li> tag to create unordered lists
DEFAULT CSS SETTING(S)
ul { display: block; list-style-type: disc; margin: 1em 0; padding-left: 40px; }
<dl> MyContents </dl>
The <dl> tag defines a description list
The <dl> tag is used in conjunction with <dt> and <dd>
DEFAULT CSS SETTING(S)
dl { display: block; margin: 1em 0; }
<dt> MyText </dt>
The <dt> tag defines a term/name in a description list
The <dt> tag is used in conjunction with <dl> and <dd>
DEFAULT CSS SETTING(S)
dt { display: block; }
<dd> MyText </dd>
The <dd> tag is used to describe a data in a description list
The <dd> tag is used in conjunction with <dl> and <dt>
DEFAULT CSS SETTING(S)
dd { display: block; margin-left: 40px; }
HTML MEDIA STRUCTURE
<figure>
<img>
<map>
<area>
</map>
<figcaption> MyText </figcaption>
</figure>
<audio>
<source>
<track>
MyText
</audio>
<video>
<source>
<track>
MyText
</video>
<img>
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)
<img crossorigin="myValue"><img referrerpolicy="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 specifies an alternate text for the image, if the image for some reason cannot be displayed
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
<map> MyContents </map>
The <map> tag is used to define an image map, where it is an image map with clickable areas
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
<area>
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)
<area download="myValue"><area hreflang="myValue"><area referrerpolicy="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
<figcaption> MyText </figcaption>
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
DEFAULT CSS SETTING(S)
figcaption { display: block; }
<audio> MyContents </audio>
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)
<audio preload="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
<source>
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
<track>
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)
<track srclang="myValue">
<video> MyContents </video>
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)
<video preload="myValue">
RUBY ANNOTATION STRUCTURE
<ruby>
<rp> ( </rp>
<rt> MyText </rt>
<rp> ) </rp>
</ruby>
<ruby> MyContents </ruby>
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
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
<rp>(</rp> MyContents <rp>)</rp>
The <rp> tag can be used to provide parentheses around a ruby text, to be shown by browsers that do not support ruby annotations
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
<rt> MyText </rt>
The <rt> tag defines an explanation or pronunciation of characters (for East Asian typography) in a ruby annotation
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
MISC
<details>
<summary> MyText </summary>
</details>
<object>
<param>
</object>
<canvas> MyText </canvas>
<script></script>
<hr>
<br>
<wbr>
<data> MyText </data>
<dialog> MyText </dialog>
<embed>
<iframe></iframe>
<details> MyContents </details>
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
DEFAULT CSS SETTING(S)
details { display: block; }
<summary> MyText </summary>
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
DEFAULT CSS SETTING(S)
summary { display: block; }
<object> MyContents </object>
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)
<object height="MyValue"><object typemustmatch="MyValue"><object usemap="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
<param>
The <param> tag is used to define parameters for an <object> element
DEFAULT CSS SETTING(S)
param { display: none; }
<canvas> MyText </canvas>
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)
<canvas height="MyValue">
DEFAULT CSS SETTING(S)
canvas { height: 150px; width: 300px; }
<hr>
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
DEFAULT CSS SETTING(S)
hr { display: block; margin: 0.5em auto; border-style: inset; border-width: 1px; }
<br>
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
<wbr>
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
<data> MyText </data>
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
<dialog> MyText </dialog>
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
<embed>
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
DEFAULT CSS SETTING(S)
embed:focus { outline: none; }
<iframe></iframe>
The <iframe> tag specifies an inline frame
An inline frame is used to embed another document within the current HTML document
RELATED ATTRIBUTE(S)
<iframe allowfullscreen="MyValue"><iframe allowpaymentrequest="MyValue"><iframe height="MyValue"><iframe loading="MyValue"><iframe referrerpolicy="MyValue"><iframe sandbox="MyValue"><iframe srcdoc="MyValue">
DEFAULT CSS SETTING(S)
iframe:focus { outline: none; }
iframe[seamless] { display: block; }