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.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
An HTML element is often made up of an opening tag, content, and a closing tag. In HTML and CSS answer different questions. HTML identifies a heading as a heading; CSS and the site\u2019s 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.<\/p>\n\n\n\n A WordPress article body is usually a fragment of HTML, not a complete HTML document. A complete document has outer elements such as Start with an unpublished draft and save a copy of the original content in the team\u2019s 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.<\/p>\n\n\n\n In the WordPress block editor, some supported blocks provide an \u201cEdit as HTML\u201d option in the block\u2019s 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.<\/p>\n\n\n\n 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 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.<\/p>\n\n\n\n opening a Word Doc in Google Docs without creating publishing cleanup<\/a><\/p>\n\n\n\n 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.<\/p>\n\n\n\n The A frequent structural mistake is leaving a paragraph open when starting a list. For example:<\/p>\n\n\n\n Close the paragraph before opening the list:<\/p>\n\n\n\n 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].<\/p>\n\n\n\n<p>Review the section.<\/p><\/code>, <p><\/code> opens a paragraph, the words are its content, and <\/p><\/code> closes it. An attribute adds information to an element. In <a href=\"https:\/\/example.com\/guide\">read the guide<\/a><\/code>, href<\/code> is the attribute that identifies the link destination.<\/p>\n\n\n\n<!doctype html><\/code>, <html><\/code>, <head><\/code>, and <body><\/code>. 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.<\/p>\n\n\n\nChoose the WordPress editing surface before changing markup<\/h2>\n\n\n\n
<html><\/code>, <head><\/code>, or <body><\/code> wrappers. Permissions can limit access to this block, and markup that does not fit the editor\u2019s 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.<\/p>\n\n\n\nRead the fragment and identify what each element contributes<\/h2>\n\n\n\n
<h2>Prepare the draft for review<\/h2>\n<p>Check the content structure before asking for approval.<\/p>\n<ul>\n <li>Confirm the section heading.<\/li>\n <li>Test the linked destination.<\/li>\n<\/ul>\n<p>For more detail, <a href=\"https:\/\/example.com\/editorial-checklist\">read the editorial checklist<\/a>.<\/p>\n<img src=\"\/images\/review-checklist.png\" alt=\"A checklist with heading, link, and image review steps\">\n<\/code><\/pre>\n\n\n\n<h2><\/code> 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><\/code> marks a paragraph. <ul><\/code> begins an unordered list, and each <li><\/code> marks one item in that list. The link\u2019s visible words form its anchor text, while href<\/code> supplies the destination. For the image, src<\/code> identifies the file location and alt<\/code> supplies a text alternative describing its useful content or purpose. Follow the site\u2019s accessibility practice for a decorative image rather than adding a misleading description.<\/p>\n\n\n\n<p>Check these items:\n<ul>\n <li>Heading<\/li>\n <li>Link<\/li>\n<\/ul>\n<\/code><\/pre>\n\n\n\n<p>Check these items:<\/p>\n<ul>\n <li>Heading<\/li>\n <li>Link<\/li>\n<\/ul>\n<\/code><\/pre>\n\n\n\n