HTML Foundations

Prior to discussing web accessibility, a basic understanding of HTML is necessary for you to interact with the content of the next section of this workshop.  If you are comfortable with HTML code, please skip ahead to the Accessible Web Design section.

HTML (Hypertext Markup Language) is the foundation upon which all websites function in the browser.  HTML Elements are the building blocks used to construct an webpage as an HTML document.  Elements are the individual components that consist of tags, whose function it is to identify the role of the element, and content, which is displayed within the context of the tag.  Tags can be identified by looking for the opening and closing brackets "<>" around the tag.  Closing an HTML tag simply requires entering the tag with a "/" in the tag.  Proper coding requires most tags to be opened and closed, as demonstrated in the example below.  Attributes are features of a tag that provide additional information that enable functionality within the tag.  The example below uses the element for creating a link, which consists of an "anchor" tag and an "href" attribute to specify the location on the web this link references.  The content of the element is contained in between the opening and closing tags.  

HTML Code for a link to the w3schools Introduction to HTML webpage:
<a href="http://www.w3schools.com/html/html_intro.asp">w3schools.com Introduction to HTML</a>

Browser output of this code on a webpage:
w3schools.com Introduction to HTML Links to an external site.

Adjusting the appearance of a webpage can be done within the HTML code, by using either CSS (Cascading Style Sheets) or inline Styles (styles coded within the HTML document).  Styles can be ignored by assistive technologies to provide a user of that technology with a more accessible experience, so it is imperative that we never convey information solely via the use of styles.  This includes using color, size, or any other style attributes to differentiate content exclusively.  If the information is perceptibly differentiated in multiple means, the user of an assistive technology will understand the differentiation of the content.  For example, the text above is in both bold and red format.  Assistive technology will be able to detect the use of a <strong> tag that will notify the user of the importance of that content due to the use of this tag, even though a style was used to indicate the color of the text.  

To learn more about HTML and web design, please visit the w3Schools introduction to HTML in the next section of this course or via the link in the example used in this page.