HTML Tags for Blog Posts: Cheat Sheet and Working Example

Some popular tutorials still recommend presentation attributes such as align. The HTML Standard treats align on paragraphs and headings, and the <center> and <font> elements, as obsolete. Put alignment and typography in CSS so a theme change does not leave a different style baked into each old post.

Your CMS writes most of this markup when you choose a heading, insert a picture or add a list. Knowing the element behind each control helps you produce an accessible outline, preserve meaning when changing themes, and troubleshoot the HTML that Bing and Google read.

The HTML tags a blog post actually needs

The whole list is in the table, with the few worth deleting alongside it, and the diagram after it shows the same tags building a short sample post. <h1> is there but you rarely type it: your theme wraps the post title in it.

A clean blog article HTML example

This original example shows a fictional article body. For a standalone page, use the whole article inside the document body. In a CMS that already supplies the title, date and article wrapper, copy only the paragraphs, section headings and list between </header> and </article>. Do not copy those two closing tags. Check your editor’s preview after pasting.

<article aria-labelledby="post-title">
  <header>
    <h1 id="post-title">How to choose a reading lamp</h1>
    <p>Published <time datetime="2026-11-02">2 November 2026</time></p>
  </header>
  <p>Choose a lamp that lights your page without shining into your eyes.</p>
  <h2>Check these three things</h2>
  <ul>
    <li>Can you aim the light at the book?</li>
    <li>Is the switch easy to reach?</li>
    <li>Does the base fit your desk?</li>
  </ul>
  <h2>Try it before you decide</h2>
  <p>Read a page in your usual chair and check for glare.</p>
</article>

For a standalone HTML file, put this article inside the body of a document with a doctype, language, character encoding, title and viewport setting. Keep those document-level settings in the theme when using a CMS. Replace the example subject, dates and wording with your own content before publication.

Selected ways Google uses blog markup

Google documents specific uses for links, image descriptions and prominent headings. These are useful examples of how a search engine interprets markup, rather than an exhaustive list of everything it reads:

• Links. Google’s link documentation recommends an <a> element with a real href destination. A script-only click handler is not a reliable replacement.
• Images. Google uses alt text, image analysis and the surrounding page to understand an image. Describe what the picture contributes rather than repeating a keyword.
• Your main visible heading. Heading elements are among the sources Google can use for a title link, along with the HTML title, other prominent text and links. Make the main title easy to identify; the text shown in search results is not under your complete control.

Google’s SEO Starter Guide does not prescribe a heading order or ideal heading count for its search system. That does not remove the accessibility reason to keep a logical outline, and it does not describe Bing’s separate guidance.

Clean markup also supports screen reader navigation and lets a CMS restyle an archive without editing every post. Structured data belongs alongside the visible content it describes; it is not a replacement for that content. The wider reasons blogs can support SEO go beyond individual tag choices.

What Bing asks for in blog HTML

Bing's Webmaster Guidelines explicitly recommend descriptive titles and meta descriptions, a logical H1–H6 hierarchy and semantic HTML. Keep the title, main heading and article focused on the same topic. Google's guidance about heading order should not be read as a reason to abandon an accessible outline.

• Make the answer visible. Put the explanation, examples and key facts in the article itself. Structured data should match what a reader can see; it does not guarantee search visibility or AI citations.
• Check the published URL. A page can be technically sound but excluded by a robots directive. Bing says a readable noindex tag prevents inclusion in its index. Inspect the live page if exclusion was not intended.
• Use a useful outline. The title names the whole article; section headings describe distinct questions within it. A page of visually bold text does not provide the same structure for readers.

These are publishing and comprehension checks, not a recipe for a number-one ranking. Bing and Google choose which pages to show for each search; good HTML lets readers and crawlers interpret the content accurately.

Heading tags: h1, h2, h3 without the myths

Give the page one clear main title. Google’s title-link guidance warns that several equally prominent headings can make the main title unclear. MDN recommends a single H1. Older tutorials that put a new H1 inside every nested article or section describe an outline approach that is no longer conforming.

Keep heading levels logical for readers. The W3C heading tutorial explains that skipping ranks can confuse people using headings to navigate. Use H2 for a major section, H3 for a section within it, and return to H2 for the next major topic. Choose the level for its place in the outline; change its visual size with CSS.

How many headings is too many

