Headings & Paragraphs
There are six heading levels: <h1> through <h6>. Use only one <h1> per page (main title). Use <h2> for sections, <h3> for subsections, and so on.
<p> wraps paragraphs of text. Browsers add spacing above and below automatically.
Links and Images
Links: <a href="url">text</a>. Use target="_blank" to open in a new tab. Relative links (href="about.html") point to pages on the same site.
Images: <img src="photo.jpg" alt="Description"/>. The alt attribute is required — screen readers read it aloud and browsers show it if the image fails to load.
Lists
<ul> (unordered) creates a bulleted list. <ol> (ordered) creates a numbered list. Each item uses <li>. Lists can nest inside each other.
Block vs. Inline Elements
Block elements take up the full width and start on a new line: <div>, <p>, <h1>–<h6>, <ul>, <section>.
Inline elements only take up as much space as their content and flow with text: <span>, <a>, <strong>, <em>, <img>.
💡
Semantic HTML = Better SEO + Accessibility
Use <article>, <section>, <aside>, <nav>, <header>, and <footer> instead of generic <div>s whenever possible. Search engines and screen readers understand your page's structure better — boosting both SEO and accessibility.