Abbreviation

The <abbr> tag defines an abbreviation or an acronym, like "Mr.", "Dec.", "ASAP", "ATM".

Tip: An abbreviation and an acronym are both shortened versions of something else. Both is often represented as a series of letters.

Marking up abbreviations can give useful information to browsers, translation systems and search-engines.

Examples:

- The WHO was founded in 1948.

- O FCP foi fundado em 1906 ou em 1893?

Tip: The global title attribute can be used in the <abbr> tag to show the full version of the abbreviation/acronym when you mouse over the <abbr> element.

Audio

The <audio> tag defines sound, such as music or other audio streams.

Tip: Any text inside the between <audio> and </audio> will be displayed in browsers that do not support the <audio> tag.

Example:

With <audio controls>

Requires a click on play for you to listen The Mission (Ennio Morricone)

The attributes for audio are:

autoplay - Specifies that the audio will start playing as soon as it is ready

controls - Specifies that audio controls should be displayed (such as a play/pause button etc)

loop - Specifies that the audio will start over again, every time it is finished

muted - Specifies that the audio output should be muted

preload - Specifies if and how the author thinks the audio should be loaded when the page loads

src - Specifies the URL of the audio file

Another example:
If you want a autoplay with loop the code is something like that:

        <audio controls autoplay loop src="/music/the-mission.mp3">
        Your browser does not support the audio element.
        </audio>
    

See more at microsoft.com Getting Started with the HTML5 Audio Element

Code

The <code> tag is a phrase tag. It defines a piece of computer code.

Tip: This tag is not deprecated, but it is possible to achieve richer effect with CSS.

The <code> element does not preserve extra whitespace and line-breaks:

Coding Example:

To fix this, you must wrap the code in a <pre> element:

Coding Example:

        var person = {
            firstName:"John",
            lastName:"Doe",
            age:50,
            eyeColor:"blue"
        }
    

The <pre> tag defines preformatted text.

Text in a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks.

Tip: Use the <pre> element when displaying text with unusual formatting, or some sort of computer code.

See more at:

Computer Code Elements

tags

<code> defines computer code text

<kbd> defines keyboard text

<samp> defines sample computer code

<var> defines a variable

<pre> defines preformatted text

Headings

<h1> to <h6>

Tip: Use h1 to h6 elements only for headings. Do not use them just to make text bold or big. Use other tags for that.

h1 headings = 3.2rem (32px)

h2 headings = 2.7rem (27px)

h3 headings = 2.3rem (23px)

h4 headings = 1.9rem (19px)

h5 headings = 1.6rem (16px)

h6 headings = 1.4rem (14px)

hr + br

Use the <hr> tag to define a thematic change in the content...

The <br> tag inserts a single line break.

Code example

    <p>HTML is a language for describing web pages.</p>
    <p>CSS defines how to display HTML elements.</p>
    <hr>
    <p>In HTML5, the <hr> tag defines a thematic break.</p>
    <p>In HTML 4.01, the <hr> tag represents a horizontal rule.</p>
    <br>
    <p>However, the <hr> tag may still be displayed as a horizontal rule in visual browsers, but is now defined in semantic terms, rather than presentational terms.</p>
    

Result

HTML is a language for describing web pages.

CSS defines how to display HTML elements.

In HTML5, the <hr> tag defines a thematic break.

In HTML 4.01, the <hr> tag represents a horizontal rule.

However, the <hr> tag may still be displayed as a horizontal rule in visual browsers, but is now defined in semantic terms, rather than presentational terms.

Hyperlinks

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

The most important attribute of the <a> element is the href attribute, which indicates the link's destination.

This is a bold hyperlink to the Index page

This is a hyperlink to w3schools Visit W3Schools.com!

This is an entire paragraph to link at this article "Hyperlinks"

General Text

The <p> tag defines a paragraph.

Browsers automatically add some space (margin) before and after each <p> element. The margins can be modified with CSS...

This is a paragraph = 1.3rem (13px) <p>

This is a paragraph with bold effect <b>

This is a paragraph with italic effect <i>

Lists

List items can contain new list, and other HTML elements, like images and links, etc.

See all about at w3schools.com Lists

<ul> Lists

• li
  • li
    • li
    • li
    • li
  • li
  • li
• li
• li

<ol> Lists

1. li
   1. li
      1. li
         1. li
            1. li
            2. li
            3. li
         2. li
         3. li
      2. li
      3. li
   2. li
   3. li
2. li
3. li

<dl> Lists

dtdtdt

dddddddddd

dtdtdt

dddddddddddddddd

<dl> tag defines a description list

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

<dd> tag describes each term/name

Obs: Background color only for visualizing lists area in this step...

