This course will become read-only in the near future. Tell us at community.p2pu.org if that is a problem.

Inline Elements


Learning Objectives

  • Describe 'inline' in the context of a hypertext document
  • Choose a public website and label several inline elements
  • Choose two of the inline HTML elements and describe a common usage for each
  • Demonstrate the proper usage of at least 3 different inline HTML elements

Task Material

HTML uses inline elements to mark data such as citations, computer code, images, and links. Inline elements cannot be placed directly in the <body> but should be nested within a block element, such as <p>.

We have already covered the anchor tag <a>, which is one of the inline elements, in a previous section. There are many other commonly used inline elements. Inline elements can be divided into two general types;

  • Phrase elements that act to mark a word or phrase
  • Presentation elements that affect the display of the element

Although there are presentation markup elements, it is advisable to use CSS for presentation and rely on HTML specifically for semantic markup.

Phrase Elements

<em> and <strong>

Stress emphasis <em> and importance<strong> are used to indicate emphasis. Stress emphasis is recommended as a marker for text that would be stated with linguistic emphasis (such as rate of speech or intonation). Use <strong> for text with strong importance, where a speaker might not alter their voice.

<p>Beans are <em>really</em> good for you. They are great for your <strong>heart and soul</strong>.</p>

<cite>

Often it is necessary to cite <cite> the source of a statement or idea. Sources for the <cite> tag are usually literary such as a book, play, website, newspaper, article, etc.

<p>I'm 17 years old. I'm not a straight-A
student or anything. Even so, I figured
out how to make an Internet that they
can't wiretap. I figured out how to jam
their person-tracking technology. I can
turn innocent people into suspects and
turn guilty people into innocents in
their eyes. I could get metal onto an
airplane or beat a no-fly list. I
figured this stuff out by looking at
the web and by thinking about it. If I
can do it, terrorists can do it. They
told us they took away our freedom to
make us safe. Do you feel safe? 
<cite>Little Brother by Cory Doctorow</cite></p>

<q>

Inline quotations can be marked with the <q> tag. These quotations generally involve people rather than literary works.

<p>Tim Berners-Lee said <q>What's very important from my point of view is that there is one web … Anyone that tries to chop it into two will find that their piece looks very boring.</q></p>

<dfn>

Sometimes we need to offer a definition for a term. The <dfn> tag is used for this purpose.

<address>

We use the <address> tags when displaying a physical address such as a mailing address.

<address>
123 Main Street<br/>
Anytown<br/>
</address>

<del>

The <del> tag  is used to show that text is no longer relevant in a document without actually removing the text. This is typically accomplished via a "strike through" line drawn across the text.

<p>Cats are great pets. Cats eat <del>vegetables</del> small animals.</p>

Further Reading

There are several more inline HTML elements. The following sites offer further details:

Task

  1. Create a document at HTMLpad using the elements introduced in this task.
  2. Use additional markup from previous tasks as desired and/or necessary.
  3. Post the link to your creation on this forum for review and credit :-)

Task Discussion


  • skullkandy09   Dec. 19, 2011, 7:54 a.m.

    Here's mine, though mine seems lacking in aesthetics. How do you add backgrounds and sections? 

    http://pastebin.com/C2TGZwEP

  • Anonym   Jan. 10, 2012, 5:58 p.m.
    In Reply To:   skullkandy09   Dec. 19, 2011, 7:54 a.m.

    Sorry for the delayed response.  I edited your file.  You can see the result here:

    http://htmlpad.org/jose/

    You style your page with CSS within the <style> tag, which I added.  You shouldn't use the header elements (h1, h2, ..., h6) for the purpose of writing in bold letters.  The header elements are for titles and subtitles.

    Nex time you post your work, please give us the link to your live page.  Thanks 

  • alcinoe   Dec. 9, 2011, 1:20 a.m.

     

    Here's mine:
     
     
    Let me know if anyone find any errors or typos.
     
    Elizabeth
  • Vita   Dec. 9, 2011, 10:56 a.m.
    In Reply To:   alcinoe   Dec. 9, 2011, 1:20 a.m.

    Love the explanations and the examples love even more.... Very understandable and clean...Amazing job Elizabeth...!!! Compliments! smiley

  • alcinoe   Dec. 9, 2011, 8:24 p.m.
    In Reply To:   Vita   Dec. 9, 2011, 10:56 a.m.

    Thank you very much, Vita!

  • AndyBKK   Jan. 14, 2012, 1:37 a.m.
    In Reply To:   alcinoe   Dec. 9, 2011, 1:20 a.m.

    Hey Elizibeth, This is excellent! It is very clear to read and I like your exmples. 

     

    Andy 

  • Dar   March 2, 2012, 1:42 p.m.
    In Reply To:   alcinoe   Dec. 9, 2011, 1:20 a.m.

    Clear and really easy to understand. I love it. Plus you have a great sense of humor!

  • alcinoe   April 24, 2012, 11:19 a.m.
    In Reply To:   AndyBKK   Jan. 14, 2012, 1:37 a.m.

    Thanks, Andy!

  • alcinoe   April 24, 2012, 11:20 a.m.
    In Reply To:   Dar   March 2, 2012, 1:42 p.m.

    I'm glad that you liked it, Dar!

  • Vita   Dec. 1, 2011, 5:56 a.m.
  • joe palmer   Dec. 1, 2011, 7:30 a.m.
    In Reply To:   Vita   Dec. 1, 2011, 5:56 a.m.

    yes

  • Vita   Dec. 1, 2011, 8:41 a.m.
    In Reply To:   joe palmer   Dec. 1, 2011, 7:30 a.m.

    Thank you, Joe.

  • Jo Meyertons   Nov. 7, 2011, 5:41 p.m.

    Here's my little sample. Note the code tag doesn't seem to work to display actual code, but it does change the font. Not that useful, I guess. http://htmlpad.org/jomeyertons/

  • altivium   Nov. 7, 2011, 10:08 p.m.
    In Reply To:   Jo Meyertons   Nov. 7, 2011, 5:41 p.m.

    what should it do?

  • Jo Meyertons   Nov. 8, 2011, 7:13 p.m.
    In Reply To:   altivium   Nov. 7, 2011, 10:08 p.m.

    It should allow me to type in the code, in a different font, without rendering it. Seems as though it changes the font, but doesn't show the code.

  • jenEliz   Oct. 20, 2011, 7:32 p.m.

    The Witches in the News web page contains the following inline elements:

    • < div >
    • < q >
    • < cite >

     

    Suggestions/questions welcome!