Compare Revisions

<ul>

Revision 37298:

Revision 37298 by fscholz on

Revision 37299:

Revision 37299 by AndreeaStanciu on

Title:
ul
ul
Slug:
HTML/Element/ul
HTML/Element/ul
Tags:
HTML, HTML:Element, "HTML:Element Reference"
HTML, HTML:Element, "HTML:Element Reference"
Content:

Revision 37298
Revision 37299
n61            <a class=" external" href="http://www.whatwg.org/specn61            <a class="external" href="http://www.whatwg.org/specs
>s/web-apps/current-work/multipage/grouping-content.html#the-ul-el>/web-apps/current-work/multipage/grouping-content.html#the-ul-ele
>ement" rel="external nofollow" target="_blank" title="http://www.>ment" rel="external nofollow" target="_blank" title="http://www.w
>whatwg.org/specs/web-apps/current-work/multipage/grouping-content>hatwg.org/specs/web-apps/current-work/multipage/grouping-content.
>.html#the-ul-element">HTML5, section 4.5.6</a> (<a class=" extern>html#the-ul-element">HTML5, section 4.5.6</a> (<a class="external
>al" href="http://www.w3.org/TR/REC-html40/struct/lists.html#edef->" href="http://www.w3.org/TR/REC-html40/struct/lists.html#edef-UL
>UL" title="http://www.w3.org/TR/REC-html40/struct/lists.html#edef>" title="http://www.w3.org/TR/REC-html40/struct/lists.html#edef-U
>-UL">HTML4.01, section 10.2</a>)>L">HTML4.01, section 10.2</a>)
nn69    <p>
70      Like all other HTML&nbsp;elements, this element supports th
 >e <a href="/en/HTML/Global_attributes" title="en/HTML/Global attr
 >ibutes">global attributes</a>.
71    </p>
nn73      <dt>
74        {{ htmlattrdef("compact") }}{{ Deprecated_inline() }}
75      </dt>
nn77        This Boolean attribute hints that the list should be rend
 >ered in a compact style. The interpretation of this attribute dep
 >ends on the user agent and it doesn't work in all browsers.
78        <div class="note">
79          <strong>Usage note:&nbsp;</strong>Do not use this attri
 >bute, as it has been deprecated: the {{ HTMLElement("ol") }} elem
 >ent should be styled using <a href="/en/CSS" title="en/CSS">CSS</
 >a>. To give a similar effect than the <span style="font-family: C
 >ourier New;">compact</span> attribute, the <a href="/en/CSS" titl
 >e="en/CSS">CSS</a> property <a href="/en/CSS/line-height" title="
 >en/CSS/line-height">line-height</a> can be used with a value of <
 >span style="font-family: Courier New;">80%</span>.
80        </div>
81      </dd>
82    </dl>
83    <dl>
84      <dt>
85        {{ htmlattrdef("type") }}{{ Deprecated_inline() }}
86      </dt>
87      <dd>
88        Used to set the bullet style for the list. The values def
 >ined under <a href="/en/HTML3.2" title="en/HTML3.2">HTML3.2</a> a
 >nd the transitional version of <a href="/en/HTML4.01" title="en/H
 >TML4.01">HTML 4.0/4.01</a> are<span style="font-family: monospace
 >;">:</span>
