An HTML tag is a short code in angle brackets that marks up an object on a web page, such as a heading, paragraph, list, or link. Tags tell the browser how page content is organized. For example, <h1> marks a first-level heading, while <p> marks a paragraph. section 2.2.1 section 7.2.6
Most tags work as a pair: a start tag opens the content and an end tag closes it. The end tag includes a slash. In <p>Hello!</p>, <p> begins the paragraph and </p> ends it; the words between them are the text you can safely change. section 2.2.1 section 12.2.5
A small heading and paragraph
<h1>Welcome</h1> <p>This is my home page.</p> Keep each opening tag with its matching closing tag. You can replace Welcome or the paragraph text, but do not delete the surrounding tags unless you also intend to remove that page object. section 3.4 section 4.4
Tags can also carry extra information. In <p class="entry-text">Entry text goes here.</p>, the class attribute names a set of CSS styles for that paragraph. An image tag can include an alt attribute whose value describes the image. Leave quotation marks around attribute values in place when editing them. section 5.4 section 10.8 section 5.3.2
Common practical uses include:
- Mark a page title or subtitle with <h1>...</h1> or <h2>...</h2>. section 3.4
- Add a paragraph with <p>, its text, and </p>. Some code editors add the closing tag automatically. section 9.6 section 12.2.5
- Group a heading and paragraphs into a new section with <section>...</section>. section 6.4
- Surround each list item with <li>...</li> so it remains a list item. section 9.6
- Use <details>...</details> to duplicate an existing accordion-style entry, then edit its title, date, and text. section 5.4
Some tags point the browser to files rather than wrapping visible text. A <link rel="stylesheet" href="styles.css"> tag tells the browser where to find CSS. For images, HTML refers to a separately uploaded image file; the browser retrieves and displays it where the image tag appears. A <meta charset="utf-8"> tag helps special characters such as copyright symbols, em dashes, and curly quotation marks display properly. section 5.3.1 section 10.2 section 5.3.1
<!DOCTYPE html>
<html>
<head>
<title>Pun Generator</title> #1
<style>
body { #2
font-family: Arial, sans-serif; #2
} #2
#displayPun { #3
font-size: 24px; #3
margin-top: 20px; #3
} #3
</style>
</head>
<body>
<h1>Welcome to Pun Generator!</h1> #4
<button id="generatePun">Generate Pun</button> #5
<p id="displayPun"></p> #6
<script>
var puns = [ #7
"Time flies like an arrow; fruit flies like a banana.", #7
"I used to be a baker because I kneaded dough.", #7
"I used to play piano by ear, but now I use my hands.", #7
// Add the rest of the 50 puns here... #7
];
document.getElementById("generatePun").
addEventListener("click", function() { #8
var randomPunIndex = Math.floor(Math.random() * puns.length); #8
document.getElementById("displayPun").innerText = puns[randomPunIndex]; #8
}); #8
</script>
</body>
</html>
Inspect the listing to see tags working together: the title in the browser tab, a page heading, a button, and an empty paragraph identified for displaying a pun. section 2.2.1
When customizing generated HTML, start with small edits: change text between existing tags, copy a complete section or entry when you need another one, and then revise the copied text. Matching tags matter: deleting or changing one by accident can prevent the intended heading, paragraph, list item, or section from rendering properly. section 6.4 section 7.4.3
A useful prompt for prepared writing is: “Please add HTML tags to the text, but don't generate the code for an entire web page.” This asks for structure for headings and paragraphs without asking for a full page layout. section 7.2.6
