Marking up textual content

Headings and paragraphs

element <p>
represents a paragraph; usually represented in visual media by blocks of text that are physically separated from adjacent blocks through blank lines.
elements <h1>…<h6>
represent headings for their sections. These elements have a rank given by the number in their name. The h1 element has the highest rank, the h6 element has the lowest rank, and two elements with the same name have equal rank. h1–h6 elements must not be used to markup subheadings, subtitles, alternative titles and taglines unless intended to be the heading for a new section or subsection. Assistive technology often announces the presence and level of a heading to users, as a hint to understand the structure of a document and construct a 'mental model' of its outline —more at whatwg.org

Output

Code


<!-- Headings and paragraphs -->
<h2>Chapter III</h2>
<h3>How Dorothy saved the Scarecrow.</h3>
<p>Dorothy was left alone she began to feel hungry. 
So she went to the cupboard and cut herself some bread, 
which she spread with butter. She gave some to Toto, 
and taking a pail from the shelf she carried it down to 
the little brook and filled it with clear, sparkling water. 
Toto ran over to the trees and began to bark at the birds 
sitting there. Dorothy went to get him, and saw such 
delicious fruit hanging from the branches that she 
gathered some of it, finding it just what she wanted to 
help out her breakfast.</p>
<p>Then she went back to the house, and having helped[Pg 32] 
herself and Toto to a good drink of the cool, clear water, 
she set about making ready for the journey to the City 
of Emeralds.
</p>

headings-paragraphs.html (full code)

Emphasis and importance

element <em>
represents stress emphasis of its contents. The level of stress that a particular piece of content has is given by its number of ancestor em elements. The placement of stress emphasis changes the meaning of the sentence. The element thus forms an integral part of the content. The precise way in which stress is used in this way depends on the language.

Read more —HTML specs

element <strong>
represents strong importance, seriousness, or urgency for its contents.

Read more —HTML specs

Example

Output

Code


<!-- emphasizing words and phrases -->
<p>
    If you need to emphasize a word or a particular fact in 
    a sentence, you can use italics to stress it. That said, 
    italics and other font changes lose their impact if 
    overused. Use it sparingly and rely on strong writing and 
    <em>strategic word placement</em> 
    to get your point across.
</p>

<p>
    Boldface fonts can be used sparsely to draw attention 
    to words or short phrases, and are most often seen in 
    business writing. 
    <strong>
        Using boldface for emphasis is not appropriate for 
        academic writing.
    </strong>
</p>

emphasis-importance.html (full code)

More examples

Italic, bold, and underline

The elements <b>, <i>, and <u> came about so people could write bold, italics, or underlined text in an era when CSS was still supported poorly or not at all. They only affect presentation and not semantics, are known as presentational elements and should no longer be used [MDN], because semantics is so important to accessibility, SEO, etc. The concept of italics isn't very helpful to people using screen readers, or to people using a writing system other than the Latin alphabet.

The elements <b>, <i>, and <u> is presentational markup Presentational markup in general has been found to have problems: leads to poorer accessiblity, higher cost of maintenance, and larger document sizes. [1.11.1 Presentational markup, HTML Living Standard]

Example

Output

Code


<!-- scientific names -->
<p>	
  The snow goose (<i>Anser caerulescens</i>),
  consisting of both a white morph and dark morph,
  is a North American species of goose. Its name 
  derives from the typically white plumage.
</p>
<!-- foreign words -->
<p>	
  The menu was a sea of exotic words like 
  <i lang="uk-latn">vatrushka</i>,
  <i lang="id">nasi goreng</i> and 
  <i lang="fr">soupe à l'oignon</i>.
</p>

italic.html (full code)

More examples (from HTML Living Standard)

4.5.21 The b element The b element 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.


<!-- shows a use of the b element to highlight key words without marking them up as important: -->
<p>	
  The <b>frobonitor</b> and <b>barbinator</b> components are fried.
</p>
<!-- objects in a text adventure are highlighted as being special by use of the b element -->
<p>	
  You enter a small room. Your <b>sword</b> glows
  brighter. A <b>rat</b> scurries past the corner wall.
  </p>
<!-- Another case where the b element is appropriate is in marking up the lede (or lead) sentence or paragraph. -->
<p>	
<article>
 <h2>Kittens 'adopted' by pet rabbit</h2>
 <p><b class="lede">Six abandoned kittens have found an
 unexpected new mother figure — a pet rabbit.</b></p>
 <p>Veterinary nurse Melanie Humble took the three-week-old
 kittens to her Aberdeen home.  
</p>
[…]

4.5.20 The i element The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, transliteration, a thought, or a ship name in Western texts.


<!-- taxonomy -->
<p>	
  The <i class="taxonomy">Felis silvestris catus</i> is cute.
</p>
<!-- term -->
<p>	
  The term <i>prose content</i> is defined above.
  </p>
<!-- language -->
<p>	
  There is a certain <i lang="fr">je ne sais quoi</i> in the air. 
</p>

4.5.22 The u element The default rendering of the u element in visual presentations clashes with the conventional rendering of hyperlinks (underlining). Authors are encouraged to avoid using the u element where it could be confused for a hyperlink.

Quotations and citations

