Please enable JavaScript.
Coggle requires JavaScript to display documents.
HTML - Coggle Diagram
HTML
Marking Up Text
Paragraphs
<p>
This is a Paragraph
</p>
May contain text, images, and other inline elements, but may not contain block elements
Headings
h1,h2,h3,h4,h5,h6
Thematic Breaks
(Horizontal Rule)
<hr>
an empty element - you just drop it into place where you want the break
Lists
Unordered lists
<ul></ul>
<li></li>
Ordered lists
<ol></ol>
<li></li>
Description lists
<dl>
....
<dl>
<dt>
....
<dt>
<dd>
...
<dd>
The
dl
element can contain only
dt
and
dd
elements, you cannot put headings or content-grouping elements in
dt
, but
dd
can contain any type of flow
More Content Elements
Long Quotations
<blockquote>
....
</blockquote>
If you have some quotation, also
recommended that content within blockquote elements be contained in other elements
Preformatted Text
<pre>
...
</pre>
Maintains white space
Figures
<figure>
...
</figure>
<figcaption>
...
</figcaption>
Self-contained unit
Use: Can contain anything, It is more semantically rich
Organizing Page Content
Main Content
<main>
...
</main>
Primary content area of page or app
There should be only one main present
Headers and Footers
<header>
....
</header>
<footer>
....
</footer>
Header: Introductory material for page, section, or article
Footer: Footer for page, section, or article
Neither header not footer elements can have nested header or footer
Sections and Articles
<section>
...
</section>
<article>
...
</article>
Section: Thematic group of content
Article: Self-contained, reusable composition
if the content is self-contained and could appear outside the current context, it is best marked up as an article
Aside
<aside>
...
</aside>
Tangentially related material
Navigation
<nav>
Primary navigation links
Addresses
<address>
...
</address>
Contact information
The Inline Element Roundup
Emphasized text
<em>
...
</em>
Stressed emphasis
Important text
<strong>
..
</strong>
Strong importance
Presentational
<b>
...
</b>
Keywords or visually emphasized text(bold)
<i>
...
</i>
Alternative voice(italic)
<s>
...
</s>
Incorrect text(strike-through)
<u>
...
</u>
Annotated text(underline)
<small>
...
</small>
Legal text; small print(smaller type size)
Short quotations
<q>
...
</q>
Automatically adds short inline quotation
Abbreviation and acronyms
<abbr>
..
</abbr>
The title attribute provides the long version of the shortened term, as shown in this
example: <
abbr title="Points">pts.</abbr>
Useful for screen readers
Citations
<cite>
...
</cite>
Rendered in italic text by default
Defining terms
<dfn>
...
</dfn>
Point out the fist and defining instance
Program code elements
<code>
..
</code>
Code
<var>
..
<var>
Variable
<samp>
...
</samp>
Sample
<kbd>
...
<kbd>
User-entered keyboard strokes
Subscript and superscript
<sub>
...
</sub>
Subscript
<sup>
...
</sup>
Superscript
Highlighted text
<mark>
...
</mark>
Contextually relevant text
Dates and times
<time datetime="2015-07-19T08:00:00-05:00">
July 19, 2015, 8am, Providence RI
</time>
A 'T' always precedes time information, + or - hours ahead or behind Greenwich Mean Time
Generic Elements