Home Using HTML Using CSS Using JS Management Dev Environ Resources

Using HTML

This page defines the Hypertext Markup Language, better known as HTML, which is the standard markup language for creating web pages and web applications. The list of topics that are covered include:

  1. Explanation of HTML
  2. Required HTML Elements
  3. Defining HTML Sections
  4. Defining HTML Content
  5. Making HTML Accessible

Examples will be provided throughout the page in the form of contextual links or code references, like so: <code>. Perhaps more valuable is the curated list of resources at the bottom of the page.


What is HTML?

HTML defines the hierarchical structure of the content on a webpage using Elements that dictate how content is displayed and/or sectioned. HTML Elements are used by Internet browsers to read and display HTML content to a user. Elements usually have an opening <tag> and closing </tag> component, but there are some that are self-closing.

Content contained within an element can be configured through the use of an Attribute, which is an explicit value placed in the opening component of an element to adjust its behavior in a manner that meets a specific criteria. An attribute is created by using a keyword followed by a delimiter and a value that is surrounded by quotations, like so: <attribute="value">.

There are 100+ attributes that can be used to enhance an element, depending on the objective. To be clear, there are CSS Selectors that can be applied to an HTML element as well, but such properties are used for styling that particular elements content in a precise manner. For simplicity sake, attributes will be introduced where appropriate while selectors will be explained on the CSS page. Just keep in mind that elements are only as powerful as the attributes that motivate them, and vice-versa.


Required Elements for an HTML Template

When creating an HTML template, there are sevral elements that are required to ensure web browsers properly render documents. The illustration below highlights what is required, followed by a brief explanation for each element used.

an HTML template
Required structural elements for an HTML template
The Main Root

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

The <html> element is on the second and final line of a page and is the outermost container that acts as a wrapper for everything on the entire page. This element accepts the <lang="val"> attribute, which assists screen reading technology in determining what language to promulgate.

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.

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. This element accepts three attributes that will create a standard, mobile responsive document.

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 represents an association with the name="val" attribute and controls the size of the viewport as well as the zoom level upon initial page load. The assigned value, "width=device-width, initial-scale=1.0", 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 initial-scale property controls the zoom level when the page is first loaded and simply controls how users are allowed to zoom the page in or out.

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

The <link> tag is the third line in this area and it specifies the resources incorporated into a site. In the example above, the href="URL" attribute, which specifies the URL of a linked resource. In this case, its value targets the grid.css file in the CSS folder. This attribute is always accompanied by therel="stylesheet" attribute, which specifies the relationship of the target object to the link object. It is important to understand that the rel="val" attribute will function according to the linking-type applied. For example, a canonical value can be useful here to help webmasters prevent duplicate content issues by specifying the "preferred" version of a page as part of SEO. Other attributes to consider using here include the type="val" attribute, which helps clarify the content type and the title="val" attribute, which will create a visual cue for the resource known as a tooltip and is especially useful for embedded or linked resources. Note: Be sure not to confuse the title="val" Attribute with the <title> tag.

Web browsers use the combination of this meta-data to coordinate all resources required to make the website function as it was designed, however, absolutely none of this information is visible to the user.

The Body

Once <head> specifications are declared, content layout takes center stage. The <body> element is the second child descendant of the <html> element and represents the area that wraps all content that will be displayed on screen (or in other media, such as print), such as headings, paragraphs, images, tables, and so on. Lets explore!


Defining Sections

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
Method for Defining Page Sections
Header and Navigation

The <header> element is the first section users encounter and contains introductory information related to the website such as a logo, author or navigational aids. The <nav> element allows users to navigate 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 primary navigation sections only including global navigation, a table of contents, previous/next links, etc.

Primary Section Areas

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

The <article> element 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. This is 1 of 4 elements that I use to section main areas of content. The <section> element represents a standalone section contained within an HTML document. It can be nested inside of the <article> element to create distinguishable sections.

The <aside> element is used for content that is indirectly related to the documents main content such as sidebars, inserts, or brief explanations. These elements are frequently presented as sidebars or call-out boxes. This element can be nested within other section elements and act as an identifier container for content related to that specific section. The <div> element 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 of the section, 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.

Now is a good time to introduce the id="val" CSS selector, which acts a unique identifier for an element within the document to create internal links. This identifier may be used in CSS and JavaScript with one exception: an id-selector applied to an element must NOT match an id-selector used elsewhere on the page.


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 depending on whether you want to use a sectional heading, add text, create a form, include some sort of multimedia or script, add interactivity and much more. At this juncture, we definitely want to add some context for how elements can be used to define content.

