TEXT TAGS

NCD HTML Design Guide v6.0

Sponsor's ADs:

+ Paragraph

Paragraph <p> 

<p>This is a first paragraph. 
<p>This is a second paragraph.

This is a first paragraph.

This is a second paragraph.



Paragraph Alignment
<p align=#> #=left, center, right

<p align=#> #=justify

<p align=left>

This is a first paragraph. This is a great story, isn't it? It is exciting, gorgeous, thrilling, fantastic, and romantic!

<p align=center>

This is a first paragraph. This is a great story, isn't it? It is exciting, gorgeous, thrilling, fantastic, and romantic!

<p align=right>

This is a first paragraph. This is a great story, isn't it? It is exciting, gorgeous, thrilling, fantastic, and romantic!

<p align=justify>

This is a first paragraph. This is a great story, isn't it? It is exciting, gorgeous, thrilling, fantastic, and romantic!




+ Quotation

<blockquote>...</blockquote> 

Her Song:
<blockquote>
When I was young, 
I listened to the radio 
waiting for my favorite songs....
</blockquote>
 Her Song:
When I was young, I listened to the radio waiting for my favorite songs....


+ Line Break

Break Line <br> 

How are you?<br>I'm fine.
 How are you?
I'm fine.


No Break <nobr>
Soft Break <wbr> 

<nobr> 
Close your browser window width, and find how this tag will work!
This is exciting ... <wbr>and romantic!
</nobr>
Close your browser window width, and find how this tag will work! This is a first paragraph. This is a great story, isn't it? It is exciting, gorgeous, thrilling, fantastic, and romantic!


+ Centering

<center>...</center> 

<center>Hello</center>
Hello



+ Grouping Elements

Division (grouping for text block)     <div> ... </div> 

<div class="section">
<H1>1. First Step</H1>
In this section, you have to....
<div class="subsection">
<H2>1-1. Music</H2>
Music is a important language.... 
</div>
</div>

1. First Step

In this section, you have to....

1-1. Music

Music is a important language....


Division Alignment
<div align=#> #=left, center, right

<div align=#> #=justify

<left>

This is a first paragraph. This is a great story, isn't it? It is exciting, gorgeous, thrilling, fantastic, and romantic!

<center>

This is a first paragraph. This is a great story, isn't it? It is exciting, gorgeous, thrilling, fantastic, and romantic!

<right>

This is a first paragraph. This is a great story, isn't it? It is exciting, gorgeous, thrilling, fantastic, and romantic!

<justify>

This is a first paragraph. This is a great story, isn't it? It is exciting, gorgeous, thrilling, fantastic, and romantic!


Span (grouping for word)     <span> ... </span> 

PHONE: 
<span class="phone">
000-0000000
</SPAN>
PHONE: 000-0000000


+ Basic Listings

Unordered list <ul><li>...</ul> 

<ul>
<li>Today
<li>Tommorow
</ul>
  • Today
  • Tommorow 

<ul><li>ONE
    <ul><li>TWO
        <ul><li>THREE
</ul></ul></ul>
  • ONE
    • TWO
      • THREE

Ordered lists <ol><li>...</ol> 

<ol>
<li>Today
<li>Tommorow
</ol>
  1. Today
  2. Tommorow 

<ol><li>ONE
    <ol><li>TWO
        <ol><li>THREE
</ol></ol></ol>
  1. ONE
    1. TWO
      1. THREE

Definition lists <dl><dt>...<dd>...</dl> 

<dl>
<dt>Today
<dd>Today is yesterday.
<dt>Tomorrow
<dd>Tomorrow is today.
</dl>
Today
Today will be yesterday.
Tomorrow
Tomorrow will be today.

Directory lists <dir><li>...</dir> 

<dir>
<li>Today
<li>Yesterday
</dir>
  • Today
  • Yesterday

    • Menu lists <menu><li>...</menu> 

    <menu>
<li>Today
<li>Yesterday
</menu>
  • Today
  • Yesterday



    • + Customized listing

    Mark Styles <li type=#> #=disk, circle, square 

    <ul>
<li type=disc>ONE
<li type=circle>TWO
<li type=square>THREE
</ul>
    • ONE
    • TWO
    • THREE


    Capital Letters <li type=#> #=A, a, I, i, 1 

    <ol>
<li type=A>ONE-ONE
<li>ONE-TWO
</ol>
    1. ONE-ONE
    2. ONE-TWO 

    <ol>
<li type=a>ONE-ONE
<li>ONE-TWO
</ol>
    1. ONE-ONE
    2. ONE-TWO 

    <ol>
<li type=I>ONE-ONE
<li>ONE-TWO
</ol>
    1. ONE-ONE
    2. ONE-TWO 

    <ol>
<li type=i>ONE-ONE
<li>ONE-TWO
</ol>
    1. ONE-ONE
    2. ONE-TWO 

    <ol>
