2. Understanding Titles and Paragraphs in Web Design

Titles and paragraphs

ISPC NEWS


H1 – H6 Titles and p for Paragraphs

Article authored by the ISPC

You might be asking yourself why you would need to know this, and you would be right to question it. For google and other search engines to understand what means what on your website it needs to have a code that tells it.

Introduction: What H titles are

In Wix the code is done for you, but you still have to assign the code to the text. The reason we are telling you this now is because it’s best to start with good practices from the very beginning.

H titles, also known as heading tags (e.g., <h1><h2>), are HTML elements used to create a hierarchical structure for a website’s content. They act like an outline for a document, telling both users and search engines what the key topics on a page are. Using them correctly is vital for Search Engine Optimisation (SEO) and web accessibility. Imagine a book, it has a Book title, Chapters and Paragraphs. Its the same thing but for websites… Its that simple

Step 1: Learn the hierarchy (H1 to H6)

H tags range from <h1> (most important) to <h6> (least important). The number indicates the tag’s importance and its place in the content’s structure. 

  • H1: The main, top-level heading for the page. It summarises the overall content and usually contains the primary keyword.
  • H2: Subheadings that break the main topic (H1) into different sections.
  • H3: Subsections of an H2. They provide more specific information and further organize the content.
  • H4 to H6: Used for even deeper levels of sub-sections. Most content rarely requires more than H3 tags.

Step 2: Follow the rules for H1

The <h1> tag has specific rules because it signals the page’s main topic to search engines. 

  • Use only one H1 per page: A page should have only one main title. Having multiple H1s can confuse search engines and dilute your SEO efforts. (Search engine optimisation – meaning how google finds you)
  • Place the H1 prominently: The H1 should appear at or near the top of the page, above the main content.
  • Make it unique: The H1 should be unique and accurately describe the page’s specific content. It should also be different from your page’s <title> tag.
  • Include your primary keyword: Naturally place your main keyword or keyphrase in the H1 tag to signal its importance to search engines.
  • A keyphrase is simply some words that google uses to identify what it’s found. When someone searches Counselling in London, it brings up all of the websites that belong to that keyphrase. If your website Page Title (H1) is called Therapy by Jon, google will bring this up as a keyphrase and position it according to relevance in the search engine. More on Keywords later….

Step 3: Structure subheadings logically

Once you have your H1, use H2H3, and other tags to create a logical flow. 

  • Create a content outline: Before writing, outline your page’s structure using headings. The major topics under your main H1 should be H2s. The points within those topics should be H3s, and so on.
  • Do not skip heading levels: Always maintain a consistent, hierarchical order. For instance, do not jump from an H2 to an H4. You must go from H1 to H2, then from H2 to H3 for sub-sections.
  • Use H tags for structure, not styling: Do not select a heading level based on its appearance. H tags are for semantic meaning and structure, and their visual style should be controlled by your website’s CSS —- (CSS is code that helps design – Colour, size, shape, position… Don’t worry about this unless you’re really enthusiastic, wix does this for you!)

Step 4: Write effective heading text 

The content within your H tags is important for both search engines and human readers. 

  • Be descriptive and concise: Headings should clearly and briefly summarise the content that follows. This helps users quickly scan the page to find what they need.
  • Include keywords naturally: While strategically placing keywords in headings is beneficial for SEO, avoid “keyword stuffing.” The primary goal is readability for your users.
  • Make them engaging: Well-written headings can entice readers to continue reading your content, which can help lower your bounce rate and improve user engagement.
  • Optimise for featured snippets: By framing your headings as questions and providing a concise answer in the following paragraph, you can increase the chances of your content appearing as a Google Featured Snippet.

Step 5: Write compelling paragraphs…

In web development, the <p> tag is used to define a paragraph. It is a fundamental HTML element for structuring text content, grouping related sentences into a block of text. Browsers automatically add a blank line (margin) before and after each <p> element, visually separating the text. 

The purpose of the <p> tag

  • Separates blocks of text: The <p> tag visually breaks up content, making it easier to read and scan.
  • Improves readability: Organising text into digestible chunks helps users digest information more effectively, especially for longer articles and blog posts.
  • Enhances accessibility: Screen readers and other assistive technologies use the <p> tag to help users navigate and understand the page structure. When a screen reader announces “paragraph,” the user knows a new block of text is starting.
  • Maintains semantic meaning: The <p> tag is a semantic element, meaning it adds context and meaning to your content beyond just visual styling. This is beneficial for search engines and accessibility. 

How to use the <p> tag

  1. Open with <p>: Begin the paragraph with an opening <p> tag.
  2. Add your content: Insert the text you want in the paragraph.
  3. Close with </p>: End the paragraph with a closing </p> tag. Although some browsers are forgiving, it’s best practice to always close your tags. 

Step 6: Check and refine your structure

After writing your content, take a moment to review your heading structure.

Assess your content’s flow: Read only your headings in order to see if they make sense as a complete outline. A clear, logical structure is a sign of a well-organised page. 

Use a browser extension: Tools like the Ahrefs SEO Toolbar or SEO Quake can provide a document outline that shows all the headings on a page in their correct order. (Don’t worry about this too much for now.)

Review for accessibility: Use your browser’s developer tools or a web accessibility checker to ensure your headings are properly implemented for users with screen readers. (Again, don’t worry about this part as Wix will organise this for you.)

  • (Although this may seem like talking in code…. once you get started with the website and use the step by step guide it will become clear. Again if you want any professional help please get in touch with Swarming Bee Web Design)

We encourage all ISPC members to consider contributing to ISPC News and sharing their unique perspectives and insights. Your contributions help build a valuable resource for the therapy and counselling community.

And lastly, we appreciate those that have already come forward with their ideas and writings, we are uploading these blogs over the next few weeks and months.

Kindest Regards

admin@ispc.org.uk

ISPC Professionals

Become a Member

Gaining recognition of the ISPC through values and credentials. Join our Professional Membership Body today.

CPD for Counsellors

Get Your CPD Hours

Have a look at gaining your 30 hours CPD from our Continued Professional Development Platform, hosted by various specialist training providers.

You might also enjoy