HMTL Overview

An HTML Overview

(-: Enjoy! :-) Teleport to the End

(work in progress)

Collapsible Test

Text Output Basics

(Refer to code for syntax)

This is a plain paragraph.

This is before a line break ...

And this is after a line break.

For this next section, note that "Plain|" is used as a point of comparison. Also note that the phrase that is wrapped in quotation marks is the name of the text formatting tag.

Plain|This is "strong".

Plain|This is "b".

Plain|This is "i".

Plain|This is "em".

Plain|This is "big".

Plain|This is "small".

Plain|~~This is "strike"~~.

Plain|~~This is "del"~~.

Plain|^{This is "sup"}.

Plain|_{This is "sub"}.

Plain|This is "ins".

Plain|This is "u".

Useful Acronyms

HTML => HyperText Markup Language

CSS => Cascading Style Sheet

JS => JavaScript

TS => TypeScript

PHP => PHP: Hypertext Preprocessor

SQL => Structured Query Language

UTF => Unicode Transformation Format

Useful Tags

a => Anchor

div => DIVide

em = EMphasized (italicized) text

href => Hypertext REFerence

img => IMaGe

li => List Item

ol => Ordered List

pre => PREformatted text

rel => RELation

tbody => Table Body

td => Table Data

tfoot => Table Footer

th => Table Header

tr => Table Row

Useful Hyperlinks

SoloLearn Homepage

W3 Schools Homepage

An Ordered List (<ol></ol>)

This is "li" #1.
This is "li" #2.
This is "li" #3.

An Unordered List (<ul></ul>)

This is "li" #1.
This is "li" #2.
This is "li" #3.

Variations of Lists

Ordered List, type="A":

This is "li" #1.
This is "li" #2.
This is "li" #3.

Ordered List, type="a":

This is "li" #1.
This is "li" #2.
This is "li" #3.

Ordered List, type="I":

This is "li" #1.
This is "li" #2.
This is "li" #3.

Ordered List, type="i":

This is "li" #1.
This is "li" #2.
This is "li" #3.

Unordered List, type="square":

This is "li" #1.
This is "li" #2.
This is "li" #3.

Unordered List, type="circle":

This is "li" #1.
This is "li" #2.
This is "li" #3.

Unordered List, type="disc":

This is "li" #1.
This is "li" #2.
This is "li" #3.

Tables

A centered "table" with 3 "tr" tags
"th" 1	"th" 2	"th" 3
"td" col 1	"td" col 2 "rowspan=2"	"td" col 3
"td" col 1	"td" col 2 "rowspan=2"	"td" col 3
"td" with "colspan=3"

A simple table for reference.
Header 1	Header 2	Header 3
Data 1	Data 2	Data 3

Div vs Span

A div is used to alter an entire block-level section of elements.

A span is used to alter a specific inline-level element.

Div Example:

Block item 1
Block item 2
Block item 3

Span Example:

Plain item 1
Span-altered item 2
Plain item 3

Types of Elements

Some elements can be used as either block-level elements or as inline elements.
This includes the following elements:

APPLET - Embedded Java applet
IFRAME - Inline Frame
INS - Inserted Text
MAP - Image Map
OBJECT - embedded object
SCRIPT - Script within an HTML document

Forms

Forms enable a user to send data to servers for processing. Two methods that can be used to transfer the data to the server are POST and GET.

Simple memory aid:

POST is harder to hack.
GET is easier to hack.

The following form example is meant to give you a feel for how the output of the GET method and the POST method differ.

Note: none of the form data is actually sent anywhere at this time. The output behavior is simulated.

Clicking Submit will display the selected radio button (Breakfast, Lunch, Dinner) to the console, and it will display relevant information below.

Your form results will be posted below here:

GET Result Will Be Here

POST Result Will Be Here

Google Search iFrame

iFrame stands for inline frame.

An inline frame embeds a separate document within an HTML document.

As you see here, the inline frame below contains a Google search page.

Feel free to give it a try! :c)

An inline frame can be set as the target for a given hyperlink.

Here are some examples:

Open SoloLearn Homepage

Open Wikipedia Homepage

Open WebCrawler Homepage

HTML vs HTML5

A Concise Comparison

HTML5 Content Models

Metadata: Content that sets up the presentation or behavior of the rest of the content. These elements are found in the head of the document.
Elements: <base>, <link>, <meta>, <noscript>, <script>, <style>, <title>

Embedded: Content that imports other resources into the document.
Elements: <audio>, <video>, <canvas>, <iframe>, <img>, <math>, <object>, <svg>

Interactive: Content specifically intended for user interaction.
Elements: <a>, <audio>, <video>, <button>, <details>, <embed>, <iframe>, <img>, <input>, <label>, <object>, <select>, <textarea>

Heading: Defines a section header.
Elements: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hgroup>

Phrasing: This model has a number of inline level elements in common with HTML4.
Elements: <img>, <span>, <strong>, <label>, <br />, <small>, <sub>, and others.

Character Encoding

Why is it helpful to declare which character encoding will be used?

Got time for a quick read?

If not, then that's okay! Here's a brief explanation, courtesy of Ire Aderinokun, who can be found at the link above:

Simply put, when you declare the "charset" as "UTF-8", you are telling your browser to use the UTF-8 character encoding, which is a method of converting your typed characters into machine-readable code.

Header/Nav/Section/Aside/Footer

An <h3> Header Element

Thanks to this reference for the following insight:

The header element has nothing to do with the head element. It does not introduce any new section, but it is the head of a section.

Thanks to this reference for the following insight regarding the <section> tag. Sections are useful for grouping together thematically-related content. It may sound like a <div> element, but its not. The div has no semantic meaning. Before replacing all your div’s with section elements, always ask yourself, “Does all of this content seem related?”

HTML5 has introduced a number of semantic elements that are designed to help with differentiating the purposes of different types of section elements. For instance, this is an <article%gt; tag and it is meant to be used for independent, self-contained content.

HMTL5 <canvas> Attribute

The HTML5 <canvas> element is used to draw graphics, on the fly, with the use of JavaScript. The <canvas> element is only a container for graphics. You must use JavaScript to actually draw the graphics. Canvas has a number of methods for drawing paths, boxes, circles, text, as well as for adding images.

Static Progress Bar (work-in-progress)

Back to the Beginning

HTML Overview - featuring Kode Krasher