89        <ul>
90          <li>
91            <code>circle</code>,
92          </li>
93          <li>
94            <code>disc</code>,
95          </li>
96          <li>and <code>square</code>.
97          </li>
98        </ul>
n72          Like all other HTML&nbsp;elements, this element supportn100          A fourth bullet type has been defined in the WebTV inte
>s the <a href="/en/HTML/Global_attributes" title="en/HTML/Global >rface, but not all browsers support it: <code>triangle.</code>
>attributes">global attributes</a>. 
n74        <dl>n
75          <dt>
76            {{ htmlattrdef("compact") }}{{ Deprecated_inline() }}
77          </dt>
78          <dd>
79            This Boolean attribute hints that the list should be 
>rendered in a compact style. The interpretation of this attribute 
> depends on the user agent and it doesn't work in all browsers. 
80            <div class="note">
81              <strong>Usage note:&nbsp;</strong>Do not use this a
>ttribute, as it has been deprecated: the {{ HTMLElement("ol") }}  
>element should be styled using <a href="/en/CSS" title="en/CSS">C 
>SS</a>. To give a similar effect than the <span style="font-famil 
>y: Courier New;">compact</span> attribute, the <a href="/en/CSS"  
>title="en/CSS">CSS</a> property <a href="/en/CSS/line-height" tit 
>le="en/CSS/line-height">line-height</a> can be used with a value  
>of <span style="font-family: Courier New;">80%</span>. 
82            </div>
83          </dd>
84        </dl>
85        <dl>
86          <dt>
87            {{ htmlattrdef("type") }}{{ Deprecated_inline() }}
88          </dt>
89          <dd>
90            Used to set the bullet style for the list. The values
> defined under <a href="/en/HTML3.2" title="en/HTML3.2">HTML3.2</ 
>a> and the transitional version of <a href="/en/HTML4.01" title=" 
>en/HTML4.01">HTML 4.0/4.01</a> are<span style="font-family: monos 
>pace;">:</span> 
91            <ul>
92              <li>
93                <code>circle</code>,
94              </li>
95              <li>
96                <code>disc</code>,
97              </li>
98              <li>and <code>square</code>.
99              </li>
100            </ul>
101            <p>
102              A fourth bullet type has been defined in the WebTV 
>interface, but not all browsers support it: <code>triangle.</code 
>> 
103            </p>
104            <p>
105              If not present and if no <a href="/en/CSS" title="e
>n/CSS">CSS</a> {{ cssxref("list-style-type") }} property does app 
>ly to the element, the user agent decide to use a kind of bullets 
> depending on the nesting level of the list. 
106            </p>
107            <div class="note">
108              <strong>Usage note:</strong> Do not use this attrib
>ute, as it has been deprecated: use the <a href="/en/CSS" title=" 
>en/CSS">CSS</a> {{ cssxref("list-style-type") }} property instead 
>. 
109            </div>
110          </dd>
111        </dl>
112        <h2>
113          DOM Interface
114        </h2>
n116          This element implements the <code><a href="/en/DOM/HTMLn103          If not present and if no <a href="/en/CSS" title="en/CS
>UListElement" title="en/DOM/HTMLUListElement">HTMLUListElement</a>S">CSS</a> {{ cssxref("list-style-type") }} property does apply t
>></code> interface.>o the element, the user agent decide to use a kind of bullets dep
 >ending on the nesting level of the list.
nn105        <div class="note">
106          <strong>Usage note:</strong> Do not use this attribute,
 > as it has been deprecated: use the <a href="/en/CSS" title="en/C
 >SS">CSS</a> {{ cssxref("list-style-type") }} property instead.
107        </div>
108      </dd>
109    </dl>
118        <h2>110    <h2>
111      DOM Interface
112    </h2>
113    <p>
114      This element implements the <code><a href="/en/DOM/HTMLULis
 >tElement" title="en/DOM/HTMLUListElement">HTMLUListElement</a></c
 >ode> interface.
115    </p>
116    <h2>
119          Examples117      Examples
120        </h2>118    </h2>
121        <h3>119    <h3>
122          Simple example120      Simple example
123        </h3>121    </h3>
124        <pre class="brush: html">122    <pre class="brush: html">
n131        <p>n129    <p>
132          Above HTML will output:130      Above HTML will output:
133        </p>131    </p>
134        <ul>132    <ul>
135          <li>first item133      <li>first item
136          </li>134      </li>
137          <li>second item135      <li>second item
138          </li>136      </li>
139          <li>third item137      <li>third item
140          </li>138      </li>
141        </ul>139    </ul>
142        <h3>140    <h3>
143          Nesting list141      Nesting list
144        </h3>142    </h3>
145        <pre class="brush: html">143    <pre class="brush: html">
n149    &lt;ul&gt;n147   &lt;ul&gt;
150      &lt;li&gt;second item first subitem&lt;/li&gt;148     &lt;li&gt;second item first subitem&lt;/li&gt;
149     &lt;li&gt;second item second subitem &lt;!-- Same for the se
 >cond nested unordered list! --&gt;
150     &lt;ul&gt;
151      &lt;li&gt;second item second subitem&lt;/li&gt;151    &lt;li&gt;third item first subitem&lt;/li&gt;
152    &lt;li&gt;third item second subitem&lt;/li&gt;
153    &lt;li&gt;third item third subitem&lt;/li&gt;
154     &lt;/ul&gt;
155     &lt;/li&gt;           &lt;!-- Closing &lt;/li&gt; tag for th
 >e li that contains the third unordered list --&gt;
152      &lt;li&gt;second item third subitem&lt;/li&gt;156     &lt;li&gt;second item third subitem&lt;/li&gt;
153    &lt;/ul&gt;157   &lt;/ul&gt;
154  &lt;/li&gt;                &lt;!-- Here is the closing &lt;/li&158    &lt;/li&gt;                &lt;!-- Here is the closing &lt;/l
>gt; tag --&gt;>i&gt; tag --&gt;
155  &lt;li&gt;third item&lt;/li&gt;159    &lt;li&gt;third item&lt;/li&gt;
156&lt;/ul&gt;160 &lt;/ul&gt;
n158        <p>n162    <p>
159          Above HTML will output:163      Above HTML will output:
160        </p>164    </p>
165    <ul>
166      <li>first item
167      </li>
168      <li>second item <!-- Look, the closing </li> tag is not pla
 >ced here! -->