My model for lists reset at:
http://www.cssreset.com/wp-content/themes/cssreset/css/style.css

Quotes

Use <q> for inline (short) quotations:

CSS:
q { quotes: "«" "»" "‹" "›"; }

This is a quote.

This is a quote inside a quote.

This is a quote. inside a paragraph

<blockquote> tag

In HTML 4.01 defines a long quotation.
In HTML5 specifies a section that is quoted from another source.

Examples inside paragraphs:

This is an example inside a 1º paragraph... Here is a long quotation here is a long quotation...

This is an example inside a 2º paragraph... Here is a long quotation here is a long quotation...

Examples without paragraphs:

This is an example without paragraphs but with a <br>... Here is a long quotation here is a long quotation.
This is another example without paragraphs but with a <br>... Here is a long quotation here is a long quotation

See more at:

Quotation and Citation Elements

tags

<q> for Short Quotations

<blockquote> for Long Quotations

<abbr> for Abbreviations

<dfn> for Definitions

<address> for Contact Information

<cite> for Work Title

<bdo> for Bi-Directional Override

Special Text

The <b> tag specifies bold text.

This is normal text - and this is bold text.

Note: According to the HTML 5 specification, the <b> tag should be used as a LAST resort when no other tag is more appropriate. The HTML 5 specification states that headings should be denoted with the <h1> to <h6> tags, emphasized text should be denoted with the <em> tag, important text should be denoted with the <strong> tag, and marked/highlighted text should use the <mark> tag.

Tip: You can also use the CSS "font-weight" property to set bold text.

The <em> tag is a phrase tag. It renders as emphasized text.

This is normal text - and this is Emphasized text

The <strong> tag is a phrase tag. It defines important text.

This is normal text - and this is Important text

The <mark> tag defines marked text.

Use the <mark> tag if you want to highlight parts of your text.

This is normal text - and this is Highlight text

See more at:

Text Formatting Elements

• Bold text
• Important text
• Italic text
• Emphasized text
• Marked text
• Small text
• Deleted text
• Inserted text
• Subscripts
• Superscripts

Special elements, for defining text with a special meaning.

Small Text

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

This text contains some small text.

This text contains only small text.

The <sub> tag defines subscript text. Subscript text appears half a character below the normal line, and is sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like H₂O.

This text contains _subscript text.

The <sup> tag defines superscript text. Superscript text appears half a character above the normal line, and is sometimes rendered in a smaller font. Superscript text can be used for footnotes, like WWW^[1].

This text contains ^superscript text.

The <span> tag provides no visual change by itself.

Tip: When a text is hooked in a <span> element, you can style it with CSS, or manipulate it with JavaScript.

paragraph + span text = 1rem (76.923% or 10px)

See more at:

Text Formatting Elements

Tables

The <table> tag defines an HTML table.

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

The <tr> element defines a table row, the <th> element defines a table header, and the <td> element defines a table cell.

A more complex HTML table may also include <caption>, <col>, <colgroup>, <thead>, <tfoot>, and <tbody> elements.

Above, we see the result for my basic tables with <caption>, <thead> and <tbody> after reset and normalize

See more at w3schools.com Tables

Table data <td> are the data containers of the table.
They can contain all sorts of HTML elements like text, images, lists, other tables, etc.

...

Spend some time on web design newgroups or mailing lists, and you’ll find some common words and ideas repeated time after time. Question after question, of course, is “how do I?”. But beneath questions like “how do I make my pages look the same on every platform” and “how can I make my fonts appear identical on the Macintosh and Windows” is an underlying question – “how do I control the user’s browser?” Indeed, the word control turns up with surprising frequency.

Underpinning all this is the belief that designers are controllers (think about the implications of the term “pixel mechanic”). Designers want to override the wishes of users, and the choices that they have made about their viewing experience (by “fixing” font size, for instance). Designers want to second guess platform differences, caused by different logical resolutions (for instance the Macintosh’s 72dpi, versus the standard Windows 96dpi). Designers are all-knowing, and will not tolerate anything less than a rendering on every browser that is pixel perfect with the rendering on their own machine.

html / New basis ...

HTML basis

Searching for the theory...

W3Schools.com

With HTML you can create your own Web site.
HTML is easy to learn - You will enjoy it.

To learn efficiently HTML, anyone can start with this link HTML HOME and then follow by HTML Introduction, HTML Editors, HTML Basic, etc...

See all links on the left side of those pages from w3schools.

HTML.net

Another good web to learn the basis of HTML is from HTML.net

"People often think it is extremely difficult to make a website. That is not the case! Everyone can learn how to make a website. And if you read on, you will have made one in just one hour."

See more at Introduction - Free HTML Tutorial

...

...