Correctly creating web content is one of the most important things you can do as a web designer. If your users can't comprehend and digest your content, they won't know how to navigate through your site. If search engines can't understand your content, they won't direct people to your site.
Here are three common web content mistakes you should avoid.
Don't Misuse Header Tags
Here are the rules to follow:
There should be one h1 tag on your page. This is almost always the title of the page, which you should never remove. Do not add additional h1 headers to your page.
Add h2 sub-headers to break up your content into obvious section headings. These should make sense out of context.
Within each h2 section, add h3 tags as needed to further clarify or group your content.
A properly formatted page with headers and sub-headers looks something like this:
- h1: Page Title
- h2: First Section
- h3: Sub-section #1
- h3: Sub-section #2
- h3: Sub-section #3
- h2: Second Section
- h2: Third Section
- h2: First Section
Header tags should be scannable and easily identifiable; the h1 tag is the largest, then the h2 tag should be smaller than h1, h3 should be smaller than h2, etc. The purpose of a header tag is to group content together, but more importantly, to help the user scan the page to easily find what's relevant to them.
If your content really needs it, add h4 and h5 tags under your h3 tags. However, if your content would benefit from h4 and h5 tags, it's usually too long.
Don't Ignore Accessibility Issues
Accessibility is foundational to your website's success. It's easier than ever to ensure that your site is following accessibility best practices.
While there are plenty of design-related accessibility requirements for your content (large enough font size and readability, proper color contrast ratio, etc.), there are additional factors to consider when creating the actual content.
If you're creating graphics for your content, don't include large amounts of text in images. Any content that is important to your user should be live text that's readable by screen readers - not embedded in images. Even if you're adding ALT text to your images, it's not enough; long, descriptive content needs to be formatted as live text.
Speaking of images, include ALT text in your decorative images. If you've got a featured image or photo in your content, make sure to add ALT text so users with screen readers know what's on the page, even if it's only decorative.
We've already talked about this, but proper use of headers and sub-headers is crucial for accessibility as well. Headings help users with screen readers understand how the content is organized.
Don't Make Your Content Look Overwhelming to Read
As you're writing your content, always think about how it looks to your reader.
This isn't just about the usefulness of the content or your ability to write for both users and search engines; it's also about how easily people can find what they're looking for.
Remember, people don't read online; they scan.
If your content looks overwhelming, users will go somewhere else to find what they need.
Here are some helpful tips to avoid overwhelming readers:
- Simplify your content with layouts that make sense.
- Use bullet points to divide items into lists.
- If your content is really long, add a table of contents with anchor links.
- Keep your paragraphs to four lines or fewer, and don't hide the crucial information.