There is no universal heading count. Add a heading when it introduces a useful section; combine fragments when the outline becomes harder to follow than the article. Google’s starter guide also says there is no ideal number for search.

The free H1 H2 H3 Heading Checker turns a public page’s headings into an indented outline. Check its level counts and missing, duplicate or skipped-heading warnings against the actual content. A warning is a prompt to review the structure, not proof of a search penalty. The image shows an example outline from a Grigora page; a new scan can return a different outline as the page changes.

Bold, italic, and the strong versus b question

<strong> and <em> express importance and stress emphasis. <b> draws attention without adding importance, while <i> can mark text in a different voice, such as a technical term. These are different meanings, not old and new versions of the same tag. Neither b nor i is obsolete.

Choose emphasis for meaning. If you only want a different weight or slant, use CSS. The <u> element also has a specific annotation meaning; avoid using its default underline as decoration in body copy because readers can mistake it for a link.

Anchor text, new tabs and the three rel values

Write link text that identifies the destination or task. “Check the delivery options” gives a reader more context than “Click here.” Google’s link guidance suggests checking whether the anchor text still makes sense outside its surrounding sentence.

Use rel="sponsored" for advertising and paid placements, rel="ugc" for user-generated links such as comments, and rel="nofollow" when the other values do not fit and you do not want to associate your site with the destination. Google documents these link qualifications. An ordinary editorial citation does not need a qualification just because it goes to another website. These values do not replace access controls or prevent a page being discovered elsewhere.

rel="noopener" prevents a newly opened page from controlling the page that linked to it through window.opener. Modern browsers provide this behavior implicitly for target="_blank", but keeping it explicit is reasonable, including for older browsers. noreferrer is a separate privacy decision: it also suppresses the referrer. You do not need to remove either attribute from existing links.

On classic template sites, Grigora's post editor has these as options in the link dialog. Select the text, click the link button, and choose from Open in New Tab, No Follow, No Referrer and Sponsored.

Marking up images: img, alt, figure and figcaption

Three things belong on an image tag. Only the first describes the image to Google; the other two decide how the page loads.

• alt that fits the image's purpose. Describe the information an informative image contributes. For a chart, include its main finding in adjacent text too. For a purely decorative image, W3C recommends an empty alt=""; omitting the attribute can make screen readers announce a filename. Do not fill every image with the same keyword. See how filenames, alt text and captions differ.
• Reserve the image’s space. Set accurate width and height attributes, or an equivalent CSS aspect ratio. This lets the browser reserve space before the download finishes and reduces layout shifts.
• Lazy-load images that start below the viewport. Keep the likely main visible image eager. Browser lazy-loading guidance warns that delaying an image visible on arrival can hurt loading performance. A theme should make this decision based on layout.

<figure> groups a self-contained illustration, chart or other item; <figcaption> supplies its visible caption. It is useful when readers may refer to the item independently of a paragraph. A caption and alt text serve different purposes, so one does not automatically replace the other. See MDN’s figure reference.

The free Image Alt Text Extractor pulls every src and alt out of up to 50 URLs and exports them to CSV. Dimensions and file weight are the other half: what size blog post images should be.

Lists, tables, quotes and the divider you should not use

Use <ol> when changing the order changes the meaning, such as a procedure. Use <ul> for related items without an essential order. Choose the list for its relationship, then style its markers in CSS.

Use a table for comparable data, not for laying out a page. Add a <caption> describing the comparison and mark header cells with <th>. For straightforward row or column headers, scope="row" or scope="col" makes the association explicit. More complex tables need additional care. The W3C tables tutorial explains these patterns.

Put a long quoted passage in <blockquote>, with the source URL in its cite attribute when useful. Put the visible attribution outside the quoted passage; the cite attribute does not display it for you. The <cite> element identifies a work’s title, while <q> marks an inline quotation. See MDN’s blockquote reference.

Use <hr> for a thematic break, such as a change of scene. Draw a purely visual divider in CSS. A basic disclosure can use <details> with <summary>; native opening and closing do not require custom JavaScript. Test the result in the browsers and assistive technology you support. The details reference covers its behavior.

HTML tags for blog posts you can delete

Old markup often survives when posts are pasted from another editor or migrated between themes. Check a representative draft in HTML view and remove obsolete presentation code rather than copying it into new articles. Keep useful structure, links and emphasis.

