Article Markup Mistakes That Break Your Template

Lists that are not lists

A dash, some text, a line break, repeat:

- First item<br>
- Second item<br>
- Third item<br>

It looks like a list and behaves like nothing. Your template's list styling never applies, indentation and spacing are whatever the line breaks happen to produce, and a screen reader announces one long run of text instead of "list, three items".

<ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ul>

The same applies to numbered lists: use <ol> and let the browser number them. Typed numbers go wrong the moment someone inserts an item in the middle.

Paragraphs made of line breaks

Two <br> tags look like a paragraph break and are not one. Paragraph spacing, first-line rules, and any typographic styling your template applies to <p> all pass this text by. Press Enter for a new paragraph, Shift+Enter when you genuinely want a line break inside one — an address, a line of verse.

Headings made of font size

This one costs you more than looks:

<span style="font-size: 24px;">Section title</span>

It is big text, not a heading. It does not appear in a table of contents, search engines get no structural signal from it, and readers navigating by heading skip straight past it. Use <h2> and <h3>, and let the template decide the size.

Start at <h2>. The article title is already the <h1> on the page, and a second one competes with it.

Prepositions stranded at the end of a line

A one or two letter word left dangling at the end of a line is the classic sign of untended typography. Bind it to the word that follows with a non-breaking space:

Published in the Joomla 6 release notes

Worth doing in headlines and pull quotes, where the eye lands and the line is short enough for it to matter. In body text at normal measure it rarely repays the effort.

Images with no breathing room

An image butted against the text is a stylesheet problem, not an article problem — and the fix belongs in the stylesheet, not in inline styles typed into each article:

.article-body img {
    max-width: 100%;
    height: auto;
    margin-block: 1.5rem;
}

Inline margins pasted into individual articles are invisible to whoever redesigns the site later, and they are the reason so many old articles look wrong under a new template.

Read more in the wrong place

The read-more break splits the article into intro text and full text — two separate fields in the database, each rendered on its own. If you drop the break inside an open element, the intro gets closed off and the remainder starts orphaned:

<div class="note">
    First half of the sentence
    <!-- read more break lands here -->
    and the second half
</div>

The listing page renders a <div> that never closes, the article page starts with a fragment. Put the break between top-level blocks, never inside one.

Pasted from Word

Word carries its own markup: font declarations, class names referring to styles that do not exist on your site, conditional comments, and occasionally hundreds of empty spans. It renders acceptably on the day it is pasted and then fights every template change afterwards.

Paste as plain text and apply formatting in the editor, or paste into a plain text editor first. If a team keeps doing it, TinyMCE has a paste-as-text setting that can be enforced in the editor's plugin configuration rather than relied on as a habit.

How to check what you actually published

Open the source view in the editor before saving. Two minutes there catches every problem on this list, and it is the only way to see what you have really got — the visual editor is designed to make bad markup look fine.