H1 - HTML Layout
01 - The required HTML structure
- Every HTML page starts with a fixed basic structure.
- The most important parts are
<html>,<head>and<body>. - Because these words are written between
<and>, we call them tags. - Most tags have an opening tag and a closing tag. The closing tag contains an extra slash.
- A pair of tags forms a container that can hold content.
<html>
<head>
<title>Party time</title>
</head>
<body>
A website about parties.
</body>
</html>
- A tag is an HTML keyword. The tag itself is not visible on the page.
- The
<html>container holds all code for the page. - The
<head>container holds information about the page, such as the title. - The
<body>container holds everything the visitor actually sees.
Practice
- Apply this CSS concept in your practice file.
- Change one value and immediately check what changes in the browser.
02 - h1, p and title
<title>sets the title in the browser tab.<h1>is the main heading of the page.<p>is used for a normal paragraph of text.- A page usually has one clear
<h1>.
<title>My first website</title>
<h1>Welcome to my website</h1>
<p>This is my first paragraph.</p>
Practice
- Apply this CSS concept in your practice file.
- Change one value and immediately check what changes in the browser.
03 - Using strong and em
<strong>marks text as important.<em>gives text emphasis.- Browsers usually show strong text in bold and emphasized text in italic.
- Use these tags for meaning, not just because you like the visual style.
<p>This word is <strong>important</strong>.</p>
<p>This word has <em>emphasis</em>.</p>
Practice
- Apply this CSS concept in your practice file.
- Change one value and immediately check what changes in the browser.
04 - What are h2 to h6 for?
Headings create structure. After the main heading <h1>, use
<h2> for main sections and <h3> for subsections.
Continue with <h4>, <h5> and <h6> only when the structure really needs it.
<h1>Animals</h1>
<h2>Mammals</h2>
<h3>Cats</h3>
Practice
- Apply this CSS concept in your practice file.
- Change one value and immediately check what changes in the browser.
05 - Putting content in containers
HTML elements can contain other HTML elements. Think of containers as boxes that must fit completely inside each other. If you open a container inside another container, close the inner one before you close the outer one.
<main>
<section>
<h2>News</h2>
<p>This text belongs to the news section.</p>
</section>
</main>
<main>contains the main content of a page.<section>groups content that belongs together.<article>can be used for content that can stand on its own.<nav>is used for navigation links.
Practice
- Apply this CSS concept in your practice file.
- Change one value and immediately check what changes in the browser.
06 - Meta description and meta keywords
- Meta tags are placed inside the
<head>. - The meta description gives a short description of the page.
- That text can be shown in search results.
- Meta keywords used to be common, but modern search engines barely use them anymore.
<meta name="description" content="Discover useful facts about holidays.">
<meta name="keywords" content="holidays, christmas, easter, new year">
Practice
- Apply this CSS concept in your practice file.
- Change one value and immediately check what changes in the browser.
07 - Checking with the W3C Validator
Use the W3C Markup Validator to check whether your HTML follows the standard.
- Open the validator.
- Choose the option to paste your HTML.
- Paste your code and run the check.
- Read the messages and fix the first error first.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="A clear page about holidays.">
<title>Holiday website</title>
</head>
<body>
<main>
<h1>Welcome to my holiday website</h1>
<p>This is the visible content.</p>
</main>
</body>
</html>
Practice
- Apply this CSS concept in your practice file.
- Change one value and immediately check what changes in the browser.