HTML (HyperText Markup Language) tells a browser how content is structured: which text is a heading or paragraph, which items belong in a list, and where a link or image sits. CSS generally controls presentation, including typography, color, and spacing. A WordPress content editor does not need to rebuild a site; a working grasp of HTML helps with reading a draft, making a limited correction, and checking what the site displays.
The example below uses illustrative text and an image path. It follows the decisions an editor might make when reviewing a small article section in an unpublished WordPress draft.
HTML gives an article structure, not a fixed appearance
An HTML element is often made up of an opening tag, content, and a closing tag. In <p>Review the section.</p>, <p> opens a paragraph, the words are its content, and </p> closes it. An attribute adds information to an element. In <a href="https://example.com/guide">read the guide</a>, href is the attribute that identifies the link destination.
HTML and CSS answer different questions. HTML identifies a heading as a heading; CSS and the site’s theme can determine its size, color, and spacing. So a heading that looks smaller than expected may be a presentation issue. If the text is marked up as an ordinary paragraph instead of a heading, that is a structural issue to correct or hand off.
A WordPress article body is usually a fragment of HTML, not a complete HTML document. A complete document has outer elements such as <!doctype html>, <html>, <head>, and <body>. The article content in this guide belongs within the page body; those document-level wrappers are not needed around a fragment entered into an article block.
Choose the WordPress editing surface before changing markup
Start with an unpublished draft and save a copy of the original content in the team’s usual working location. Locate the block containing the issue, then decide whether you are correcting that block or adding a separate fragment. These are different editing tasks.
In the WordPress block editor, some supported blocks provide an “Edit as HTML” option in the block’s options. The control available depends on the block, editor version, site configuration, and your permissions; not every installation exposes the same choices. Use the option when the change belongs to that selected block, such as fixing a link destination or a paragraph boundary.
A Custom HTML block is for entering a standalone HTML fragment at a chosen place in the article. It is not a replacement for the complete post, and the fragment should not include <html>, <head>, or <body> wrappers. Permissions can limit access to this block, and markup that does not fit the editor’s block structure may produce a warning or behave unexpectedly. If that happens, keep your saved copy and ask the WordPress owner to review it rather than repeatedly pasting the code.
Make one small change at a time. Avoid theme-file edits or scripts to solve an article-level markup problem. If the source is a Word document, [opening a Word Doc in Google Docs without creating publishing cleanup] can help with the earlier document-preparation step.
opening a Word Doc in Google Docs without creating publishing cleanup
Read the fragment and identify what each element contributes
This short article fragment is illustrative. The text, URL, and image path are examples, and the image file is not assumed to exist in your WordPress media library.
<h2>Prepare the draft for review</h2>
<p>Check the content structure before asking for approval.</p>
<ul>
<li>Confirm the section heading.</li>
<li>Test the linked destination.</li>
</ul>
<p>For more detail, <a href="https://example.com/editorial-checklist">read the editorial checklist</a>.</p>
<img src="/images/review-checklist.png" alt="A checklist with heading, link, and image review steps">
The <h2> marks a section heading. Pick a heading level that fits the surrounding page hierarchy, not one that merely looks right; the post title commonly serves as the main page heading, with article sections beneath it. Each <p> marks a paragraph. <ul> begins an unordered list, and each <li> marks one item in that list. The link’s visible words form its anchor text, while href supplies the destination. For the image, src identifies the file location and alt supplies a text alternative describing its useful content or purpose. Follow the site’s accessibility practice for a decorative image rather than adding a misleading description.
A frequent structural mistake is leaving a paragraph open when starting a list. For example:
<p>Check these items:
<ul>
<li>Heading</li>
<li>Link</li>
</ul>
Close the paragraph before opening the list:
<p>Check these items:</p>
<ul>
<li>Heading</li>
<li>Link</li>
</ul>
That change clarifies the content structure; it does not prescribe how much space the theme places between the paragraph and list. If you need a wider walkthrough of document export and markup review, use the [Google Docs to HTML guide].
Google Docs to HTML Converter: A Clean Export and QA Workflow
Compare the rendered draft with the intended structure
After a small edit, save the draft and open its front-end preview. Check the content in its destination context. The editing screen can show markup or blocks, but the preview reveals whether the site renders the structure and media as intended.
| Element or check | Pass when | If it needs correction |
|---|---|---|
| Heading | The section title appears as a heading in the correct order and at a level that fits the page hierarchy. | If it is a paragraph or the level is wrong, review the block structure. If only its size or spacing differs, check whether the theme controls that presentation. |
| Paragraphs | Each intended paragraph is separate, and the approved words are intact. | Check for a missing closing tag or an unintended break. Restore text from the maintained source if anything is missing or changed. |
| List | Both items appear separately, in the intended order, as a bulleted list. | Confirm each item has its own <li> inside <ul>. If content has disappeared or moved, compare it with the source before editing further. |
| Link | The expected phrase is linked and opens the approved destination. | Compare both the visible words and href. Fix a clear transcription error; ask for clarification if the destination is uncertain. |
| Image | The intended asset loads and appears in the intended position. | A local or placeholder src may not resolve on the WordPress site. Use the approved asset through the site’s media workflow; do not substitute an unapproved image. |
| Alternative text | The image has a useful text alternative, or the site’s practice for decorative images is followed. | Replace a filename or unrelated description. If the image’s purpose is unclear, ask the content owner before deciding what the text should convey. |
| Narrow-screen view | Text and media remain readable and usable without clipping or unwanted sideways scrolling. | Check the block and image sizing. If the structure is correct but the layout still fails, send the presentation issue to the site owner. |
These checks separate markup defects from theme differences. For instance, a correctly structured heading may have different typography on two sites. That is not, by itself, evidence of broken HTML; a heading rendered as paragraph text is a structural mismatch.
A preview is one part of a broader [CMS publishing workflow]; keep the draft unpublished until the team’s normal review and approval are complete.
Record corrections and return the draft for approval
Leave a concise handoff note after reviewing the preview. This is a recommended editorial procedure, not a special WordPress feature. It gives the next reviewer enough context to confirm the change and identify any open decision.
Changed block or location:
Reason for change:
Preview checks completed: heading / paragraphs / list / link / image / narrow-screen view
Unresolved issue:
Reviewer:
Source document correction needed: yes / no — details:
Name the changed location using nearby content, such as “the list below ‘Prepare the draft for review,’” and describe the action: “closed the paragraph before the list.” Record any unresolved question instead of making an unapproved choice. If a separate source document remains authoritative, make or request the same correction there so a later transfer does not reintroduce the problem.
Apply the acceptance checks to one unpublished draft before approval. Return it to the reviewer with the completed note, and leave publication to the team’s normal approval process.