Editing HTML element (section)

===Content vs. presentation and behavior===

Since HTML 4, HTML has increasingly focused on the separation of content (the visible text and images) from presentation (like color, font size, and layout).<ref>{{Cite web
  |title=HTML & CSS
  |url=http://www.w3.org/standards/webdesign/htmlcss
  |year=2013
  |publisher=[[W3C]]
}}</ref> This is often referred to as a [[separation of concerns]]. HTML is used to represent the structure or content of a document, its presentation remains the sole responsibility of [[CSS]] style sheets. A default [[Style sheet (web development)|style sheet]] is suggested as part of the CSS standard, giving a default rendering for HTML.<ref>{{Cite web
  |title=Appendix D. Default style sheet for HTML 4
  |work=Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
  |date=7 June 2011
  |url=http://www.w3.org/TR/CSS2/sample.html
  |publisher=[[W3C]]
}}</ref>

Behavior (interactivity) is also kept separate from content, and is handled by [[Client-side scripting|scripts]]. Images are contained in separate [[graphics]] files, separate from text, though they can also be considered part of the content of a page.

Separation of concerns allows the document to be presented by different user agents according to their purposes and abilities. For example, a user agent can select an appropriate style sheet to present a document by displaying on a monitor, printing on paper, or to determine speech characteristics in an audio-only user agent. The structural and semantic functions of the markup remain identical in each case.

Historically, user agents did not always support these features. In the 1990s, as a stop-gap, presentational elements (like {{tag|b|o}} and {{tag|i|o}}) were added to HTML, at the cost of creating problems for interoperability and user accessibility. This is now regarded as outmoded and has been superseded by style sheet-based design; most presentational elements are now deprecated.<ref name="HTML401-141">[[#HTML401|HTML 4.01]] §14.1</ref>

External image files are incorporated with the {{tag|img|s}} or {{tag|object|s}} elements. (With [[XHTML]], the [[Scalable Vector Graphics|SVG]] language can also be used to write graphics within the document, though linking to external SVG files is generally simpler.)<ref name="SVG11-23">{{cite web |editor-last1=Ferraiolo |editor-first1=J. |editor-last2=Fujisawa |editor-first2=J. |editor-last3=Jackson |editor-first3=D. |work=Scalable Vector Graphics (SVG) 1.1 Specification |title=§2.3 Options for using SVG in Web pages |publisher=[[W3C]] |date=2003-01-14 |url= http://www.w3.org/TR/2003/REC-SVG11-20030114/ |access-date=2009-03-25}}</ref> Where an image is not purely decorative, HTML allows replacement content with similar semantic value to be provided for non-visual user agents.

An HTML document can also be extended through the use of scripts to provide additional behaviors beyond the abilities of HTML hyperlinks and forms.

The elements {{tag|style|o}} and {{tag|script|o}}, with related [[HTML attributes]], provide style sheets and scripts.
* In the document head, {{tag|style|s}} and {{tag|script|s}} may link to shared external documents, or {{tag|style}} and {{tag|script}} may contain embedded instructions. (The {{tag|link|o}} element can also be used to link style sheets.)
* {{tag|script|s}} or {{tag|script}} can occur at any point in the document (head or body).
* The <code>style</code> attribute is valid in most document body elements (e.g. {{tag|div|o|attribs=style="..."}}) for inclusion of ''inline style'' instructions.
* ''Event-handling attributes'', which provide links to scripts, are optional in most elements.
* For user agents which do not operate scripts, the {{tag|noscript}} element provides embedded alternative content where appropriate; however, it can only be used in the document head and in the body as a block-level element.