Semantic Markup

So Many Colors, So Many Style Possibilities

html stands for Hypertext Markup Language, and it is used to structure a webpage documents' content. This article explores fundamental markup best practices. Topics covered include:

  1. What is HTML?
    • Setup Project Files
  2. Required Document Elements
    • The Root, the Head & the Body
  3. Sectioning Content
    • Header & Navigation
    • Primary Sections & the Footer
  4. Defining Content
    • Lists, Headings & Paragraphs
    • Inline Text Semantics
    • Media Elements & Forms
  5. Accessibility

 What is HTML?

html defines the hierarchical structure of the content on a webpage using <elements> also called <tag>, that specify how content is displayed. Internet browsers use elements to parse markup before displaying content to the user. Elements usually have an opening and closing <tag>...</tag> component, but there are a few self-closing tags as well.

<tag attribute="key">content</tag>

In the markup above, the element is targeted by an attribute whose value modifies the content. The attribute is an explicit value placed in the opening component of an <tag> to adjust its behavior or provide a functionality that meets certain criteria. Most attributes invoke a key(word) surrounded in quotes being separated by a delimiter, however, there are some important attributes that are self-contained.

There are 100+ attributes that can be used to enhance an element, depending on the objective. For simplicity sake, attributes will be introduced where appropriate: that is, as suitable elements are introduced.

 Setup Project Files

Lets open the project directory and create a new file, naming this file index.html, which is the universal file name for all website homepages. Lets also create two folders: one named css/ and the other named img/ (these folders will be used later in the project to contain style sheets and images). Enter the CSS folder and create a new file, naming this file styles.css. Leave the images folder empty.

 Required Document Elements

There are several elements required to ensure a web browser can properly render documents.

an HTML Document
Required structural elements for an HTML Document

 The Main Root

The <!DOCTYPE html> is the first line of a page and it declares that this document is indeed an HTML file by providing browsers with specifications that will ensure rendering.

The <html> element is on the second and final line of a page and is the outermost container, acting as a wrapper for everything in the entire document. This element accepts one attribute: lang="val", which notifies screen reading technology of what language to promulgate whereas the value is a two-character representation of a specific language.

 The Head

The <head> element is the first child descendant of the <html> element and represents the area that contains all meta information about a particular page, its title and instructions for the browser to locate style sheets while defining relationships that the document has to others in the web site.

 Meta Data

The <meta> tag is the first line in this area and it is used to provide meta data about a webpage, its author and pertinent information that enhances search engine optimization. Attributes that can be applied to this element are as follow:

The charset="UTF-8" attribute declares the character encoding of the page. The assigned value for this attribute stands for Universal Character Set and Transformation Format (8-bit). This value is capable of encoding all possible characters in any language including unicode.

The name="viewport" attribute is used by the server for identifying device usage. The assigned value describes the visible area of the webpage.

The content="val" attribute is associated with the name="val" attribute, controlling the size of the viewport as well as the zoom level upon initial page load. The assigned value for content="..." does several things that enables a mobile responsive platform while maintaining its structural and stylistic integrity. The width property controls the size of the viewport and when assigned the special value device-width, will scale the full-width of the screen. The value initial-scale controls the zoom level when the page is first loaded and simply controls how users are allowed to zoom the page in or out.

 Links

The <link> tag specifies a resource and accepts three attributes: rel="keyword", type="keyword" and href="URL".

The rel="..." attribute specifies the relationship of the target object with the <link> to specify its relationship with the document. The type="..." attribute (omitted) specifies the media type being used as a resource. The href="URL" attribute specifies the location of a resource via its url (Uniform Resource Locator) and establishes a connection with the document. The example above highlights use of a relative URL path, which is an implicit reference to a resource located on the same server as the web page.

However, not all resources are located on the same server: a resource procured externally uses an explicit reference in the form of an absolute URL path:

protocol://domain/path/

