Back to the original French page Read this page in Italian by Google Translation Read this page in Portuguese by Google Translation Read this page in English by Google Translation Read this page in German by Google Translation Read this page in Spanish by Google Translation Read this page in Arabic by Google Translation Read this page in Hebrew by Google Translation

Give a semantic structure for web pages

Go to Beginning of content without using the bar Consultation and Sharing How to use the bar Consultation and Sharing Listen to the main content of this page
Print Print the main content of this page Send Email the main content of this page Share Share this page on TwitThis Share this page on Facebook Share this page on Wikio Share this page on Google Share this page on LinkedIn Share this page on Digg Share this page on del.icio.us Share this page on Netvibes

Warning: The original version of this document is Creating Semantic Structure . This French translation was done by Ideose as part of an agreement between WebAIM and Ideose .

Note: See page documents on web accessibility for a list of all translated documents. Other resources on web accessibility are also listed in the portal accessible digital .

The nature of HTML

The authors of HTML were scientists who were seeking a way to share documents on particle physics. They wore little interest in the visual form of the exact document displayed on a computer screen. In fact, HTML was originally designed to meet a separation between content structure and graphic layout. The intention was to create a World Wide Web pages that could be displayed in each existing system and browser - including browsers that "read" text web pages to users with visual impairments - and that could be interpreted by search engines and analysis.

The inventors of the Web does not realize its potential for graphical display. Thus, the HTML was not designed with such considerations. They were so anxious to make the documents used by the machines they produced documents only machines (or particle physicists) would like to read. By focusing solely on the structural logic of the documents, they ignored the need for the visual logic of graphic design and typography. This initial lack of consideration visual Web is causing stress for web designers when they want to get a graphical layout specific to their web pages. This need for formatting is the reason why software companies have begun to navigation ignore the standards of HTML and authorized additional functionality in their browsers.

For example, most designers avoid using standard HTML tags for paragraph headings ( <h1> , <h2> , etc..) because they lack visual subtlety: in most Web browsers, these tags show titles absolutely too large ( <h1> , <h2> ) or ridiculously small ( <h4> , <h5> , <h6> ). But these HTML tags were not created with the concern of their visual rendering. Their only goal is to designate the level héarchique a title so that human readers and search engines can easily read a document and determine its structure information. It is only unintentionally that browser developers have given different sizes and levels of fat in each paragraph title tag, even if these sizes tend to be limited in the HTML.

Use paragraph headings to structure the content

Despite the nature of the Web and the vast changes of use (a way to structure a document in a visual medium), it is important that Web content is designed with a good structure. Better integration with style sheets (CSS) in recent versions of Web browsers, developers can change the appearance of structural elements to meet their design choices and display.

Example

Look at the content structure of one of your web pages using the W3C validator . . Enter the URL of the web page in the text box, check Show Outline, and then click Validate this page. For now, ignore the HTML errors that are displayed and scroll down the page to see the map displayed on the Web page. You will see a brief overview of the content structure of your web page, as defined by the tags ( <h1> - <h6> ). If the result does not look like a real plan, it is likely that the tags are not used properly (or there is no beacon of paragraph headings).

Users of screen readers and other assistive technologies are able to browse Web pages using their structure. This means that the user can read or direct access to high-level elements ( <h1> ) and those of second level ( <h2> ), then to those of the third level ( <h3> ) and so on. Viewing or listening to this plan gives them a good idea of ​​the content and structure of the page.

The pages should be structured hierarchically, the first level of security ( <h1> ) being the largest (usually the title page or document), then the second level of security ( <h2> , usually live titles chapters), then the third level titles ( <h3> , sub paragraphs of chapters) and so on. Technically, as a lower level must follow a security level higher. The following diagram shows the structure of securities in securities that should contain a webpage. In fact, it represents the hierarchy of the main content of this page with different levels of paragraph headings from highest to lowest. You can click on each title to access the corresponding section in this page.

Correctly use paragraph headings

Do not use text formatting such as font size or bolding to give visual appearance to paragraph headings - use standard tags titration ( <h1> - <h6> ) in all content. Assistive technologies and other browsers are based literally on the page code to determine its structure. Items that are bold or displayed in a larger font are not interpreted as structural elements.

Also, do not use tags for titration only create visual effects. For example, if you want to highlight or emphasize one element of content that is not a title (as done with the preceding sentence), do not use tags to do titration. Instead, use the tags for style font size, bolding or italics. If you want to emphasize something, you must use the tag strong (emphasis) instead of b and tag em (italics) instead of i . Tags b and i carry all 2 only visual information, while strong and em give semantic information. Visually, the result is the same but developers should use the appropriate HTML elements. et sélectionnez l'option Utiliser « strong » et « em » à la place de « b » et « i » . In Dreamweaver, you can select Edit> Preferences> General and select Use "strong" and "em" instead of "b" and "i".

Properly use the lists

HTML lists - ul , ol and dl - also serve to transmit a hierarchical structure of content. Each of these lists also have rules regarding their use. The bulleted (unordered list) should be used when there is no sequence or order of importance among the elements of the list. The ordered list suggests a progression or sequence elements in the list. The list of definition should be used explicitly for the presentation of a structure definitions. As titration with tags, lists of tags must be used correctly according to their natures. The ordered and unordered lists should always include the list items. Definition lists should always be descriptions of definitions. Empty lists are invalid in HTML. The lists should never be used for other reasons or for the layout. Nested lists must be correctly coded.

WebAIM is an initiative of:
Center for Persons with Disabilities (CPD) Utah State University

Copyright 1999-2009 WebAIM

Top of Page