Inline elements operate in the flow of text, rather than as a block. Some of these are known as inline-block elements, since they behave as blocks in that they can be resized, but still flow with the text. Shown here is a summary of common parent elements.
a abbr b bdi bdo br button cite code del dfn em i img ins kbd map mark meter picture progress q ruby samp script select small span strong sub sup textarea time u var wbr
As with block elements, you probably won’t use all of these in a simple page. In some instances you may use no more than a
(anchor), br
(line break), and img
(image) elements.
The following elements describe a section of text or apply variations its presentation:
abbr
- an abbreviation or acronymb
- bold text used for no given reason: use other elements where possiblebdi
- bi-directional isolation, meaning the enclosed text is displayed in reverse to accommodate the letter order of other languagesbdo
- bi-directional override, allowing the text direction to be set as requiredcite
- title of a quoted work, not the author’s namecode
- computer code, usually displayed in a monospaced fontdel
- text that’s been deleted from a page, usually shown with a line through item
- emphasised text, usually presented in italici
- italic text not covered by preferred cite
, em
, dfn
, mark
or strong
elementsins
- text inserted into an older version of a page, usually shown underlinedkbd
- characters you can press on a keyboard, usually in a monospaced fontmark
- text marked or highlighted, typically shown with a yellow backgroundq
- a short quotation, normally displayed with quote marksruby
- ruby annotation: small text, usually above a word or character, indicating its pronunciation or meaning, as used in Japanese publicationssamp
- sample output from a computer program, usually in a monospaced fontsmall
- text of a lesser importance, shown in a smaller sizespan
- text whose styling is set entirely within a linked stylesheetstrong
- important or strongly emphasised text, typically shown in bold italicsub
- subscript, smaller text below the baseline, as used in fractionssup
- superscript, smaller text above the baseline, as used in fractionstime
- time of day, such as 10.15, usually displayed as normal textu
- unarticulated text that’s styled differently, such as misspelled words or proper names in Chinese: not for underlining, as this would look the same as a linkvar
- a variable in a mathematical expression, usually shown in italicOf these span
is unique, in it doesn’t convey any actual meaning. Like the div
block element, it simply allows you to set an area whose styling is determined by a stylesheet. For this reason you should only use span
if there’s no other suitable element available.
As with similar block elements, these allow the user to interact with a page:
a
- an anchor, such as a clickable link to a location on a page, another page entirely or a website, sometimes including an image to click onbutton
- a clickable button whose action must be created using JavaScriptmap
- an image map, with areas in which the user may click their selectionselect
- a drop-down listtextarea
- a box, sometimes preloaded with content, into which the user can enter their own multi-line textbr
- line break (this element has no closing tag)img
- an image introduced by means of a link to a GIF, JPEG or PNG filemeter
- a static gauge showing a scalar measurement in a given rangepicture
- provides a range of images to suit different display devices by means of several source elements, plus a standard imageprogress
- similar to meter
, but used in conjunction with JavaScript to dynamically display how a task is progressingscript
- this contains JavaScript code or points to a script filewbr
- a word break opportunity, allowing a browser to wrap the text, as necessary, even in the middle of a word (this element has no closing tag)