Navigation

Building an efficient navigation system that will allow users to seamlessly traverse the site is the first order of business for this project. Lets create a system consisting of links to the home page, an about page and a contact page. This task can be completed by utilizing a structured-list.

a standard navigation unit
A standard Navigation unit

The example above outlines the hierarchy of a typical navigation system using an unordered list with list items that employs anchor tags with an href attribute to direct the user to a specific page within the website.

The <ul> tag represents an unordered list of items typically rendered as a bulleted list used for grouping a collection of items that do not have a numerical ordering precedence. It is nested within the <nav> section and acts as a container for individual list-items or <li> tags. For every list-item placed within an unordered list, an anchor element must be used. The <a> tag controls the hyperlink that is created when the href="val" attribute is employed. The file name included within this attribute has the ability to transport the user to another page, a location within the same page, a file, an email address or any other URL browser supported protocol handlers. For example, the highlighted list items point to pages associated with this website, and when selected, the website will go directly to that page. When dealing with external resources, however, it is helpful to apply the target="_blank" attribute, which will create a new browser tab for the user, while keeping open the current page.

Another kind of list, although not suitable for building a navigation system, is the <ol> element, which represents an ordered list of items rendered as a numbered list. Each item is represented by a <li> element that can be modified through use of the start="val" or type="val" attributes. The start="val" integer attribute specifies the start value for numbering individual list items. For example, I would use <ol start="4"> to 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 (default), respectively.

The <dl> element is another list; it is not commonly used and is recommended for implementing a glossary. The element encompasses a group list of terms using <dt> tags, and descriptions using <dd> tags.

Headings and Paragraph

As previously stated, the article tag is a primary section area for content. The first bits of content for any page will include a heading and an introductory paragraph. The <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 can generate an ordered list of headings on a page, which helps users with disabilities ascertain content hierarchy. With a title in place, we can markup content using the <p> tag, which will create perfectly aligned blocks of text.

Headings and Paragraph Markup
Headings and Paragraph Markup

The example above highlights the bare necessities for bringing content to life. However, we can advance this structure by including an <hgroup> tag to display a multi-level heading. Moreover, we can reference the origin source of our content by nesting the <p> tag in a <blockquote> tag, which acknowledges that the content is a quotation.

Advanced Headings and Paragraph Markup
Advanced Headings and Paragraph Markup

In the previous example, an <h1> and <h2> tags are nested in the<hgroup> tag to create a main title with a sub-title heading. The cite="URL" attribute is added to the <blockquote> tag to reference a source document or message for the information quoted; this citation is not visible.

Inline Text Semantics

Aside from using the <p> tag to introduce text, we may also want to define the meaning, structure, or style of any piece of text. To achieve such objectives, we can employ inline text semantics, of which there are nearly three dozen elements that we can use to modify 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 useful for highlighting or notating important text. The <code> tag can be used to style text in a monospace fashion that indicates it is 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-level element commonly used to identify smaller groupings of text within a block-level element. It is very useful for targeting a particular element, such as the <p> tag. Of the same note, the <cite>, <q> or <abbr> tags can be applied as inline-level elements in order to to add specificity.

Respectively, 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. (an optional title attribute can provide a description in the form of a tooltip.) The <cite> tag must include either the title or the URL of that work and is often accompanied by the <q> tag, which optionally accepts a title attribute that will display a tooltip description. Lastly, try tinkering with the <hr> element to create a stylish line-break between sections of content.

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.

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.

Forms

The <form> element represents a document section that contains interactive controls for submitting information to a web server.

a standard html form
A standard HTML Form

This element requires two attributes: action="val" and method="val". The former is theURI 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 either "post" or "get" as its value. 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.

The <fieldset> tag is used to logically group form element controls within a web form. The <legend> tag captions its parent (<fieldset>) like a title for a paragraph. The <label> element shares similarities with the <fieldset> in that it also provides a caption for its parent. Its importance rests in how, when used, it links a form control to the associated descriptive text in an unambiguous way that is useful for screen readers and that this element can be applied to any item in a user interface.

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. What is most fascinating is how the <label> and <input> elements work in unison via their associated attributes. There are two ways to associate these attributes: implicitly nest the <input> element directly inside of the <label> element or apply id="val" and for="val" attributes, both with the same value, to the <input> and <label> elements.

