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 "elements" or "tags" (the terms are used interchangeably) 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. <tagname> content </tagname>.
Common opening and closing HTML elements 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, the search engine "understands" the relative importance of an h1 tag compared to an h4 tag, or an image tag compared to a blockquote tag and uses the content within those tags to help determine what your content/page/site is focused on.
For best SEO, all headings should include important keywords that best describe the content that will follow.
Learn more: Search Engine Optimization
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.
Semantic structure versus styles and classes
Non-semantic html elements, such as <b> <i> <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>for general body text / paragraph text<blockquote></blockquote>for a quotation<a></a>for a link<ul>and<li>tag pairs that are nested to create unordered lists<ol>and<li>tag pairs that are nested to create ordered lists<abbr></abbr>for abbreviations, initializations, and acronym, used to explain these short forms, e.g.,
Come to<abbr title="Queen’s University International Centre">QUIC</abbr><sub></sub>for subscript,<sup></sup>for superscript<form></form>for the start and end of a form<table>table,<th>table header,<tr>table row,<td>table cell: nested opening and closing tags used to create the rows and cells of a tables
"Self-closing" tags are stand-alone tags that do not bracket any content:
<img />for including an image<br />for a line break<hr />for a horizontal rule
Clean code
"Clean code" is also very important. Website editors will sometimes copy text from another source and paste it straight into their site, bringing a lot of tags and style attributes (i.e. design code belonging to another platform) along with it. This can negatively impact how web pages render visibly, and their accessibility and SEO.
WebPublish users can refer to WYSIWYG Toolbar and Source View more tips on ensuring clean code in your site.
Non-breaking spaces and line breaks: and <br />
In the source code, the use of the entity creates what is called a "non-breaking space" in your web text. When you want to ensure that two words stay together no matter how the text would naturally wrap in the browser window (with responsive design, depending on its screen size), you can use between those words in the HTML code.
Source code example:
<p>Keep these words 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.
Resources:
Check the HR Learning Catalog for the next "HTML for Beginners" workshop