Keeping Inline Elements In Line

Inline elements are used to mark up a piece of text as being special. They are always included within block elements.

Most inline elements are very similar, and have few attributes. The most commonly used inline elements are those used to mark up phrases.

Name	EM, STRONG, DFN, CODE, SAMP, KBD, VAR, SITE, ABBR, ACRONYM
Usage	Paragraph
Context	This is an inline element
Contents	This element may only contain inline elements and text.
Start-tag	Required
End-tag	Optional
Attributes:
element identifiers
element title
style directives
event handlers
language attributes

Each of these elements has a different semantic meaning, but they have the same syntax and characteristics. EM is used to emphasize a phrase. STRONG is used for stronger emphasis. CITE is used to indicate a citation or reference, such as the title of a text being referred to. DFN is used to mark the defining instance of a term, the first time you mention it in the text. CODE is used to indicate that a fragment of text is computer code. SAMP is used to indicate that a fragment of text is sample output from a computer program. KBD is used to indicate text entered by a user when using a computer. VAR is used to mark up a variable in a computer program.

ABBR is used to indicate an abbreviation. The term enclosed is not spelled out in full but is written using less characters (such as etc., i.e.). ACRONYM is similar, and is used when the enclosed term is an acronym, a series of characters representing a phrase.

<P>
To launch Acme Computer <ABBR>Corp.</ABBR>'s
<ACRONYM>M.O.R.O.N.S.</ACRONYM> manager, enter
<KBD>morons</KBD> at the command prompt. Don't
forget to set your <VAR>MORONS_HOME</VAR> environment 
variable first. You <EM>must</EM> remember to do this,
otherwise the system <STRONG>will not load</STRONG>.
If everything proceeds correctly, you should see the 
message <SAMP>M.O.R.O.N.S. Starting Up...</SAMP> on 
your screen. When the manager loads, you will see the 
<DFN>sequencer prompt</DFN>, where commands are entered. 
The command you must execute is <CODE>set UR_MORONS=true</CODE>.
More information can be found in the <CITE>Acme Sequencer 
Manager Operations Manual</CITE>.
</P>

To launch Acme Computer Corp.'s M.O.R.O.N.S. manager, enter morons at the command prompt. Don't forget to set your MORONS_HOME environment variable first. You must remember to do this, otherwise the system will not load. If everything proceeds correctly, you should see the message M.O.R.O.N.S. Starting Up... on your screen. When the manager loads, you will see the sequencer prompt, where commands are entered. The command you must execute is set UR_MORONS=true. More information can be found in the Acme Sequencer Manager Operations Manual.

The only inline element I have told you about before this tutorial is A. We covered most of its use in the previous tutorial.

Name	A
Usage	Anchor identifying a hyperlink head or tail
Context	This is an inline element
Contents	May contain other inline elements and text but not other `A` elements.
Start-tag	Required
End-tag	Required
Attributes:
element identifiers
element title
style directives
event handlers
language attributes
frame target
accessibility attributes
HREF	URI	URI of linked resource
REL	Link Type	Forward relation of linked resource with document
REV	Link Type	Reverse relation of linked resource with document
MEDIA	Media	Media for which the resource applies
HREFLANG	Language Code	Language of linked resource
TYPE	Content Type	Advisory content type of linked resource
NAME	Name	Name of fragment enclosed by anchor

The Q element is the inline equivalent of the BLOCKQUOTE element. It is used when quoting a small portion of text that should not be considered a separate block. Normally, visual user agents should insert proper quotation marks (depending on the language the text is in) around the quotation. Note that most user agents available now do not do this automatically.

Name	Q
Usage	Inline Quotation from another text
Context	This is an inline element
Contents	This element may contain inline elements.
Start-tag	Required
End-tag	Required
Attributes:
element identifiers
element title
style directives
event handlers
language attributes
CITE	URI	URI of the document the quotation originates from

The CITE attribute works as with the BLOCKQUOTE attribute. You can nest Q elements so that you can have quotes within quotes. Here is an example of Q usage:

<P>So then he said to me, <Q>You know, Pippis, 
this column of yours wouldn't be half bad if you 
took it more seriously.</Q> To which I replied, 
<Q>My vocabulary does not include the word 
<Q>serious</Q> or any of its derivatives.</Q></P>

This example will probably not be rendered correctly with any current browser, so here is how it should appear on a browser conforming to HTML:

So then he said to me, "You know, Pippis, this column of yours wouldn't be half bad if you took it more seriously." To which I replied, "My vocabulary does not include the word 'serious' or any of its derivatives."

An important thing to remember when dealing with inline elements is the need for proper nesting that I mentioned in the first tutorial. Sometimes, it might seem like it makes sense to have an inline element span more than one block elements, for instance if the last sentence of one paragraph and the first sentence of the next paragraph are both emphasized. To accomplish this, you should end the first EM element in the first paragraph, and start a new one in the next paragraph.

You now have a large palette of elements to use in your documents. A good exercise to see how these work would be to take a document and try to mark it up so that it has as much information in the markup as possible. Try adding links, meta-information and phrase markup. We have not yet covered the more specialised elements in HTML that are used to represents such things as tables and lists, but we will soon. Stay tuned to HTML with Style for all the elements you could ever want.

URL: https://www.webreference.com/html/tutorial3/3.html
Created: June 25, 1998
Revised: June 25, 1998

Keeping Inline Elements In Line

Find a programming school near you