The semantics of the <input> element varies considerably depending on the <type="val"> value. Aside from the attributes available to use for the <input> element, the type="val" attribute itself offers 34 possible values to choose from. When this attribute is not specified it will provide a default "text" type.

Whenever the type="val" value is employed and takes the value of either "radio" or "checkbox", the value="val" attribute is required. The name="val" attribute is the name of the control, which is submitted with the control's value="val" as part of the form data. It is required to be used with the <input>.

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

The <textarea> element 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. There are five friendly attributes that can be applied, starting with the id="val", which respectively associates itself with the <label> element for accessibility purposes so long as the values are identical. The name="val" attribute is used to set the name of the associated data point submitted to the server when the form is submitted. 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.

Interactive Elements

The <details> element creates a disclosure widget in which information is visible only when the widget is toggled. Use the self-contained open attribute to programmatically keep open the widget. A summary, caption or legend can be applied to the widget by employing the <summary> element.

The <dialog> element is an experimental technology that represents a dialog box or other interactive component, such as an inspector or window. Dialogs are hidden by default, but can be made active and available for interaction by replacing the id="val" with the open attribute in the <dialog> element. <form> elements can be integrated within a dialog by specifying them with the attribute method="dialog". When such a form is submitted, the dialog is closed with a returnValue attribute set to the value of the submit button used. The ::backdrop CSS pseudo-element (experimental) can be used to style behind a <dialog> element, for example to dim inaccessible content whilst a modal dialog is active. The backdrop is only drawn when the dialog element is displayed with dialog.showModal(). You can use a Polyfillfor browser support and learn more about <form> + .close() Events + .cancel() Events + and check out these examples which further elaborates on this elements usage.

This dialog box will open a window with an input text area that you can enter text into. After you submit text, the information will be stored until the next usage.

This modal dialog will perform like the dialog box with the exception being a full-screen overlay will distort the background.

This modal dialog box uses <select> to inject an 'options-list' of possible choices. Make a selection, then click submit and the choice is saved. Click 'cancel' to reset the choice.

The <script> element is not an interactive element. However, inclusion of this element will embed or reference executable JavaScript code which is in and of itself an interactive programming language. It requires the src="val" attribute to specify the URI of an external script. It is also good practice to include a type="text/javascript" attribute to indicate the type of script, particularly for older browsers. Use of this element is an alternative to embedding a script directly within a document.

Using Unicode

In HTML, there is a best practice to use Unicode when writing reserved characters to avoid having a browser interpret the content as HTML code. UNICODE stands for Universal Coded Character Set (UCS) and is an International Standard ISO/ICE 10646. Instead of typing such chacters, we want to reference the Character Entity or its numeric character reference, whose syntax begins with an ampersand &, followed by a nymber sign # and ends with a semicolon ; like so: &#nn;. In this example, the nn represents the numeric value of the symbol that you want to include.

Below is a list of some character references illustrating symbols and their corresponding reference code. There are many more: I asked Google exactly how many character references existed and it said 65,000+. Go figure.

It would be a worthy venture to learn more about Unicode as you can include arrows, foreign languages, shapes and much more.


Making a Page Accessible

The concept of accessibility focuses on making your web content easy for a wide range of users to access. This may include people with vision impairments, people with mobility problems, and those with cognitive issues.

In web design, accessibility refers to the practice of designing digital content and applications that can be used by people with visual, motor, auditory, speech or cognitive disabilities. 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 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. and A11Y Project are two major advocates for web accessibility and provide guidelines and patterns for developers to help make their applications accessible.

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

  1. Add Contrasting Color
  2. Design usable :Focus States
  3. Use Lables 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 be at least 3/4.5 to 1 depending on the font boldness. The WebAIM group offers a color contrast checker that allows developers 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 <label> element is equipped to handle this action. Never use placeholder text for accessibility because it will be passed over during tabbing. There are plenty of resources for creating accessible forms.

Vision impaired users rely on screen readers to 'hear' what is being displayed and the <alt=""> attribute is used to convert text to speech. Simply describe the image or what is happening in the background.

Web browsers read the content and the type of HTML element that contains it. Browsers create their own structure of how the page renders using the elements. Using inline-styles will negatively affect accessibility.

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. Test your website using the tab key.

When you think your code is up to par and accessible, download the accessibility engines web browser extension to check a websites accessibility.

Last Updated: 3/20/2019