HTML
You might say
The code AI wrote has a bunch of angle brackets and English words. What are those for?
Describe the structure and meaning of a web pageHTML organizes a page into headings, paragraphs, links, forms, images, and other meaningful elements. CSS controls appearance and JavaScript adds behavior. Choosing the right element improves accessibility, keyboard behavior, search, and maintenance.
You can say this to an AI Agent
Review this article's HTML structure: use the correct heading element for the page title, a real link for View source, and buttons for actions. Preserve the visual styling and verify every link and button with a keyboard.
When to use it
- Build page structureA project report for people to readClear headings, highlights, images, and sections
Help readers quickly scan for what matters to them.HTML turns content into a reading experience. - Mark headings and sections🔒 report.example.com/launchNew product launch reportOpen pageSend a URL and anyone can view it in a browser.
- Create forms and links with native behavior▶ Video↗ LinkFill out formA page can provide interactive elements such as media, links, and forms.
- Give content machine-readable meaning# Launch plan
- Launch this week→Launch plan· Launch this week
When NOT to use it
- Use generic div elements for every role<div> card
The content that follows may still be inside this element…A missing </div> makes the DOM structure differ from what you expect. - Choose tags only for their default appearance<b><i>text</b></i>The tags overlap improperly; the browser may rearrange them during error recovery.
- Skip heading levels to get a larger font<head> Welcome to my websiteThe structure is invalid; the browser may move the content into body during error recovery.
- Put unsafe user content directly into HTMLWindex.html → Save as .docxDOCX is not HTML; browsers do not parse it as page structure.
Anatomy
<a href="https://vibe.guide">Click to see</a>
Add angle brackets to the tag name to tell the browser "Start here"
Additional information written in the start tag, such as link address and image path
The part between the two pairs of angle brackets, only change this part when modifying the copy.
An extra slash tells the browser "end here"
Variants
div
<div> … </div>
Use it to organize content and layout when there are no more appropriate semantic tags
Headings & p
<h1> <p>
Titles and paragraphs, the skeleton of the article
Link & Image
<a> <img>
a jumps to the URL, img posts the picture
Button & Input
<button> <input>
Interactive parts that can be clicked and filled on the page
Typical use cases
Page document
Help me make a personal homepage
Okay, here is your index.html:
<h1>Xiaoli's homepage</h1>
<p>I like climbing mountains and taking pictures. </p>
<a href="/photos">View my photo album</a>
Article
Form
Navigation
Recommended tool
Web fine-tuning tool · Selector Pro
Select page elements for precise AI edits
Click a button, text, or card, note the change, then copy its exact location to AI.
Open Selector Pro website↗Further reading
Quick check