The <q> element
indicates that the enclosed text is a short inline quotation. Most modern browsers implement this by surrounding the text in quotation marks.
Citation element <cite>
is used to describe a reference to a cited creative work, such as book, movie, painting, etc., and must include the title of that work. —MDN

Example

Output

Code


<!-- quotations marks around quotation -->

<q>All we have to decide is what to do with 
    the time that is given us.</q>
<br>

<!-- defines the title of a work, not person's name  -->

—J.R.R Tolkien, <cite>The Fellowship of the Ring</cite>

Abbreviation and definitions

Inline text semantics

The <dfn> element
represents the defining instance of a term, often the first use of a term in a document. The nearest parent of the <dfn> tag must also contain the definition (explanation) for the term. —w3schools
The <abbr> element
An abbreviation or an acronym are both shortened versions of something else. Both are often represented as a series of letters. Use the global title attribute to show the description of the abbreviation, or acronym, when you mouse over the <abbr> element. —w3schools

Example

Output

Code


<!-- definition, abbreviation, acronym -->
<p>
    <dfn>
        <abbr title="HyperText Markup Language">HTML</abbr>
    </dfn>
    is the standard markup language for creating web pages.
</p>
<p><abbr title="laughing my arms off">LMAO</abbr>
<br><abbr title="rolling on the floor laughing">ROFL</abbr>
<br><abbr title="laughing and shaking my head">LSMH</abbr></p>

inline-abbr-dfn.html (full code)

Contact details

Element <address>
represents the contact information for its nearest article or body element ancestor. The address element must not be used to represent arbitrary addresses, unless those addresses are in fact the relevant contact information. The address element must not contain information other than contact information. Typically, the address element would be included along with other information in a footer element. W3C Spec

Example

Output

Code


<!-- contact information -->
<address>	
Written by Charlie Chaplin.<br> 
Visit us at:<br>
somesite.ca<br>
123 Any Street<br> 
Anytown, postalcode
</address

contact-details.html (full code)

Superscript and subscript

Highlights

Element <sub>
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 H2O.
Element <sup>
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].

Example

Output

Code


<!-- comment -->
<p>
Water is the chemical substance with chemical formula 
H<sub>2</sub>O; 
one molecule of water has two hydrogen atoms covalently 
bonded to a single oxygen atom.<sup>[24]</sup> 
Water is a tasteless, odorless liquid at ambient temperature 
and pressure.
</p>
<hr>
<p title="footnote">[24] Campbell, 
     Williamson & Heyden 2006.</p>

More examples

super-sub-formula.html (full code)

Computer code

Highlights

element <code>
defines a fragment of computer code. does not preserve extra whitespace and line-breaks.
element <var>
defines a variable. The variable could be a variable in a mathematical expression or a variable in programming context.
element <samp>
represents output from a program or computing system.
element <kbd>
represents user input, like keyboard input or voice commands

Example

Output

Code


<!-- var -->
<p>In physics, mass–energy equivalence is the principle 
that anything having mass has an equivalent amount of energy 
and vice versa, with these fundamental quantities directly 
relating to one another by Albert Einstein's famous 
formula:<p>
<p>
    <var>E</var> = <var>mc</var><sup>2</sup>.	
</p>

More examples

code-samp-kbd.htm

Time and date

Highlights

The <time> element
represents its contents, along with a machine-readable form of those contents in the datetime attribute. The kind of content is limited to various kinds of dates, times, time-zone offsets, and durations. The datetime attribute may be present. If present, its value must be a representation of the element's contents in a machine-readable format. A time element that does not have a datetime content attribute must not have any element descendants. W3C Spec

Example

Output

Code


<!-- comment -->
<p>
<time>2011-11-18</time>	
</p>

time-date.html (full code)

Demarcating edits

Highlights

The <del> element
The <ins> element

Example

Output

Code


<!-- comment -->
<p><del>This phrase is removed.</del>
<ins>It is replaced by this phrase.</ins>	
</p>

demarcating-edits.html (full code)

Block quotes and preformatted text

The <pre> element
defines preformatted text. preserves whitespace and line-breaks.
The <blockquote> element
specifies a section that is quoted from another source. Use q for inline (short) quotations.

Example

Output

Code


<!-- Imagine by -->
<pre> 
            Imagine there's no heaven
            It's easy if you try
            No hell below us
            Above us only sky
            Imagine all the people
            Living for today...

        Imagine there's no countries
          It isn't hard to do
          Nothing to kill or die for
          And no religion too
          Imagine all the people
          Living life in peace...

        You may say I'm a dreamer
        But I'm not the only one
                I hope someday you'll join us
                And the world will be as one
</pre>

preformatted-text.html (full code)

Output

Code


<!-- text art -->
<p>using p element</p>
<p>
      /'^'\
     ( o o )
-oOOO--(_)--OOOo-

  .oooO
  (   )  Oooo.
---\ (---(   )---
    \_)   ) /
         (_/
</p>         
<p>using pre element</p>
<pre>
      /'^'\
     ( o o )
-oOOO--(_)--OOOo-

  .oooO
  (   )  Oooo.
---\ (---(   )---
    \_)   ) /
         (_/	 
</pre>

text-art.html (full code)