An HTML Skeleton
Text Related
Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eleifend quam adipiscing vitae proin sagittis nisl. Id faucibus nisl tincidunt eget nullam. Turpis cursus in hac habitasse platea dictumst quisque. In pellentesque massa placerat duis ultricies lacus. Pulvinar proin gravida hendrerit lectus. Dui vivamus arcu felis bibendum ut tristique. Et netus et malesuada fames ac turpis egestas maecenas pharetra. Risus commodo viverra maecenas accumsan lacus vel facilisis volutpat. Lectus mauris ultrices eros in cursus turpis massa tincidunt dui. Parturient montes nascetur ridiculus mus mauris. Est lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eleifend quam adipiscing vitae proin sagittis nisl. Id faucibus nisl tincidunt eget nullam. Turpis cursus in hac habitasse platea dictumst quisque. In pellentesque massa placerat duis ultricies lacus. Pulvinar proin gravida hendrerit lectus. Dui vivamus arcu felis bibendum ut tristique. Et netus et malesuada fames ac turpis egestas maecenas pharetra. Risus commodo viverra maecenas accumsan lacus vel facilisis volutpat. Lectus mauris ultrices eros in cursus turpis massa tincidunt dui. Parturient montes nascetur ridiculus mus mauris. Est lorem ipsum dolor sit.
Heading 2
A scelerisque Ctrl + C purus semper eget. Aliquam vestibulum morbi blandit cursus risus. Tortor vitae purus faucibus ornare suspendisse. In hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit. Libero volutpat sed cras ornare arcu dui. Nulla malesuada pellentesque elit eget gravida cum sociis natoque. Ut diam quam nulla porttitor massa id neque. Tortor condimentum lacinia quis vel eros donec ac odio. Sit amet consectetur adipiscing elit pellentesque habitant. Porttitor lacus luctus accumsan tortor posuere ac. Risus in hendrerit gravida rutrum. Faucibus interdum posuere lorem ipsum dolor. Ipsum dolor sit amet consectetur adipiscing elit duis tristique. A scelerisque purus semper eget duis at tellus. Duis at tellus at urna condimentum mattis pellentesque id nibh.
Heading 3
Sit amet nulla facilisi morbi. Augue mauris augue neque gravida. Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Mi tempus imperdiet nulla malesuada pellentesque. Vivamus arcu felis bibendum ut tristique et egestas quis. Eu facilisis sed odio morbi. Adipiscing bibendum est ultricies integer quis auctor elit. Et sollicitudin ac orci phasellus egestas. Nullam eget felis eget nunc lobortis mattis aliquam faucibus purus. Porta non pulvinar neque laoreet suspendisse interdum consectetur libero. Ac feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper. Eget nunc scelerisque viverra mauris in aliquam sem. Duis ultricies lacus sed turpis tincidunt id aliquet risus feugiat.
<a> anchor
Visit Example.com for more information.
<abbr> abbreviation
The WHO was founded in 1948.
<cite> citation
The Scream by Edward Munch. Painted in 1893.
<q> short quotation (quote)
WWF's goal is to: Build a future where people live in harmony with nature.
We hope they succeed.
Blockquote (blockquote)
This is a blockquote.
<s> strike-out
Only 50 tickets left! - SOLD OUT!
List Related
<ul> unordered list
- List Item
- List Item
- List Item
<ol> ordered list
- List Item
- List Item
- List Item
<menu> menu
<nav> nav
Definitions (dl, dt, dd)
- Coffee
- Black hot drink
- Milk
- White cold drink
Click
<nav> Anchor (a)
This is a link
<button>
<hr> horizontal rule
Code-related
Here are the HTML tags related to presenting code:
<code>: Defines a piece of computer code.<pre>: Defines preformatted text.<samp>: Defines sample output from a computer program.<kbd>: Defines keyboard input.<var>: Defines a variable.<tt>: Defines teletype text (deprecated in HTML5).
<code>
console.log('Hello, world!');
<pre>
function helloWorld() {
console.log('Hello, world!');
}
<samp>
Output: Hello, world!
<kbd>
Ctrl + C
<var>
x = y + 2;
<tt> (deprecated)
Teletype text
<marquee>
HTML Tags - media-related
img, picture, vidoe, audio, iframe, canvas... etc
Media-related
Here are some HTML tags related to media:
<img>: Embeds an image.<picture>: Contains zero or more<source>elements and one<img>element to provide multiple image formats.<video>: Embeds a video.<audio>: Embeds an audio file.<iframe>: Embeds another HTML page.<canvas>: Used to draw graphics via scripting (usually JavaScript).
Examples:
<img>
<picture>
<iframe>
<iframe> video
<video>
<audio>
<canvas>
Example of <figure> & <figcaption>:
The caption element
| Month | Savings |
|---|---|
| January | $100 |
| February | $50 |
Tables
| Header 1 | Header 2 | Header 3 | Header 4 |
|---|---|---|---|
| Row 1, Cell 1 | Row 1, Cell 2 | Row 1, Cell 3 | Row 1, Cell 4 |
| Row 2, Cell 1 | Row 2, Cell 2 | Row 2, Cell 3 | Row 2, Cell 4 |
| Row 3, Cell 1 | Row 3, Cell 2 | Row 3, Cell 3 | Row 3, Cell 4 |
Forms
Details and Summary
More Information
This is additional information that is hidden by default and can be revealed by clicking on the summary.
More Information
This is additional information that is hidden by default and can be revealed by clicking on the summary.
Details and Summary
More Information
This is additional information that is hidden by default and can be revealed by clicking on the summary.
- Item 1: Detailed description of item 1.
- Item 2: Detailed description of item 2.
- Item 3: Detailed description of item 3.
- Item 4: Detailed description of item 4.
Details and Summary (nested)
More Information 2
This is additional information that is hidden by default and can be revealed by clicking on the summary.
Subsection 1
Details for subsection 1.
Subsection 2
Details for subsection 2.
Subsection 3
Details for subsection 3.
Popover Example (no real html functionality... hmm)
Hover over me
This is the popover content. It appears when you hover over the element.
Anchor Positioning
anchor
target
Dialog Example (modal...) lightbox..
Popover - The popover Attribute
Click the button and it will toggle between showing and hiding the popover element.