Web Development
HTML for structure and CSS for style, how a browser turns your code into a page, and how to build a site that works for everyone.
HTML: structure
HTML, HyperText Markup Language, describes the structure of a page. It says what things are, not what they look like.
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Welcome</h1>
<p>This is a paragraph of text.</p>
<img src="cat.jpg" alt="A ginger cat asleep on a keyboard">
<a href="page2.html">Go to page two</a>
</body>
</html>Key elements
| Tag | Purpose |
|---|---|
<h1> to <h6> | Headings, h1 most important |
<p> | A paragraph |
<a href="..."> | A link |
<img src="..." alt="..."> | An image |
<ul> and <li> | An unordered list and its items |
<ol> and <li> | A numbered list |
<div> | A block section of the page |
<span> | A small inline section |
<table>, <tr>, <td> | A table, a row, a cell |
Rules
- Most tags come in pairs:
<p>opens and</p>closes - Tags must be nested correctly.
<p><strong>text</strong></p>is right,<p><strong>text</p></strong>is wrong - Some tags are self closing, such as
<img>and<br> - The
altattribute on an image is not optional. Screen readers use it, and it displays if the image fails to load.
HTML says what something is. CSS says what it looks like. Keeping them separate means you can restyle an entire website by editing one CSS file.
- HTML marks up the structure. An element has an opening tag, content and a closing tag, and a tag can carry attributes.
- CSS describes the style. A rule has a selector, and declarations that are each a property and a value.
- The same HTML looks plain on its own and is transformed by a stylesheet.
CSS: style
CSS, Cascading Style Sheets, controls appearance.
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #222222;
}
h1 {
color: #03969d;
text-align: center;
}
p {
font-size: 16px;
line-height: 1.6;
}
.highlight {
background-color: yellow;
padding: 10px;
}
#header {
border-bottom: 2px solid #83749f;
}Selectors
| Selector | Selects |
|---|---|
p | Every paragraph |
.highlight | Every element with class="highlight" |
#header | The single element with id="header" |
Use a class when several elements share a style. Use an id when there is exactly one such element on the page.
Common properties
colorsets the text colour,background-colorsets the backgroundfont-family,font-size,font-weightmarginis space outside an element,paddingis space inside itborder,text-align,width,height
Where CSS goes
- External in a separate
.cssfile linked from the head. Best, because one file styles every page. - Internal inside
<style>tags in the head. Only affects that page. - Inline using a
styleattribute on a tag. Avoid it, because it mixes structure with style and cannot be reused.
Step 1 of 4 HTML marks up the structure: a heading, a paragraph, a link.
Building a site people can use
Accessibility
A website should work for everyone, including people using a screen reader, people who cannot use a mouse, and people with limited vision.
- Alt text on every image that carries meaning
- Good colour contrast between text and background
- Headings in order, h1 then h2 then h3, because screen readers use them to navigate
- Links that describe their destination. "Read the safety guidance" is useful, "click here" is not.
- Everything reachable by keyboard, not just by mouse
- Text that can be enlarged without the layout breaking
Navigation
- The same navigation on every page, in the same place
- No more than a few clicks to reach anything
- The user should always be able to tell where they are
Testing
- Check every link works
- View the site on a phone as well as a computer
- Ask someone else to find something on it and watch where they struggle
- Check it still makes sense with images turned off
You know where everything is because you built it. Watching one other person try to use it will teach you more than an hour of looking at it yourself.
Key terms you must be able to define
- HTML
- HyperText Markup Language, used to describe the structure and content of a web page.
- CSS
- Cascading Style Sheets, used to control the appearance of a web page.
- Tag
- An HTML instruction written in angle brackets, usually in an opening and closing pair.
- Attribute
- Extra information inside a tag, such as href on a link or src on an image.
- Class
- A CSS selector used to style several elements that share the same appearance.
- Id
- A CSS selector used to style one unique element on a page.
- Alt text
- A written description of an image, used by screen readers and shown if the image fails to load.
- External stylesheet
- A separate CSS file linked from a page so one file can style an entire website.
- Accessibility
- Designing so that a website can be used by everyone, including people with disabilities.
Flashcards
Say the definition out loud before you flip the card. Retrieving it from memory is what builds recall, reading it again is not.
Reach the top grade on this topic
The top level here is about explaining why, not just knowing which tag does what.
Explain the separation of HTML and CSS properly. HTML defines structure and CSS defines appearance, and keeping them separate means a single external stylesheet can restyle a hundred page site in one edit.
Justify class against id. A class can be used many times, an id identifies one unique element. Using an id for something that appears repeatedly is invalid.
Take accessibility seriously. Alt text is not a box to tick. Without it, a person using a screen reader has no idea what the image shows, and the page becomes unusable to them.
- Write valid HTML with correctly nested tags
- Write CSS using an element selector, a class and an id
- Explain three ways to make a website accessible and why each matters
- Explain the advantage of an external stylesheet over inline styles
Mistakes that cost marks here
- Forgetting to close tags, or closing them in the wrong order.
- Leaving out alt text on images.
- Using inline styles everywhere, which makes the site impossible to restyle consistently.
- Using the same id on more than one element. Ids must be unique.
- Using headings for their size rather than their meaning, which breaks screen reader navigation.
The very first web page is still online at its original address, published in 1991. It is plain text with a few links and no styling at all, because CSS had not been invented yet.
Knowledge check
Exam-style questions
Five written questions in the style of the real paper. Write a full answer, then let the marker check it against the mark scheme.
- LHTML defines the structure and content of the page
- LCSS defines the appearance or style
HTML is used to define the structure and content of a web page, describing what each part of the page is, such as a heading, a paragraph, a list or an image. CSS is used to control the appearance of those elements, setting things such as colours, fonts, spacing and layout.
- LCorrect h1 tag with the text Welcome
- LCorrect paragraph tags
- LCorrect img tag with a src attribute
- LSuitable alt text describing the image
<h1>Welcome</h1> <p>This is a paragraph of text about the website.</p> <img src="dog.jpg" alt="A golden retriever running across a field"> The h1 tag marks the most important heading on the page. The paragraph tags open and close around the text. The img tag is self closing and needs a src attribute giving the file name, plus an alt attribute describing what the image shows so that people using a screen reader still receive the information.
- LOne stylesheet can be linked from every page of the site
- LA style change only has to be made in one place
- LIt keeps structure and appearance separate, making the code easier to read and maintain
An external stylesheet is a single CSS file that every page of the website links to, so the same styles are applied consistently across the whole site. This means that if the design needs to change, for example altering the heading colour or the body font, the edit is made once in that one file and every page updates immediately, whereas inline styles would have to be found and changed on every element on every page. It also keeps the HTML focused purely on structure and content while the CSS handles appearance, which makes both files considerably shorter, easier to read and far easier to maintain.
- LAlternative text on images
- LSo that screen reader users know what the image shows
- LGood colour contrast between text and background
- LSo that text is readable for people with limited vision or colour blindness
- LFull keyboard access without needing a mouse
- LHeadings used in the correct order so screen readers can navigate the structure
The first feature is alternative text on every meaningful image. A screen reader cannot interpret a picture, so it reads out the alt text instead, which means a blind user receives the same information as everyone else. Without it, the image is announced simply as an image and the content is lost. The second feature is strong colour contrast between text and its background. People with limited vision, and anyone reading a screen in bright sunlight, cannot read light grey text on a white background, so choosing colours with sufficient contrast makes the site readable for far more people. The third feature is full keyboard access. Many people cannot use a mouse, whether because of a motor impairment or because they rely on assistive technology, so every link, button and form field must be reachable and usable with the keyboard alone. Alongside these, using headings in the correct order matters greatly, because screen reader users navigate a page by jumping between headings, and skipping levels or using headings purely for their size makes that structure meaningless.
- LA class can be applied to many elements
- LAn id must be unique to one element on the page
- LUse a class for a shared style and an id for a single unique element
A class is used when several elements on a page should share the same appearance, and the same class can be applied to as many elements as needed, so a class called warning could style every warning box on the site. An id is used to identify one specific element, and each id must be unique within a page, so an id called mainHeader would apply to the single header at the top. In CSS a class is selected with a full stop before its name and an id with a hash. In practice classes are used far more often, because most styling applies to groups of similar elements, and ids are reserved for unique landmarks or for linking to a particular point in the page.