A page can look right and be broken
Checking a web page means testing it for mistakes before other people see it. A page can look right and still have no title, an image with no description or a link to nothing.
A short check of a page's structure, size and loading finds these faults early.
By the end of this lesson
Note
I can check a page for structure and size.
Key words
| Word | What it means | Example |
|---|---|---|
| Validator | a tool that checks markup against the rules | |
| Alt text | words that describe an image for people who cannot see it | |
| Page weight | the total bytes a page needs to load | |
| Status code | a number saying how a request went | 404 |
| Cache | a saved copy a browser reuses instead of asking again |
The cells students fill in are left blank in this preview.
Five structure faults are easy to find
A script can read the HTML and find faults that nobody notices by eye. The usual five are these. There is no title. The html element has no lang. An image has no alt. The page does not have exactly one h1. Two elements share one id.
Each fault hurts somebody. A screen reader cannot describe an image with no alt text. A search result shows no title for a page with none.
Worked example: five faults and their fixes
| Fault | Who it hurts | Fix |
|---|---|---|
| No title element | Search results and browser tabs | Add a title in the head |
| No lang on html | Screen readers choose the wrong voice | Add lang="en" |
| Image with no alt | Users who cannot see the image | Describe it, or use alt="" |
| No h1, or two | Users who jump by heading | Use exactly one h1 |
| Same id twice | Scripts and links find the wrong one | Make each id unique |
The cells students fill in are left blank in this preview.
Check every link on the lab page
docker exec jupyter python3 steps/links.pyShown here, not run. Create a free account to press Run and type it into your own lab’s terminal.
A link check finds links to nothing
The script prints each link, where it goes and what kind it is. Three links go to a place on the same page, and each says found, so the id they point at exists. One goes to a file in the same folder. One goes to another site.
A link that said MISSING would be a link to nothing, and a click would do nothing at all.
A common mistake
Warning
Many people think a page that looks right is correct. It may not be. Many faults are invisible on the screen. Check the structure with a script or a validator as well as by eye.
Page weight is the bytes a page needs
Every file a page loads is counted in bytes. A page's weight is the sum. The bigger it is, the longer a visitor waits, most of all on a slow connection.
The time is the bytes divided by the speed of the connection. Photos are usually the biggest part, so shrinking a picture saves more than shortening a script.
Print the size of each file
docker exec jupyter python3 steps/sizes.pyShown here, not run. Create a free account to press Run and type it into your own lab’s terminal.
Worked example: time from size and speed
| Item | Bytes | Seconds at 100,000 bytes a second |
|---|---|---|
| The three lab files | 3,591 | under 0.04 |
| One large photo | 2,000,000 | 20 |
| The same photo, shrunk | 200,000 | 2 |
| Page with the large photo | 2,003,591 | just over 20 |
The cells students fill in are left blank in this preview.
The lab page is very small
The script prints index.html at 1373 bytes, style.css at 1125 and app.js at 1093, with a total of 3591 bytes. That is tiny, because the page has no pictures.
The speed in the table is made up to show the arithmetic. It is not a measurement. A real speed varies from one visit to the next.
Status codes and caching decide how it loads
Every file a page needs is a request, and every answer has a status code. 200 means it worked. 404 means not found, so a page that asks for a missing file shows a gap or an error. 500 means the server failed.
A cache keeps a copy so the browser can skip the request. The server says how long a copy is good for in a header.
Ask the preview server for the page
docker exec jupyter python3 steps/serve.pyShown here, not run. Create a free account to press Run and type it into your own lab’s terminal.
The server answered, and it named each type
The output says status 200, then the page's title, Lunch menu. It then says style.css 200 text/css. The server found the stylesheet and said what kind of file it is.
An old copy in a browser cache can hide a change you have saved. A hard reload asks the server for fresh copies of every file.
A header that allows caching (an example)
HTTP/1.1 200 OK
Content-Type: text/css
Cache-Control: max-age=3600
# An example of a response, not output from the lab.
# max-age=3600 lets the browser reuse the file for 3600 seconds, one hour,
# without asking the server again.