Front-End Development Lead
You’re probably reading this blog post in a web browser on your laptop, tablet or mobile device. If not, you may be reading it from a piece of paper that just came out of the printer. Maybe you’re not “reading” this article at all, but instead listening to it using assistive technology such as a screen reader. The point is that there are many ways that online content can be consumed.
The Hypertext Markup Language (HTML) and Cascading Style Sheets (CSS) are two core technologies for building Web pages. HTML provides the structure of the page while CSS provides the visual and aural layout.
A successfully styled web page should provide a visual hierarchy that makes it easy for visitors to consume the information and doesn’t corrupt the quality of the underlying code. The semantic meaning of the HTML matters, as it is used by assistive technologies to help visitors with visual impairments. The code is also read by search engines and used to help index websites within search results.
With the rising popularity of using a Content Management System (CMS), the responsibility of maintaining websites is not always handled by people who code. Although this feature is the main appeal of using a CMS, it is important to make sure that content is entered properly to maintain the website’s consistency, accessibility and search engine optimization (SEO) score.
Techtarget.com defines a CMS as “a software application or set of related programs that are used to create and manage digital content.” Drupal, ExpressionEngine and WordPress are just a few examples of popular CMSs used to power the web.
The reason that CMSs are so popular is that you don’t need a developer to add the day to day content for a website. If you understand how to fill out a form online, you are capable of working in a CMS. Content editors use a what you see is what you get (WYSIWYG) editor to enter and format what is ultimately shown on their website.
As a content editor, it is important to have a basic understanding of how HTML works, even if you don’t write code. By following these guidelines, you’ll be able to manage your website with confidence:
HTML provides six levels of headings that can be used to organize information into sections. The main title of the page should use the highest heading level, h1, and there should only be one per page. The remaining headings, h2 ‒ h6, are used to create a hierarchy of sections and subsections of content.
For example, the heading of h3 should only be used if that heading is a subsection of the h2 before it. If you have multiple headings that are subsections of the page title, the h1, then they should all be h2. It is not uncommon for a web page to only have one or two levels of headings.
All the headings on a page are collectively called the document outline. The document outline is used by search engines to help index the page. Therefore, it is a good idea to use relevant keywords in your headings. The document outline also conveys the visual hierarchy of information to the user, which allows them to easily scan the page. In addition, assistive technologies, such as screen readers, allow users to easily move between headings by announcing the heading level.
A common mistake when using headings is to use them out of order. Often content editors will choose the wrong heading because they do not like how it looks visually. However, editors should instead use CSS to correct the heading style so that the proper heading order is maintained. Using the proper heading order not only positively impacts your site’s SEO score and accessibility, but also ensures consistency across your website.
Just like word processors, HTML has the ability to put text in paragraphs and lists. Often times, content incorrectly winds up in one very long paragraph tag with line breaks to provide visual spacing. This leads to visual inconsistencies with content on other pages that use paragraphs correctly. The spaces between paragraphs provide a natural break in the flow of information and prompt screen readers to add a slight pause after each paragraph.
HTML provides three options for lists: ordered, unordered and description lists. However, most WYSIWYG editors only make ordered and unordered lists available to use. Unordered lists will display with bullet points, while ordered lists use a combination of numbers, letters and Roman numerals.
Assistive technologies benefit from properly formatted lists, as they announce the type of list and number of items in the list to the user. They also announce each individual list item as clearly separate pieces of information.
When you create content, it is common practice to direct site visitors to other relevant pages. To do this, you create a hyperlink, which is displayed as hypertext, or the ‘HT’ of HTML. In the early days of the web, the concept of links was new, so instructional text was used, such as “click here” or “read more.” This is now considered a bad practice. Instead, you should use descriptive text for the purpose of the link, such as “contact LMO about your next project.”
Using descriptive text for links makes your content more accessible. Assistive technologies will only announce the link text, and therefore, instructional hyperlinks, like “click here,” provide no context to where the link goes.
Adding images to a web page is a great way to supplement what you’re saying. When using images, make sure that you provide alternative (alt) text. This text is used by search engines and assistive technologies and is displayed on the page if the image fails to load.
The alt text should provide useful information about the image to help convey its meaning. If the alt text on a picture of a rescue dog is simply, “dog,” the alt text is not sufficiently descriptive. Instead, the alt text, “Buddy, the labrador retriever, is ready for adoption,” provides much more context to the image.
CMSs are powerful tools that prove that you don’t need to be a developer to manage a website successfully. Understanding and following these best practices for content entry ensure that your site will continue to operate smoothly and optimally.
We Bring Creative and Effective Solutions.