Here, protocol specifies how the resource is to be accessed: the protocol identifier uses either http:// or https:// as a method for transferring data between computer networks while the domain is the (website) server from which data is requested. The path specifies the sequence of directories leading to the target.

 Misc.

The <title> tag is simply used to document the webpage in the browser. Whatever is placed here will be visible on the browser tab.

Although omitted, the <base> tag specifies the base URL to use for all relative URLs in a document.

Use this tool for a good <head> experience and when you are not certain, consult documentation with the leading authority on all matters: the world wide web consortium, better known as W3C !

 The Body

Once <head> specifications are declared, content layout takes center stage. Web browsers use the combination of the aforementioned data to coordinate all resources required to make the website function as it was designed. Although absolutely none of the <head> information is visible to users, the exact opposite is true of the <body> tag. As the second child descendant of the <html> tag, it represents the area of the document that contains all content that will be displayed on screen (or print media), such as headings, paragraphs, images, and so on. Lets explore!

 Sectioning Content

HTML uses sections to define the structure of a document and all sections are defined explicitly or implicitly. Explicitly defined sections lay the foundation for overall presentation while implicitly defined sections organizes content throughout their parent containers. When defining page sections, focus on using the header, nav, article, section, main, aside, div and footer elements to get started.

Method for Defining Page Sections
a Simple Template

 Header and Navigation

The <header> tag is the first section users encounter and contains introductory information related to the website such as a logo or navigational aids. The <nav> tag is used to create a navigation system for users to browse a website, providing links within the current document or to an external source. This element can be used within a <header> or independently, and should be reserved for global navigation, a table of contents, previous/next links, etc.

 Primary Section Areas

The <main> tag should not be used to section content as it represents content that is directly related to the central topic of a document. This element is essentially the main container within the <body> tag, possessing all information outside of content that is repeated across a set of documents or document sections such as navigation links, copyright information, site logos or search forms.

The <article> tag represents a self-contained composition in a document that is intended to be distributable such as a forum post, a newspaper article, or a blog entry. The <section> tag represents a standalone section contained within an HTML document. It can be nested inside of the <article> tag to create distinguishable sections.

The aside element is used for content that is indirectly related to the documents main content such as sidebars, inserts, brief explanations or call-out boxes. This tag can be nested within other sectional elements and act as an identifier container for content related to that specific section. The div tag is a generic block-level container used to identify large groupings and the flow of content.

 Footer

The footer element typically contains information about the author, copyright data or links to related documents. It is placed at the bottom of the section root or used at the bottom of any sectioning elements.

 Defining Content

Content elements are used to organize sections of content and are nested within primary section areas. There are dozens of elements that can be used to markup content: sectional headings, paragraph text, forms and multimedia are but a few things that have a conventional usage of which there is a suitable tag.

 Build a Navigation System with Lists

Lets make a list: not a shopping list, but a list nonetheless. In HTML, list are used to group a set of related items in no particular order or in a specific order. The list type determines how its list-items will be displayed.

List are used for a lot of things: the <ul> tag can be used to create a list that designers can modify to build an efficient navigation system that will allow users to seamlessly traverse the a website. Both the <nav> and <a> tags are required to make this idea reality.

a standard navigation unit
a Simple Navigation System

The example above outlines the structure of a simple navigation system. The <nav> tag is used as the parent container that nests the <ul> and its <li>. anchor (<a>) tags implement the href="URL" attribute to establish a hyperlink with other resources. In this case, they consist of internal files specifying pages associated with this site that users can visit.

The <ol> Element

Another kind of list, although not suitable for building a navigation system, is the <ol> tag. Its <li> can be manipulated through use of the start="val" or type="val" attributes. The start="val" integer attribute specifies the start value for numbering individual list items. <ol start="4">, for example, would start numbering elements from the #4 and this would mark the first <li> as such. The type="val" attribute indicates the numbering type with 'a', 'A', 'i', 'I' and '1' representing lowercase and uppercase letters, lowercase and uppercase Roman numerals; and numbers, respectively.

