width - Tutorial of the Width attribute from Structure in HTML with Web Standards | HTML Elements

Site Navigation

Elements :
Attributes Navigation

Some section names have been taken from HTML 5; some remain HTML 4.01. Text-Level Elements in HTML 4.01 - have become Text-Level Semantics in HTML 5 but some were reclassified as Grouping or Phrasing Content; List elements are Grouping Content but shown here as “Lists”.

width

The width attribute gives a width dimension. It may be found assigned with the following: applet, col, colgroup, embed, hr, iframe, input, img, object, pre, table, td, th, video.

The value does not include measurement units, e.g., px; integers only.

[Note: HTML 5 has obsoleted height use for the applet, col, colgroup, hr, pre, table, td and th elements.]

Attribute name:: width
Value:: Non-Negative Integers

Example [Basic (Image)]:

Code [HTML]:


<figure>
<img src="/images/tutorials/ophelia.jpg" height="218" width="300" alt="Ophelia by John Everett Millais">
<figcaption>Ophelia by John Everett Millais</figcaption>
</figure>

Example [Basic (Object)]:

Burlesque Poster

[This is not an actual Flash file. But, if it was—it would be the short-subject of Rose Heavenly performing “Ophelia” by John Everett Millais with Jazz Combo musical accompaniment.]

Code [HTML]:


<p>
     <object classid="clsid:D27CDB3E-AE6D-11cf-95B8-444553540000"; 
     codebase="http://download.ophelia-mermaid-like.com/pub/shockwave/cabs/flash/
     swflash.cab#version=6,0,29,0" width="500" height="313">
          <param name="movie" value="flash.swf">
          <param name="quality" value="high">
          <param name="width" value="500">
          <param name="height" value="313">
          <param name="play" value="true">
          <param name="loop" value="true">
          <param name="menu" value="false">
          <param name="scale" value="noorder">
          <param name="wmode" value="transparent">

<embed src="flash.swf" quality="high" pluginspage="http://www.heavenlybodies.com/
go/getflashplayer" type="application/x-shockwave-flash" width="500" height="313"></embed>
     </object> 
</p>

Example [Basic (CSS)]:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel risus ante. Mauris posuere pellentesque dui, ut pretium erat pharetra vel.

Code [HTML]:


<div id="thinColumnDiv">
<p id="thinColumnParagraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. » 
In vel risus ante. Mauris posuere pellentesque dui, ut pretium erat pharetra vel.</p>
</div>

Code [CSS]:


div#thinColumnDiv {
   width:10px; 
}
p#thinColumnParagraph {
   width:100%; 
}

Elementary Standards HTML Tutorial

Site Navigation

Elements : Attributes Navigation

Elements :
Attributes Navigation