<li type=1>ONE-ONE
<li>ONE-TWO
</ol>
    1. ONE-ONE
    2. ONE-TWO



    List started number <ol start=#> #=number 

    <ol start=5>
<li type=A>ONE-ONE
<li>ONE-TWO
	<ol start=10>
	<li>TWO-ONE
	<li type=i>TWO-ONE
</ol></ol>

    1. ONE-ONE
    2. ONE-TWO
      1. TWO-ONE
      2. TWO-TWO

    Definition lists Compact <dl compact>

    <dl compact>
<dt>Today
<dd>Today is yesterday.
<dt>Tomorrow
<dd>Tomorrow is today.
</dl>
    Today
    Today will be yesterday.
    Next
    Tomorrow will be today.



    + Preformatted Text

    <pre>...</pre> 

    <pre>
Please use your card.
VISA    Master
<b>Here is an order form.</b>
<ul><li>Fax
<li>Air Mail</ul>
</pre>
    		 
    Please use your card
VISA    Master
Here is an order form.

    • Fax

    • Air Mail


    <listing>...</listing> 

    <listing>
Please use your card.
VISA    Master
<b>Here is an order form.</b>
<ul><li>Fax
<li>Air Mail</ul>
</listing>
    		 Please use your card VISA Master Here is an order form.
    • Fax
    • Air Mail


    <xmp>...</xmp> 

    <xmp>
Please use your card.
VISA    Master
<b>Here is an order form.</b>
<ul><li>Fax
<li>Air Mail</ul>
</xmp>
    		 Please use your card VISA Master <b>Here is an order form.</b> <ul><li>Fax <li>Air Mail</ul>


    + Comment

    <!-- ... --> 

    CACE 1
<!-- this is a test -->
    		 CACE 1

    <comment>...</comment> 

    CACE 1
<comment>this is a test</comment>
    		CACE 1this is a test


    + Spacer

    <spacer type="horizontal" size=#> #=horizontal space
    <spacer type="vertical" size=#> #=vertical space 

    YESTERDAY 
<pspacer type="horizontal" size=50> TODAY
<spacer type="vertical" size=50> TOMORROW
    YESTERDAY TODAY TOMORROW

    <spacer type="block" width=# height=# align=-->
    #=space size
    --=top, middle, bottom, left, right 

    <spacer type="block" width=150 height=50 align=left>
YESTERDAY<br> TODAY<br> TOMORROW
    YESTERDAY
    TODAY
    TOMORROW


    + Multi-Column Text

    <multicol cols=#> ... </multicol> #=Column Number 

    <multicol cols=2>
text text text...
</multicol>
    text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

    <multicol gutter=#> ... </multicol> #=Space between Columns 

    <multicol cols=2 gutter=100>
text text text...
</multicol>
    text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

    <multicol width=#> ... </multicol> #=Column Width 

    <multicol cols=2 width=400>
text text text...
</multicol>
    text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text


    + Marquee

    Marquee <marquee>...</marquee> 

    <marquee>Hi, Konnichiha!</marquee>
    Hi, Konnichiha!

    Marquee Attributes



    + Text Direction

    <bdo dir="#">...</bdo>     #=ltr, rtl 

    <bdo dir="rtl">
Today is fine! <BR>
!enif si yadoT
</bdo>
    		 Today is fine!
    !enif si yadoT

    + Ruby

    <ruby>
       <rb> #1 </rb>
       <rt> #2 </rt>
       <rp> #3 </rt>
    </ruby>
    #1=Base text, #2=Ruby text, #3=text for unsupported browser 

    <ruby>
   <rb><img src="japanese.gif"></rb>
   <rp> ( </rp>
   <rt>Network Communication Design</rt>
   <rp> ) </rp>
</ruby>
    		( Network Communication Design )

    + Edit & Select Control

    Edit Control
    <div contenteditable="#">     #=true, false 

    <div contenteditable="true">
Today is fine.
Tomorrow will be fine.
</div>
    Today is fine. Tomorrow will be fine. 
    <div contenteditable="false">
Today is fine.
Tomorrow will be fine.
</div>
    Today is fine. Tomorrow will be fine.

    Select Control
    <div unselectable="#">     #=on, off 

    <div unselectable="on">
Today is fine.
Tomorrow will be fine.
</div>
    Today is fine. Tomorrow will be fine. 
    <div unselectable="off">
Today is fine.
Tomorrow will be fine.
</div>
    Today is fine. Tomorrow will be fine.


    HTML Design Guide | Style Sheet Guide
    Document | Page | Font | Text | Image | Form | Table | Frame | Objects | XML
    HTML TAG LIST | PDF Edition

    BACK TO NCD HOME
    Network Communication Design - /
         Copyright & Publishing 1994-2008 Network Communication Design