The <dl> Element

The <dl> can be used to group terms, using <dt> tags, along with a description, using <dd> tags.

The title="val" and target="_blank" attributes work well with embedded <nav> links to create a visual cue (tooltip) for a resource or to open a new browser window for the resource in the background, respectively.

With navigation setup, focus can shift to laying out content.

 Headings & Paragraphs

The first bits of content for any page will include a heading and an introductory paragraph. <h1-h6> tags are used to create title-based headings. Best practice mandates that the <h1> be used only once per page, and to avoid skipping levels when nesting sub-sections to reflect the organization of the content of that page. One practical explanation for this is that most screen readers generate an ordered list of headings for web pages, which is a healthy accessibility method that assists users with disabilities. The <p> tag often accompanies headings as the main text-based content, creating perfectly aligned blocks of text.

Headings and Paragraph Markup
Headings and Paragraph Markup

 Inline Text Semantics

Aside from using the <p> tag to introduce text, inline text semantics may be employed to define the meaning, structure, or style of any piece of text.

The <b> / <strong>, <em> / <i> and <u> tags can be used to style text as bold, italic or underlined, respectively. The <mark> tag is used notate important text while the <code> tag can make text a monospace, like a fragment of computer code.

The<small>, <sub> and <sup> tags are useful to control text size. Respectively, these elements will decrease the text size, and specify that inline text be displayed as subscript or superscript.

The <span> tag is an inline element mainly used to identify small groups of text within any block element.

Similarly, the <cite>, <q> or <abbr> tags can be applied as inline-level elements in order to add specificity. These tags provide a visible text representation of a quoted source, indicates that the enclosed text is a short inline quotation and represents an abbreviation or acronym. The <cite> tag must include either the title or the URL of that work and is often accompanied by the <q> tag. Lastly, tinker with the <hr> tag to create a stylish line-break between sections of content.

 Unicode

