Semantic HTML

A major principle in web design is the use of HTML to indicate both what elements on a page are and how they appear.

Various HTML "tags" bracket your content in the source view of your web pages. The formatting and styling of each piece of content is managed by a system of opening and closing tags – i.e. <tag> content</tag> (along with a few "self-closing" tags – i.e. <tag />, such as for line break <br /> and horizontal rule <hr /> that do not bracket the content).

Common opening and closing HTML tags that you may be familiar with include:

• <strong> for bold text </strong>
• <em> for italicized text<em>

"Semantic" markup refers to those HTML tags that introduce additional meaning to the content of the web page. For example, the opening and closing <h1></h1> tags are used to indicate the main heading of a page, and <h2></h2> tags are used to indicate "second-level headings" or subheadings. Successive levels of subheadings (h3, h4, h5, h6) are nested as you would apply to an APA-styled thesis or other formatted documents that using a Table of Contents feature.

Semantic HTML and Search Engine Optimization

Semantic HTML forms the basis of on-page search engine optimization (SEO) so that Google and other search engines can decipher what your page is about. For example, while adding a bold font style or a large font size might indicate content of importance to the reader, it does not signal importance to a search engine. Instead, he search engine "understands" the relative importance of an h1 tag compared to an h4 tag, or an image tag compared to a blockquote tag.

For best SEO, all headings should include important keywords that best describe the content that will follow.

See also: Search Engine Optimization page on this site

Semantic HTML and Accessibility

Semantic HTML tags also enable users of keyboard shortcuts and assistive technology ­– such as screen readers, alternate keyboards and mouse tools – to navigate online more efficiently. For example, it enables the user to quickly tab between headings and allows a screen-reader tool to voice (or read aloud) only the linked text on a page.

Learn more: Accessibility

Semantic structure versus styles and classes

Non-semantic html elements, such as <strong> <em>  <div> and <span> tell us little about content structure but are used widely to style text on a page.

The look (font type, size, colour, alignment, line spacing, etc.) of the content on your web pages is informed by a "style sheets." Within a style sheet, a web designer can define how content within a particular tag will display.

For example, headings 1 through 6 – <h1> <h2> <h3> <h4> <h5> <h6> – are usually set to display at increasingly smaller sizes. While the semantic tag provides clues to other machines about the nature of the content, the style sheet determines how that content looks on the page, making it easier for the user to skim or read.

When using semantic tags to convey meaning rather than for presentation purposes, be careful that you don't use them incorrectly or simply for their common display properties. For instance, use a table to display tabular data but not to help place text on a page. Conversely, simply bolding a line of text does not elevate it to the status of a heading.

The basic styling embedded in your website via CSS (cascading style sheets) should minimize the need for any additional inline styling of your page content, but where you do want some additional control over how your content renders across the site, the use of style sheets also enables designers to create custom "classes" for presentation. These classes can augment the presentation style for any HTML tag (i.e. to display an icon, to alter the text style, to render a background colour, etc.).

Also, with a very few changes in the style sheet, a designer can determine that all h1 headings will display a little larger, in red, with a serif font.

A web designer/developer can provide further examples of the built-in styles and classes that you can apply to your site content.

Some other common semantic tags that are familiar to editors include:

• <p></p> general body text / paragraph text
• <blockquote></blockquote> quotation
• <a></a> link
• <img /> image (a self-closing tag)
• <ul> and <li> - nested opening and closing tags, used together to create unordered lists
• <ol> and <li> - nested opening and closing tags, used together to create ordered lists
• <abbr></abbr> - abbreviation and acronym, used to explain short forms, such as:
  Come to <abbr title="Queen’s University International Centre">QUIC</abbr>
• <sub></sub> subscript, <sup></sup> superscript
• <hr /> line or section break (a self-closing tag)
• <form></form> form
• <table> table, <tr> table row, <td> table cell <th> table header - nested opening and closing tags used to create tables, table rows and cells
   
• Resource: W3 Schools

Clean code

Having clean code is also very important. Often, editors will copy text from another source and paste it straight into their site, bringing a lot of garbage code (or, at best, code belonging to another platform or design) along with it. This can not only impact impact how web pages render, but their SEO as well.

For more information and tools to ensure clean code in your site, see WYSIWYG Toolbar and Source View.

Non-breaking spaces and line breaks:   and <br />

In the source code, the use of   creates what is called a "non-breaking space." When you want to ensure that two words stay together no matter how the text normally wraps in the browser window, you can use   between those words in the HTML code.

Source code example:

<p>Keep&nbsp;these&nbsp;words&nbsp;together.</p>

You might use the non-breaking space in dates and measurements, such as where you don't want a line break between "January" and "1st" or between "3" and "centimetres" in any view.

A non-breaking space code can also be used to create additional space between characters. For example, if you use your keyboard's space bar to create 6 spaces in your source code, the browser will render only one; inserting   forces the browser to recognize the spacing you want. However, formatting beyond the use of a few non-breaking spaces in a row should be handled with padding and margin styles instead of non-breaking spaces.

Additionally, excessive non-breaking spaces, where they are not intentional (copying and pasting from a MS Word document can add them in the code - see "clean code" above), can create a strange mobile experience, where text wraps (or doesn’t wrap) at strange points. So, be sure to clear any unintended non-breaking spaces from your code. Also, be sure to look at your web pages on a small screen, such as a phone, to catch issues with how your page design is responding.

In contrast, the addition of the <br /> tag in your source code allows you to force a line break. In the WYSIWYG view, you can create these by inputting Shift + Return on your keyboard. Again, use these sparingly, as responsive design means that layouts should be (more or less) fluid.