<h1> This is the main section heading.
On this site, it's used as the title of the page.
<h2> This is the second level page heading
Used as a section heading beneath the main heading.
<h3> This is the third level page heading
Used as a heading beneath the second level heading.
<h4> This is the fourth level page heading
Used as a heading beneath the fourth level heading.
<h5> This is the fifth level page heading
Not typically used on this site.
<h6> This is the sixth level page heading
Not typically used on this site.
This is a paragraph. Paragraphs are wrapped in
No way. First, I'm gonna fall in love with one of those little guys, and then I'm gonna fall out of love.
And then I'm gonna totally fake die, of a fake heart attack!
<strong> tags are wrapped round text that is important.
Emphasised textFor emphasis, the
<em>tag is used.
Asides are marked up using the <aside> tag. They can be used for content considered separate from the page content.
Abbreviations are marked up using the
<abbr> tag. To mark up an abbreviation like LSP, this code is used:
<abbr title="Lumpy Space Princess">LSP</abbr>
This is a link, it is marked up like this:
<a href="">Link Text<a>.
<blockquote> tag can be wrapped round a paragraph that is a quote. A
<cite> can be added after the quote. This isn't strictly the correct use of the tag because it doesn't allow for someone's name, but there isn't a suitable alternative for encapsulating a reference to a work and a person's name.
Slaps, that cat was kicking my buns. And it might of finished my buns it if wasn't for Jake's stank
Finn the human
<blockquote> <p>Slaps, that cat was kicking my buns. And it might of finished my buns it if wasn't for Jake's stank</p> <p><cite>Finn the human</cite></p> </blockquote>
Ordered List: Top 3 Princesses in Adventure Time
- Princess bubblegum
- Hot dog princess
- Lumpy space princess
Unordered List: Places in the Land of Ooo
- Cloud Kingdom
- Candy Kingdom
- Lumpy Space
Nested Ordered List: Characters in Adventure Time
- King Worm
Nested Unrdered List: Characters in Adventure Time
- King Worm
An important image should be wrapped in a
<figure> tag. For this tag to be used, it must still make sense if the figure were separated from the document.
<figure> <img src="/perch/resources/imageexample1.png" alt="Picture of Finn and Jake from Adventure time doing a fist-bump." /> <figcaption>A picture from Adventure Time, my favourite cartoon about the adventures of Jake the dog and Finn the human.</figcaption> </figure>
To pull an image to the left, give it a class of
To push it to the right, give it a class of
These classes can also be applied to other elements, such as
alt text needs to describe the image in a way that would be useful to someone if the image failed to load.
Interviews have a small avatar of the people speaking next to what they're saying. This is just an image tag. The
alt="" is left empty because the image isn't essential to the understanding of the text, and the name would be repeated.
I chose to use a
<b> tag for the name because it seemed appropriate based on the new interpretation of the tag.
TheHTML, the living standard by WHATWG
belement represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood, such as key words in a document abstract, product names in a review, actionable words in interactive text-driven software, or an article lede.
The image only needs to be added to the first paragraph of many spoken by the same person, until the person speaking changes.
Marcus: Hello Paul, how are you? I’ll be very amazed if this is a very small mini-micro boagworld because they never are!
<img class="avatar" src="/perch/resources/avatarmarcuslillington-.jpg" alt=""/><p><b>Marcus</b>: Hello Paul, how are you? I’ll be very amazed if this is a very small mini-micro boagworld because they never are!</p>
A ver small snippet of code can be marked up using just the
<code> tags. If it's a longer snippet, use the following:
<pre class="example"><code><p>Hello world</p></code></pre>
Code will need to be written using less than & lt; and greater than & gt; encoding (without the space after the ampersand).
Interview articles have audio. This can be embedded using the
<audio> tag. This displays a media player in modern browsers. In older browsers, we need a fallback, which will just be a link to the file.
All large media files like audio and video are hosted on Amazon S3.
<h2>Listen to the interview</h2> <audio controls="controls"> <source src="http://s3.amazonaws.com/scrunchup/brian-suda-designing-with-data.ogg" type="audio/ogg" /> <source src="http://s3.amazonaws.com/scrunchup/brian-suda-designing-with-data.mp3" type="audio/mp3" /> <a href="http://s3.amazonaws.com/scrunchup/brian-suda-designing-with-data.mp3">Listen to this interview (.mp3, 7.4MB)</a> </audio>