What you will learn
- Write a valid HTML document with doctype, head and body
- Choose semantic elements instead of generic div elements where they fit
- Use headings, links, images and lists correctly
Every HTML page starts with <!DOCTYPE html>, followed by an <html> element containing a <head> and a <body>. The head holds information about the page, such as the <title>, the character set and the viewport setting. The body holds everything visitors see. Elements are written as opening and closing tags, and many take attributes, like the href on a link.
Semantic elements describe what content is, not how it looks. Use <header> for the top of a page, <nav> for the main menu, <main> for the primary content, <article> or <section> for distinct blocks, and <footer> at the bottom. Screen readers use these landmarks to help people jump around a page, and search engines use them to understand its structure.
Headings run from <h1> to <h6> and should form an outline, with one <h1> describing the page and lower levels nested beneath it. Use <a href> for links, <ul> or <ol> for lists, and <button> for actions. Every <img> needs an alt attribute describing the image, or an empty alt if it is purely decorative. Good structure comes before any styling.