Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Revision 979707 of Inline elements

  • Revision slug: Web/HTML/Inline_elmements
  • Revision title: Inline elements
  • Revision id: 979707
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment Clear editorial review flagWeb/HTML/Inline_elemente Web/HTML/Inline_elmements
Tags: 

Revision Content

Summary

HTML (Hypertext Markup Language) elements are usually "inline" elements or "block-level" elements. An inline element occupies only the space bounded by the tags that define the inline element. The following example demonstrates the inline element's influence:

Inline example

HTML

<p>This <span>span</span> is an inline element; its background has been colored to display both the beginning and end of the inline element's influence</p>

CSS

span { background-color: #8ABB55; }

{{ EmbedLiveSample('Inline_example') }}

Inline vs. block-level

Content model
Generally, inline elements may contain only data and other inline elements.
Formatting
By default, inline elements do not begin with new line.

Elements

The following elements are "inline":

See also

Revision Source

 
<h2 id="Summary" name="Summary">Summary</h2>

<p>HTML (Hypertext Markup Language) elements are usually "inline" elements or <a href="/en-US/docs/Web/HTML/Block-level_elements">"block-level" elements</a>. An inline element occupies only the space bounded by the tags that define the inline element. The following example demonstrates the inline element's influence:</p>

<h2 id="Inline_example" name="Inline_example">Inline example</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">
&lt;p&gt;This &lt;span&gt;span&lt;/span&gt; is an inline element; its background has been colored to display both the beginning and end of the inline element's influence&lt;/p&gt;</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: css">
span { background-color: #8ABB55; }
</pre>

<p>{{ EmbedLiveSample('Inline_example') }}</p>

<h2 id="Inline_vs._block-level">Inline vs. block-level</h2>

<dl>
 <dt>Content model</dt>
 <dd>Generally, inline elements may contain only data and other inline elements.</dd>
 <dt>Formatting</dt>
 <dd>By default, inline elements do not begin with new line.</dd>
</dl>

<h2 id="Elements" name="Elements">Elements</h2>

<p>The following elements are "inline":</p>

<ul id="inline-elements">
 <li><a href="/en/HTML/Element/b" title="en/HTML/Element/b">b</a>, <a href="/en/HTML/Element/big" title="en/HTML/Element/big">big</a>, <a href="/en/HTML/Element/i" title="en/HTML/Element/i">i</a>, <a href="/en/HTML/Element/small" title="en/HTML/Element/small">small</a>, <a href="/en/HTML/Element/tt" title="en/HTML/Element/tt">tt</a></li>
 <li><a href="/en/HTML/Element/abbr" title="en/HTML/Element/abbr">abbr</a>, <a href="/en/HTML/Element/acronym" title="en/HTML/Element/acronym">acronym</a>, <a href="/en/HTML/Element/cite" title="en/HTML/Element/cite">cite</a>, <a href="/en/HTML/Element/code" title="en/HTML/Element/code">code</a>, <a href="/en/HTML/Element/dfn" title="en/HTML/Element/dfn">dfn</a>, <a href="/en/HTML/Element/em" title="en/HTML/Element/em">em</a>, <a href="/en/HTML/Element/kbd" title="en/HTML/Element/kbd">kbd</a>, <a href="/en/HTML/Element/strong" title="en/HTML/Element/strong">strong</a>, <a href="/en/HTML/Element/samp" title="en/HTML/Element/samp">samp</a>, <a href="/en/HTML/Element/time">time</a>,&nbsp;<a href="/en/HTML/Element/var" title="en/HTML/Element/var">var</a></li>
 <li><a href="/en/HTML/Element/a" title="en/HTML/Element/a">a</a>, <a href="/en/HTML/Element/bdo" title="en/HTML/Element/bdo">bdo</a>, <a href="/en/HTML/Element/br" title="en/HTML/Element/br">br</a>, <a href="/En/HTML/Element/Img" title="En/HTML/Element/Img">img</a>, <a href="/en/HTML/Element/map" title="en/HTML/Element/map">map</a>, <a href="/en/HTML/Element/object" title="en/HTML/Element/object">object</a>, <a href="/en/HTML/Element/q" title="en/HTML/Element/q">q</a>, <a href="/En/HTML/Element/Script" title="En/HTML/Element/Script">script</a>, <a href="/en/HTML/Element/span" title="en/HTML/Element/span">span</a>, <a href="/en/HTML/Element/sub" title="en/HTML/Element/sub">sub</a>, <a href="/en/HTML/Element/sup" title="en/HTML/Element/sup">sup</a></li>
 <li><a href="/en/HTML/Element/button" title="en/HTML/Element/button">button</a>, <a href="/en/HTML/Element/Input" title="en/HTML/Element/Input">input</a>, <a href="/en/HTML/Element/label" title="en/HTML/Element/label">label</a>, <a href="/en/HTML/Element/select" title="en/HTML/Element/select">select</a>, <a href="/en/HTML/Element/textarea" title="en/HTML/Element/textarea">textarea</a></li>
</ul>

<h2 id="See_also" name="See_also">See also</h2>

<ul>
 <li><a href="/en/HTML/Block-level_elements" title="en/HTML/Block-level_elements">Block-level elements</a></li>
</ul>
Revert to this revision