It is a good practice to use unicode when marking reserved characters to avoid having a browser interpret that content as HTML code. UNICODE stands for Universal Coded Character Set (UCS) and is an International Standard ISO/ICE 10646. Instead of typing non-alpha-numeric characters as-is, the character entity is referenced with a numeric character value, whose syntax is typed with an ampersand (&), a number sign (#), a numeric value (nn) and a semicolon (;).

Below is a list of some character references illustrating symbols and their corresponding reference code. There are many more: Google counted more than 65,000 character references. Go figure.

Brief List of Unicode Characters

 Media Elements

While text content does much to inform users, media content can be more engaging and influential.

 Images

The <img/> element is a self-closing tag used to embed images into a document. This element requires the src="val" and alt="val" attributes, which respectively ascertains an images' file path extension, which must be of .svg, .jpg, or .png format, and offers a physical description of the image, required for accessibility purposes.

Example
Image Caption

A variety of objectives can be accomplished using attributes with the <img /> tag. For example, the crossorigin="val" attribute can be added to provide security while the srcset="val", width="val" and height="val" attributes can be used to specify image dimensions. Furthermore, the <img /> tag pairs well with a <figure> tag, which represents a self-contained container that is accompanied with the captioning <figcaption> tag. The <picture> element functions similarly and may be a more appropriate substitute for the <figure> tag depending on the objective.

 Audio & Video

Embedded media provides contextual clarity for users.

Video Controls
Video Controls
Audio Controls
Audio Controls

The <video> and <audio> tags allow web pages to play video and audio files inline with other content. The controls attribute must be specified, else the default browser controls will not display. The HTMLMediaElement API can be used to create custom controls, but this requires JavaScript.

Both elements require the <source> tag to specify media resources (it is a best practice to host media files and include a URL for easier file management) and accept the following attributes:

It is always a good idea to caption videos: not only for accessibility, but also because people may not comprehend what was said. Utilize the <track> tag, which specifies timed text data, then create a WebVTT File to define subtitles.

Track
Captions
Video Caption

The first line is required and followed by two line spaces. Line 4 represents the caption ordinal number. Line 5 indicates the start and end times for hour, minute, seconds and milliseconds. Line 6 is the caption content. Line 7 is optional, in the event that users be alerted to inaudible background sound.

Useful CSS sylesBecause of compatibility issues, designers need to remember to implement {display: block;} in CSS as they are typically bad for mobile devices.

 Service Forms

Forms are an essential part of the Internet, as they provide a way for websites to capture information from users and to process requests, and they offer controls for nearly every imaginable use of an application. Through controls or fields, forms can request information that allows users to perform search queries, access email via username and password authentication and much more. The <form> tag represents a document section that acts as a container for interactive controls users use to submit information to a web server.

a standard html form
A standard HTML Form

This element requires two attributes: action="key" and method="key". The former is the uri of a program that processes the form information while the latter is the HTTP method that the browser uses to submit the form. The method attribute will accept the keywords "post" or "get". The "post" method is favorable when asking users to send data as it is difficult to hack and information is not saved in the browser history or on web servers during submission. Both attributes are utilized for the submission and processing of data, however, this is implemented on the server-side.

The <input> tag fits the bill in this regard as it is used to create interactive controls for web-based forms in order to accept data from users.

The name="key" attribute is used to set the name of the associated data point submitted to the server when the form is submitted. It is submitted with the control's value="key" as part of the form data.

The semantics of the <input> tag varies considerably depending on the <type="key"> attribute, which specifies what kind of form control should be rendered, such as text, email, checkbox, etc. There are 34 possible keywords to choose from. When this attribute is not specified it will provide a default text type.

List of type="keyword" Values:
"button"
push button with no default behavior.
"checkbox"
allows single values to be selected/deselected.
"radio"
allows single selection from multiple options.
"file"
control that lets the user select a file.
"submit"
button that submits the form.
"reset"
button that resets the contents of the form.
"email"
field for editing an e-mail address.
"tel:"
control for entering a telephone number.
"text"
single-line text field; no line-breaks.
"search"
single-line text field for searching data.
"password"
single-line text field whose value is obscured.
"number"
control for entering a number.
"range"
control for entering a, inconsequential number.
"date"
control for entering a date.
"hidden"
invisible control; value is submitted to the server.

The <label> tag provides captions or headings for <form> controls, unambiguously tying them together in an effort to inform users of expected data while be accessible for assistive technologies. They include text that describes the <input> or controls they pertain to, and may include a for attribute which is set equal to the #id attribute. An example is illustrated below.

<label for="username">Username</label>        
<input type="text" name="username" id="username">

 

The for="key" attribute is placed before any tag that requires it, and associates itself with the #id creating functionality on the form.

The <fieldset> tag is used to logically group form element controls within a web form. The <legend> tag captions the content of its parent (<fieldset>) like a title for a paragraph. These tages are most useful for organizing large-chunks of data.

The <datalist>, <optgroup> and <option> tags are used to group controls, create a groupof options or create an independent controller amongst options. They will often be used with the <select> tag, which wraps all individual menu <option> tags. The name="key" attribute resides on the <select> element, and the value attribute resides in the nested <option> elements. The value="key" attribute on each <option> element then corresponds to the name="key" attribute on the <select> element. Each <option> element wraps the text of an individual option within the list. Enable multiple selection by adding the boolean attribute multiple to the <select> tag

The <textarea> tag represents a multi-line plain-text editing control, useful for users to input information to be relayed in an email or for providing a comment on a blog. The row="val" and cols="val" attributes specify the precise size for the textarea while the maxlength="val" attribute sets the maximum number of characters that the textarea is allowed to contain.

Forms are submitted via a <button>, which must use the name="submit" attribute.

All <input> and <textarea> tags can accept the boolean attribute placeholder to provide users with a hint of what kind of data is expected: this text will disappear once the control gains focus. The example below illustrates an <input> designed for an email:

<input type="text" placeholder="name@domain.com">

The required boolean attribute requires that a tag include the value="key" attribute when being submitted to the server. There are attributes that can be applied to form controls. To that end, here are a couple of form tutorials to help you out.

 Making a Page Accessible

In web design, accessibility refers to the practice of designing digital content and applications that can be used by people with vision impairments, mobility problems or cognitive issues. Accessibility on a static website deals a lot with semantic markup, but creating an aesthetic with CSS is equally important as it helps users with vision and motor impairments.

Besides making a site more accessible for users with limitations, research proves that doing so improves SEO, increases download speeds and has better usability. The key principles involve building a semantically sound, functional application that has content users can readily interpret and use. Become aware of user concerns by being familiar with assistive technologies that validate color contrast, video captions, keyboard compatibility, text-to-speech, voice recognition, etc.

The good folks at W3C provide WAI-ARIA design tips to apply when setting up a website. The acronym stands for web accessibility initiaitve - accessible rich internet applications. This is the tool to use to filter guidelines to establish a preliminary checklist. There is no shortage of resources to test website accessibility including for vision impairment and the list goes on.

The World Wide Web Consortium (W3C), which is the international authority regarding internet standards, provides an outline for how to make web content accessible. Moreover, you may find that their accessible rich internet applications suite meets your needs in this area providing tools to make web applications and the technologies that power them more accessible. A11Y Project is a major advocate for web accessibility and provide guidelines and patterns for designers to help make their applications accessible.

Here is a short list of Accessibility Criteria that every application should include:

  1. Add Contrasting Color
  2. Design usable :Focus States
  3. Use Labels with Form Fields & Inputs
  4. Write Alternative Text for Images
  5. Use Proper Markup for Content
  6. Support Keyboard Navigation

The Color-Contrast Ration between text and its background should have a ratio of at least 3/4.5 to 1 depending on the font boldness. The WebAIM group offers a color contrast checker that allows designers to calculate the score for conformance levels in real time. When using color as an indicator, be sure to pair it with an icon, a label or pattern. Charts and graphs are often difficult to read so using shapes and varying sizes can help enhance monochromatic vision. You can use the color oracle to simulate what vision impaired folk see in real-time.

Adding a visual cue such as an underline text style will help an element stand out. Focus Indicators help people know which element has the keyboard focus and helps with navigating a website. Elements that should be focusable are links, form fields, widgets, buttons and menu items. Be sure to create a state that is highly visible, with good contrast.

People who use screen readers navigate forms using the tab key and the <input> tag is equipped to handle this action: simply add the attribute / keyword pairing of type="tabindex" to an <input> tag to indicate that it can be focused for screen readers. WebAIM offers techniques that can be used to make forms accessible via keyboard navigation. In this regard, the aria-label="key" attribute should be applied to tooltips, collapsibles', tabbed interface, dialog box, widget and drop-down nav elements. Look over these aria examples for practice. And for good measure, manually test a websites accessibility by tabbing through <link> and <form> elements or use assistive technology like a screen reader. Major browsers offer accessibility engine web browser extensions to audit a websites' accessibility so that might be worth exploring.

The newest means to make elements accessible involves using ARIA roles to categorize the item and distinguish its functionality. Common roles include ="banner", ="navigation", ="main", ="contentinfo" and ="search".

Vision impaired users rely on screen readers to 'hear' what is being displayed and the alt="" attribute is used to convert text to speech. Apply this to all <img> and media elements.

Navigation is accessible only when the <nav> element is properly marked; this makes it easy to navigate a page through interactive elements that include links, buttons and input fields. Add a :focus state to add a visual indicator. Navigation should be intuitive, minimal and flow from left to right, top to bottom. Consider how gestures and touch screen detection play into this theme.