Keeping Inline Elements In Line | WebReference

Keeping Inline Elements In Line

Front Page12345

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.

NameEM, STRONG, DFN, CODE, SAMP, KBD, VAR, SITE, ABBR, ACRONYM
UsageParagraph
ContextThis is an inline element
ContentsThis element may only contain inline elements and text.
Start-tagRequired
End-tagOptional
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.

NameA
UsageAnchor identifying a hyperlink head or tail
ContextThis is an inline element
ContentsMay contain other inline elements and text but not other A elements.
Start-tagRequired
End-tagRequired
Attributes:
element identifiers
element title
style directives
event handlers
language attributes
frame target
accessibility attributes
HREFURIURI of linked resource
RELLink TypeForward relation of linked resource with document
REVLink TypeReverse relation of linked resource with document
MEDIAMediaMedia for which the resource applies
HREFLANGLanguage CodeLanguage of linked resource
TYPEContent TypeAdvisory content type of linked resource
NAMENameName 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.

NameQ
UsageInline Quotation from another text
ContextThis is an inline element
ContentsThis element may contain inline elements.
Start-tagRequired
End-tagRequired
Attributes:
element identifiers
element title
style directives
event handlers
language attributes
CITEURIURI 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.

Front Page12345

http://www.internet.com

Produced by Stephanos Piperoglou

All Rights Reserved. Legal Notices.

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