HTML is the markup language browsers use to organize a web page’s structure and layout. It marks where an element begins and ends: a heading, paragraph, image, link, table, or other page component. Tags tell the browser what kind of content it is displaying; for example, <h1> starts a main heading and </h1> ends it. section 7.2.1 section 7.2.2
For a WordPress site, HTML is useful when the built-in editor, widget, or plugin is too limiting for a small job. You can paste generated or copied code into the Text view of an Edit Page screen, then update or publish the page and check the visual result. AI can create a starting point, but review the result and request revisions when needed. section 1.5.14 section 8.3.3
Common tags give content a recognizable role:
- <h1> through <h6> create headings, from most important to least important, and establish hierarchy among page sections. section 7.2.2
- <p> marks a paragraph; <div> and <span> group or designate areas of page content. section 7.2.2
- <a> creates a hyperlink, while <img> places an image and <table> organizes information into a table. section 7.2.2
- A complete start-tag, content, and end-tag unit is an HTML element. section 7.2.2
Build a table, then refine it
A prompt such as “List the five largest lakes in the US. Present the results in an HTML table” can produce a table using <table>, <tr>, <th>, and <td>. Paste the result into the WordPress Text tab. If the headings need a different appearance, request a revision such as black, white, all-caps column headings, then compare the rendered result and refine again. section 1.5.14
HTML supplies the page structure, while CSS changes its visual presentation and JavaScript describes behavior. A plain HTML button can link visitors elsewhere, but CSS can change its colors, padding, borders, and shape. JavaScript can respond to a click without refreshing the page, such as revealing an initially hidden information block. section 3.5.3 section 5.10.2
<html>
<head>
<style>
#paintingInfo {
display: none;
}
</style>
</head>
<body>
<button id="moreInfoBtn">More information...</button>
<div id="paintingInfo">
<form>
<p>
This painting is 60 x 80 inches
and weighs 6 pounds. It is for sale at $4,000.
You can contact FbreahaXX@hotmail.com for
additional details and purchase instructions.
</p>
</form>
</div>
<script>
document.getElementById('moreInfoBtn')
.addEventListener('click', function() {
document.getElementById('paintingInfo')
.style.display = 'block';
});
</script>
</body>
</html>
Inspect this complete example to see HTML structure surrounding a button and information block, CSS that hides the block, and JavaScript that reveals it after a click. section 5.10.2
When a page does not look as expected, open the browser Inspector by right-clicking the page and choosing Inspect. Its HTML pane shows the selected element, while the styles pane shows CSS rules applied to it. This helps connect visible page content to its markup and identify styles that have been overridden. section 7.3
HTML also carries embed code. After copying a video’s embedding code, place the cursor where the player should appear, switch the WordPress editor to its Text tab, paste the code, update the page, and view it to test playback. section 8.3.3
