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.
When to use it
- Build page structure
- Mark headings and sections
- Create forms and links with native behavior
- Give content machine-readable meaning
When NOT to use it
- Use generic div elements for every role
- Choose tags only for their default appearance
- Skip heading levels to get a larger font
- Put unsafe user content directly into HTML
Anatomy
<a href="https://vibe.guide">Click to seea>
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 homepageh1>
<p>I like climbing mountains and taking pictures. p>
<a href="/photos">View my photo albuma>
Article
Form
Navigation
Further reading