n162          <li>first itemn
163          </li>
164          <li>second item
165            <ul>
166              <li>second item first subitem170          <li>second item first subitem
171          </li>
172          <li>second item second subitem <!-- Same for the second
 > nested unordered list! -->
173            <ul style="list-style: square;">
174              <li>third item first subitem
n168              <li>second item second subitemn176              <li>third item second subitem
n170              <li>second item third subitemn178              <li>third item third subitem
n173          </li>n181          </li><!-- Closing </li> tag for the li that contains th
 >e third unordered list -->
174          <li>third item182          <li>second item third subitem
nn185      </li><!-- Here is the closing </li> tag -->
186      <li>third item
187      </li>
188    </ul>
177        <h3>189    <h3>
178          Nested &lt;ul&gt; and &lt;ol&gt;190      Nested &lt;ul&gt; and &lt;ol&gt;
179        </h3>191    </h3>
180        <pre class="brush: html">192    <pre class="brush: html">
n193        <p>n205    <p>
194          Above HTML will output:206      Above HTML will output:
207    </p>
208    <ul>
209      <li>first item
210      </li>
211      <li>second item
212        <ol>
213          <li>second item first subitem
214          </li>
215          <li>second item second subitem
216          </li>
217          <li>second item third subitem
218          </li>
195        </p>219        </ol>
220      </li>
221      <li>third item
222      </li>
223    </ul>
224    <h2>
225      See also
226    </h2>
227    <ul>
228      <li>Other list-related HTML&nbsp;Elements: {{ HTMLElement("
 >ol") }}, {{ HTMLElement("li") }}, {{ HTMLElement("menu") }} and t
 >he obsolete {{ HTMLElement("dir") }};
229      </li>
230      <li>CSS properties that may be specially useful to style th
 >e <span style="font-family: Courier New;">&lt;ul&gt;</span> eleme
 >nt:
n197          <li>first itemn232          <li>the <a href="/en/CSS/list-style" title="en/CSS/list
 >-style">list-style</a> property, useful to choose the way the ord
 >inal is displayed,
233          </li>
198          </li>234          <li>
199          <li>second item235            <a href="/en/CSS_Counters" title="en/CSS_Counters">CS
 >S counters</a>, useful to handle complex nested lists,
200            <ol>
201              <li>second item first subitem
202              </li>236          </li>
203              <li>second item second subitem237          <li>the <a href="/en/CSS/line-height" title="en/CSS/lin
 >e-height">line-height</a> property, useful to simulate the deprec
 >ated {{ htmlattrxref("compact", "ul") }} attribute,
204              </li>238          </li>
205              <li>second item third subitem239          <li>the <a href="/en/CSS/margin" title="en/CSS/margin">
 >margin</a> property, useful to control the indent of the list.
206              </li>
207            </ol>
208          </li>
209          <li>third item
t212        <h2>t
213          See also
214        </h2>
215        <ul>
216          <li>Other list-related HTML&nbsp;Elements: {{ HTMLEleme
>nt("ol") }}, {{ HTMLElement("li") }}, {{ HTMLElement("menu") }} a 
>nd the obsolete {{ HTMLElement("dir") }}; 
217          </li>242      </li>
218          <li>CSS properties that may be specially useful to styl
>e the <span style="font-family: Courier New;">&lt;ul&gt;</span> e 
>lement:&nbsp; 
219            <ul>
220              <li>the <a href="/en/CSS/list-style" title="en/CSS/
>list-style">list-style</a> property, useful to choose the way the 
> ordinal is displayed, 
221              </li>
222              <li>
223                <a href="/en/CSS_Counters" title="en/CSS_Counters
>">CSS counters</a>, useful to handle complex nested lists, 
224              </li>
225              <li>the <a href="/en/CSS/line-height" title="en/CSS
>/line-height">line-height</a> property, useful to simulate the de 
>precated {{ htmlattrxref("compact", "ul") }} attribute, 
226              </li>
227              <li>the <a href="/en/CSS/margin" title="en/CSS/marg
>in">margin</a> property, useful to control the indent of the list 
>. 
228              </li>
229            </ul>
230          </li>
231        </ul>243    </ul>
232        <p>244    <p>
233          {{ HTML:Element_Navigation() }}245      {{ HTML:Element_Navigation() }}
234        </p>246    </p>
235        <p>247    <p>
236          {{ languages( { "de": "de/HTML/Element/ol", "pl": "pl/H248      {{ languages( { "de": "de/HTML/Element/ol", "pl": "pl/HTML/
>TML/Element/ol" } ) }}>Element/ol" } ) }}
237        </p>
238      </dd>
239    </dl>249    </p>

Back to History