• <br> as paragraph spacing. Give each paragraph its own <p> and set the gap with CSS margin. MDN warns that using line breaks as paragraphs can confuse screen reader navigation. Keep br for meaningful line breaks, such as an address or poem.
• <center> and <font>. Non-conforming. Their jobs belong to your stylesheet's alignment and type rules.
• align and bgcolor. Move alignment and color into CSS. Replace obsolete <strike> with <del> for an edit, or <s> for content that is no longer accurate or relevant.
• Empty headings. A heading with no text adds an unhelpful stop to the document outline. Delete it and set the gap with CSS margin. A bold paragraph is not a replacement for a real section heading.
• Inline style attributes from a paste. Valid, and a slow problem: change your theme and every pasted color stays behind.

Do not hunt for this by eye in the editor. The free HTML Beautifier puts every paragraph, heading and list item on its own line at its own depth, so a paragraph built from breaks shows up as one long <p> line with <br /><br /> in the middle of it.

What goes in the head, and what schema is worth adding

In the document head, give every article a descriptive <title> and its own meta description. Google may build its snippet from the description or from the page itself; its snippet documentation explains that choice. Keep the canonical URL pointed at the intended version of the article. A robots directive changes whether a page may be indexed: use noindex only when exclusion is intentional. The keywords meta tag is not used by Google. Your CMS should manage these head settings; do not paste head tags into the article body.

Article structured data is optional. Google’s Article documentation lists recommended properties rather than required ones. Add accurate author, image and date information that applies to the visible article; a generator such as the Article Schema Generator can help assemble it. Label publication and update dates clearly, and use <time datetime> when adding a machine-readable date in HTML. Do not change a date merely to make old content appear new.

FAQ markup is the one to watch, because the advice to add it outlived the feature. On 8 August 2023 Google limited FAQ rich results to well-known government and health sites, then retired them: the changelog records the feature ending on 7 May 2026. An FAQ section still earns its place for readers, which is a separate argument, worked through in how many questions an FAQ page should have.

From a Google Docs or Word draft to clean blog HTML

Often the real job is not picking tags at all. It is getting a draft out of Google Docs or Word into a CMS without a page of <span> wrappers and inline styles riding along.

1. Strip it back, then rebuild. Save a copy of the source. The HTML to Text Cleaner creates plain text, so expect to restore headings, links, emphasis and image context. Check its line breaks before passing the result to the Text to HTML Converter or your CMS. Plain-text conversion is useful for removing unwanted formatting, but it does not preserve the original document structure.
2. Paste straight in, then audit. Faster, and fine if your editor cleans up on paste. Check that headings are heading tags and not bold paragraphs, paragraphs are <p> and not <br> pairs, and no style="..." came along.

The Text to HTML Converter has paragraph, paragraph-with-breaks, breaks-only and custom-tag modes. In paragraph mode, a blank line starts a new paragraph; consecutive lines are joined with spaces. If your plain text has one complete paragraph per line, a custom p tag can wrap each nonempty line separately. Inspect the result rather than assuming every line is a paragraph. Avoid breaks-only mode for an ordinary multi-paragraph article.

Whichever mode you pick, the output is a whole HTML document, with a doctype, a head and a title, as the screenshot shows, so copy only the lines inside <body>. The sample's first line, the product name, came back as a paragraph like the rest: the converter does not detect headings, which is why they go back on by hand.

None of this needs a rewrite of your archive. Publish the next post as usual, run its live URL through the heading checker and the alt text extractor above, and fix what they flag. For the setup that comes before anyone reads the blog at all, see the 21 things to do before others can view your blog.

Setting these tags in Grigora without writing HTML

On classic template sites, most of the tags above are controls in Grigora's post editor rather than markup you type. The Tag setting converts a text block to H1 through H6, an image block has its own Alt Text field, and the first option on the toolbar turns a text block into a list, a quote block or a code block, so a pull quote takes a couple of clicks rather than hand-written markup. On a site made with the AI builder, ask the AI Editor for the heading level, list, quote or alt text you need.

• Lists. List Type is bullets, numbered or custom: the <ul> and <ol> choice under a friendlier name.
• Tables. Select the rows and columns, then enable headers where appropriate. Preview the table at a narrow width so long content remains available without widening the whole page.

In the classic editor, typing / in any text block opens the full list of blocks. The help center explains each of the blog elements and walks through the formatting toolbar.

Grigora's trial runs 14 days with no card needed, and the plans are here.

HTML tags for blog posts FAQs