The Essential Use of Tags and Page Outlines in Your Web Content
I’m going to get a little nerdy on you today.
But hang with me because what I’m about to show you is a bit of ‘inside’ information that might change the way you think about your web content, including your website, blog or even Substack posts.
It’s a simple thing called MARKUP and believe it or not, it impacts how well your content is seen, embraced and promoted online, not just your text styles.
Markup refers to the process of using a set of codes (tags) to define the structure and layout of a web document. HTML is the most common markup language used to create and design web pages by marking up text so that web browsers can interpret and display it correctly.
Most platforms for publishing web content provide a toolbar where you can add text styles to your copy. Using these toolbars essentially writes the HTML markup for your content in the background.
But here’s the thing.
How you use heading (e.g., <h1>, <h2>, <h3>) and paragraph (<p>) tags is more important than you think. Best practices can sometimes be overlooked in the rush to publish content online. Yet, your markup choices can impact THREE factors for your content performance and reach.
SEO
Search engines use tags to index the structure and content of web pages, making it easier for users to find the information they need. A well-structured page with clear hierarchy and relevant keywords in headings makes it much easier for a search engine to understand your content.
According to Moz, pages with structured data rank four positions higher in search results on average. So while heading tags and keywords alone aren’t going to sway the algorithm to place you at #1 for queries, you may find yourself ahead of those who haven’t bothered.
Accessibility
Your markup enhances the readability and accessibility of content. Screen readers rely on tags to interpret the page structure for visually impaired users, allowing them to navigate through sections easily.
For a moment, just imagine the frustration for someone with accessibility issues on your website or landing page. How long do you think it will take for them to bounce when they can’t follow along?
This is not only a matter of inclusivity but can also have legal implications under laws like the Americans with Disabilities Act (ADA) in the U.S. and similar regulations worldwide.
User (and Writer) Experience
Proper use of headings and paragraphs also improves the overall user experience by breaking down content into digestible chunks, making it easier for all visitors to scan and understand the information presented.
One key to great website content is an ability to be CONCISE. Using headings and bullets is an excellent way to reduce fifty words to just ten, avoiding the TL;DR deathtrap for users.
It also makes sense for better (and faster) copywriting. Using a page outline with markup will automatically make writing your content easier and more strategic with fewer drafts (yes, please).
Key Markup Tips
Because maintaining the ideal hierarchy and outline when writing webpage copy is so important, here are some key tips to ensure effectiveness:
Use <h1> Tag Wisely: Start with a single <h1> tag per page to define the most important headline, typically the page title. This serves as the top-level heading and sets the stage for the content hierarchy.
Follow a Logical Order: Use headings (<h2>, <h3>, <h4>, etc.) in a hierarchical order to structure your content. Each main section should begin with an <h2> tag, followed by <h3> tags for subsections, and so on. This logical structure helps both users and search engines understand the content flow and the relationship between different sections.
Keep Headings Relevant and Clear: Ensure that your headings are descriptive and include relevant keywords. They should give readers and search engines a clear idea of what the following section is about.
Use Paragraph Tags for Text Blocks: Wrap text blocks in <p> tags to define paragraphs. This not only improves readability but also helps search engines understand that these are significant blocks of content. If you use <p2> for most of your body text, you can then reserve <p1> for special use cases that precede your <p2> text.
Utilize List Tags for Lists: Use bulleted or numbered list tags for listing items. These tags help break down information into more digestible, easy-to-follow points.
Semantic Markup for Emphasis: Use bold, italic or underline markup to emphasize text, rather than styling with heading and paragraph tags. This helps convey the importance of certain text to search engines and assistive technologies without interrupting the page outline.
Avoid Skipping Heading Levels: DO NOT SKIP heading levels (e.g., jumping from <h2> directly to <h4>), as this disrupts the content hierarchy and can confuse readers and search engine crawlers.
Consistent Structure Across Pages: Maintain a consistent structure across all pages of the website. This consistency helps users navigate your site more efficiently and aids search engines in understanding your site's layout.
Markup in the Wild
When I work with clients to create a new website or refresh an existing one, I give them page outlines that include the optimal markup and writing prompts indicating the purpose of each section.
This helps them create the content elements, including headings, within a framework or guideline, which is 100% easier than writing rambling responses to a questionnaire. Also 100% easier for me to interpret and apply to the design.
When I’m hired for copywriting, I START with the same kind of outline + markup. Heading and paragraph styles are not an afterthought or the work of the website developer. When I turn in copy, it’s OPTIMIZED for SEO, accessibility and user experience - much more than just vocabulary and word count.
“In a day, she asked good questions, absorbed my many ideas and drafts, and returned to me an elegant wireframe and fresh copy. With that, I had the clarity to crystallize and refine our messaging and move forward.”
Jeffrey Davis - author and founder at Tracking Wonder Consultancy
Adhering to best practices in page outlining and markup hierarchy is about functionality, accessibility, and performance, the essentials for building digital content that attracts and retains the attention of your ideal customers.
Let me know in the comments if this markup information changes the way you think about your website content.