[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","layouts/app-shell",{"_256":-5,"_9":10},"routes/subjects.$subject.topics.$topic",{"_9":10,"_11":12,"_13":14,"_15":16},"guest",true,"subjectTitle","HTML for Beginners","topicTitle","Links, Images and File Paths","questions",[17,18,19,20,21,22,23,24,25,26,27,28],{"_29":238,"_31":239,"_33":240,"_35":36,"_37":241,"_39":242,"_41":243},{"_29":220,"_31":221,"_33":222,"_35":36,"_37":223,"_39":224,"_41":225},{"_29":202,"_31":203,"_33":204,"_35":36,"_37":205,"_39":206,"_41":207},{"_29":184,"_31":185,"_33":186,"_35":36,"_37":187,"_39":188,"_41":189},{"_29":166,"_31":167,"_33":168,"_35":36,"_37":169,"_39":170,"_41":171},{"_29":148,"_31":149,"_33":150,"_35":36,"_37":151,"_39":152,"_41":153},{"_29":130,"_31":131,"_33":132,"_35":36,"_37":133,"_39":134,"_41":135},{"_29":112,"_31":113,"_33":114,"_35":36,"_37":115,"_39":116,"_41":117},{"_29":94,"_31":95,"_33":96,"_35":36,"_37":97,"_39":98,"_41":99},{"_29":76,"_31":77,"_33":78,"_35":36,"_37":79,"_39":80,"_41":81},{"_29":58,"_31":59,"_33":60,"_35":36,"_37":61,"_39":62,"_41":63},{"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42},"id","cmuo4z1yz01yu20jxxibyzo4y","stem","

holds the caption words. The author wants the caption properly tied to the photo. Which line is wrong?","codeBlock","
\n $\"Stone$ \n
\n
The old bridge, built in 1820.
","codeLang","html","notes","## `
` and `
`\n\n- `
` wraps something that stands on its own, like a picture, chart, code sample or quote.\n- `
` is the caption that everyone can see. Put it first or last inside `
`. Use only one.\n- A caption does **not** replace `alt`. The `alt` describes the picture. The caption adds extra facts for everyone.\n\n```html\n
\n $\"Eiffel$ \n
The Eiffel Tower, Paris, 2024.
\n
\n```","explanation","A
only counts as a caption when it sits inside a
, as its first or last child. Here it is outside, so it's just loose text. The browser still shows the words, but nothing ties them to the photo. Fix: move line 4 up, above
. alt and a caption do different jobs. alt describes the image for people who can't see it. The caption is extra information everyone reads. So keep both.
has no src; the image keeps its own.","options",[43,44,45,46],{"_29":56,"_48":57,"_33":-5,"_50":51},{"_29":54,"_48":55,"_33":-5,"_50":10},{"_29":52,"_48":53,"_33":-5,"_50":51},{"_29":47,"_48":49,"_33":-5,"_50":51},"cmuo4z1z601yy20jxvglguck4","text","Line 1:
needs its own src saying where the picture is.","isCorrect",false,"cmuo4z1z501yx20jxugvr0iau","Line 2: a picture inside
shouldn't have alt text, because the caption does that job.","cmuo4z1z301yw20jx9vyae6u4","Line 4: the caption is outside the
, so it isn't tied to the picture. Move it inside, before
.","cmuo4z1z101yv20jx6ndzeyqs","Line 4: the caption should go in the alt text, not in
.","cmuo4z1ys01yp20jxxeau3zmy","Why is it a good idea to give a picture a width and height, like below?","
Our garden
\n $\"Rows$ \n
We grow everything ourselves.
","## The `` element\n\n- `` puts a picture on the page.\n- It has no closing tag, because nothing goes inside it.\n- `src` is where the picture file is. It follows the same path rules as links.\n- `alt` is the words that stand in for the picture (see the next section).\n- `width` and `height` give the size in pixels, as plain numbers with no units. They let the browser save room for the picture before it loads, so the page doesn't jump around. CSS can still change the size.\n\n```html\n $\"A$ \n```","Images often load after the text. If the browser doesn't know the size, it leaves no room, then pushes everything down when the image arrives. Readers lose their place or tap the wrong thing. With width=\"800\" height=\"600\" (plain numbers, meaning pixels), the browser saves an 800 by 600 box from the start. These attributes don't change the file: a 5 MB photo still downloads 5 MB. Images show fine without them, and screen readers use alt, not size.",[64,65,66,67],{"_29":74,"_48":75,"_33":-5,"_50":51},{"_29":72,"_48":73,"_33":-5,"_50":51},{"_29":70,"_48":71,"_33":-5,"_50":10},{"_29":68,"_48":69,"_33":-5,"_50":51},"cmuo4z1yy01yt20jx3rg84aht","Screen readers read out the size instead of the alt text.","cmuo4z1yw01ys20jxmivjujeb","The browser can save the right amount of room before the picture arrives, so the text below doesn't suddenly jump down.","cmuo4z1yv01yr20jxo8acvs28","It makes the picture file smaller, so it downloads faster.","cmuo4z1yt01yq20jxrbazx77f","Without them the picture won't show at all.","cmuo4z1yk01yk20jxk4kq0n4v","The picture file is saved as images/Cat.jpg, with a capital C. On the author's Windows laptop the photo shows fine. After putting the site on a normal web server (running Linux), the picture is broken. Why?"," $\"Our$ ","## Capital letters in file names matter\n\n- Most web servers run Linux. On Linux, `Cat.jpg` and `cat.jpg` are **two different files**.\n- Windows and Mac usually don't care about capitals. So a path can work on your computer and break once the site is online.\n- Good habit: use only small letters in file names, and use hyphens instead of spaces (`red-car.jpg`).\n\n```html\n\n $\"Cat\"$ \n $\"Cat\"$ \n```","Windows and macOS usually ignore capital letters in file names, so cat.jpg finds Cat.jpg on the laptop. Most web servers run Linux, which does not ignore them: Cat.jpg and cat.jpg are two different names. The server looks for cat.jpg, finds nothing, and the image breaks. Simple habit: name every file in lowercase and write paths in lowercase too. Relative paths and .jpg files work fine on servers.",[82,83,84,85],{"_29":92,"_48":93,"_33":-5,"_50":10},{"_29":90,"_48":91,"_33":-5,"_50":51},{"_29":88,"_48":89,"_33":-5,"_50":51},{"_29":86,"_48":87,"_33":-5,"_50":51},"cmuo4z1yq01yo20jx7xnvk8ig","The alt text is too long, so the server won't send the picture.","cmuo4z1yp01yn20jxqrb1mklt","Web servers can't send .jpg files. The picture must be a .png.","cmuo4z1yn01ym20jxoazz3df3","On a real server, every picture address must start with https://.","cmuo4z1ym01yl20jxz4qoj981","The web server cares about capital letters. To it, cat.jpg and Cat.jpg are two different files, and cat.jpg isn't there.","cmuo4z1yb01yf20jxy1m9lhdw","The logo file is really in images/logo.png, but the code says imgs/logo.png. What shows up where the picture should be?","
Welcome
\n $\"Sunny$ \n
Open every day from 8am.
","## When the picture path is wrong\n\n- The browser shows a small broken-picture icon, or the `alt` text in its place. With no `alt`, you may see an empty box or nothing at all.\n- The page doesn't show an error message. To find the problem, open the browser's developer tools and look for a **404 (Not Found)** error.\n\n**Common causes:** a typo, the wrong folder (`images/` vs `../images/`), the wrong file ending (`.jpg` vs `.jpeg` vs `.png`), or wrong capital letters.","The browser asks for exactly imgs/logo.png. That file doesn't exist, so the image fails, quietly. The browser falls back to the alt text, often with a small broken-picture icon (the look varies by browser). The rest of the page loads as normal. The browser never guesses other folders. This is one more reason to write good alt text: it is what people see when an image breaks.",[100,101,102,103],{"_29":110,"_48":111,"_33":-5,"_50":51},{"_29":108,"_48":109,"_33":-5,"_50":10},{"_29":106,"_48":107,"_33":-5,"_50":51},{"_29":104,"_48":105,"_33":-5,"_50":51},"cmuo4z1yj01yj20jx7gce1ejl","An error page, and nothing after the picture loads.","cmuo4z1yh01yi20jxj1p219um","The words 'imgs/logo.png' written on the page.","cmuo4z1yg01yh20jxugciqyia","A broken-picture icon and/or the words 'Sunny Cafe logo'. The heading and paragraph still show as normal.","cmuo4z1yd01yg20jx4d5kzf25","The logo, because the browser looks in nearby folders for logo.png.","cmuo4z1y401ya20jxqapirnkj","The tag shows a picture. src says where the picture file is. alt is text that describes the picture, read aloud by screen readers (programs that read pages out loud for blind people). What does a screen reader probably do with these two pictures?"," $\"\"$ \n","## The `alt` text\n\n**Why it matters:**\n- Screen readers read it out loud.\n- It shows up when the picture fails to load.\n- Search engines read it.\n\n**How to write it:**\n- Say what the picture shows, or what it is for on this page.\n- Don't start with \"image of.\" The screen reader already says it is an image.\n- If the picture is a link, say where the link goes. Write `alt=\"Home\"`, not `alt=\"logo\"`.\n- If the picture is only decoration (a swirl, a divider line), use empty alt text: `alt=\"\"`. Screen readers will then skip it.\n\n```html\n\n $\"Sales$ \n\n\n $\"\"$ \n```\n\n**Watch out:** no `alt` at all is not the same as an empty `alt`.\n- No `alt` is a mistake. Many screen readers will read out the file name instead, like \"swirl dot p n g.\"\n- `alt=\"\"` is on purpose. It says, \"this picture is just decoration.\"","alt is how people who can't see the image learn what it shows. An empty alt (alt=\"\") is a deliberate signal: 'this is only decoration, skip it'. That's right for a swirly divider. A missing alt is different: the screen reader doesn't know whether the image matters, so it often reads the file name, which helps nobody. The team photo carries meaning, so it needs a real description, like alt=\"Our five staff smiling outside the shop\".",[118,119,120,121],{"_29":128,"_48":129,"_33":-5,"_50":10},{"_29":126,"_48":127,"_33":-5,"_50":51},{"_29":124,"_48":125,"_33":-5,"_50":51},{"_29":122,"_48":123,"_33":-5,"_50":51},"cmuo4z1ya01ye20jxqm6er7nt","It skips both, because an empty alt and no alt at all mean the same thing.","cmuo4z1y801yd20jx2ttbb96a","It says 'blank image' for the first, because alt should never be empty.","cmuo4z1y701yc20jxr7fdsjcx","It looks at both pictures and describes them itself, so alt doesn't matter.","cmuo4z1y501yb20jxq3r8h1sw","It skips the first picture as just decoration. For the second, which has no alt, it may read out the file name 'team-photo.jpg'.","cmuo4z1xw01y520jxygommscf","Links don't only go to web pages. Someone on a phone taps the second link. What happens?","Email us\nCall us","## Email and phone links: `mailto:` and `tel:`\n\n- `mailto:` opens the person's email app with the address already filled in.\n- `tel:` lets the person call the number. This is most useful on a phone.\n- Write phone numbers with the country code and no spaces.\n\n```html\nEmail help@example.com\nAsk about an order\nCall +27 21 555 1234\n```\n\n**Watch out:** there is no `//` after the colon. Write `mailto:help@example.com`, not `mailto://...`.","The start of an href says what kind of link it is. tel: means 'phone number', so a phone offers to dial it. mailto: means 'email address', so tapping the first link opens the email app with a new message to help@example.com. Phones are exactly where tel: links are most useful. Writing the number with its country code (+1) and no spaces makes it dial reliably.",[136,137,138,139],{"_29":146,"_48":147,"_33":-5,"_50":10},{"_29":144,"_48":145,"_33":-5,"_50":51},{"_29":142,"_48":143,"_33":-5,"_50":51},{"_29":140,"_48":141,"_33":-5,"_50":51},"cmuo4z1y201y920jxbyjuu2gy","Nothing happens. tel: links only work on computers.","cmuo4z1y101y820jxs01diym9","The browser tries to open a web page with that name and says 'page not found'.","cmuo4z1xz01y720jx60fkdz4m","The phone opens the email app with a new message to help@example.com.","cmuo4z1xy01y620jx0iubez9q","The phone offers to ring +1 555 123 4567.","cmuo4z1xp01y020jx0pv0phwu","What do target=\"_blank\" and rel=\"noopener\" do on this link?","\n Example Charity website\n","## Opening a new tab: `target=\"_blank\"` and `rel=\"noopener\"`\n\n- `target=\"_blank\"` opens the link in a new tab.\n- `rel=\"noopener\"` stops the new page from controlling your page. Without it, a bad site could quietly swap your tab for a fake page. This trick is called \"tabnabbing.\"\n- New browsers now do this for you, but it is still good practice to write it.\n- Don't open new tabs too often. People like to choose for themselves. Tell them when a link opens a new tab.\n\n```html\n\n Example site (opens in new tab)\n\n```","target=\"_blank\" opens the link in a new tab or window. rel=\"noopener\" cuts the tie between the two tabs, so the new page can't quietly change or redirect your original page. Modern browsers now do this for target=\"_blank\" links anyway, but writing it out is clear and harmless. Telling search engines not to follow a link is a different value: rel=\"nofollow\".",[154,155,156,157],{"_29":164,"_48":165,"_33":-5,"_50":51},{"_29":162,"_48":163,"_33":-5,"_50":51},{"_29":160,"_48":161,"_33":-5,"_50":51},{"_29":158,"_48":159,"_33":-5,"_50":10},"cmuo4z1xv01y420jx9m4i905p","The link opens in a new tab, and the new page can't reach back and mess with your page.","cmuo4z1xt01y320jx2mgizvow","The link opens in the same tab as a blank page, and only loads once the user says yes.","cmuo4z1xs01y220jxa117939r","The link opens in a new tab, and clicking it again won't open a second copy.","cmuo4z1xq01y120jxgu6mhah6","The link opens in a new tab, and search engines are told to ignore it.","cmuo4z1xh01xv20jx9bj2l884","An id gives one part of the page a name. A link with href starting with # jumps to the part with that name. Clicking this link does nothing. Which line is wrong, and why?","Jump to contact details\n\n
Lots of text here...
\n\n
Contact
\n
Email us any time.
","## Link to a spot on the same page\n\n- Give the target an `id`. Each `id` can be used only once on a page.\n- In the link, write `#` and then the id.\n- To jump to a spot on a different page, write `page.html#id`.\n\n```html\nJump to FAQ\n\n
Frequently asked questions
\n\nContact section of the help page\n```\n\n**Watch out:** the `id` has no `#` (`id=\"faq\"`). Only the link has the `#` (`href=\"#faq\"`). Capital letters must match too.","The # in href=\"#contact\" means 'look on this page for the id called contact'. The # is not part of the name itself. Line 5 names the heading \"#contact\", so no element is called contact, and the browser has nowhere to jump. Fix: id=\"contact\". Without the #, the href on line 1 would point to a page file called contact instead. Any element can have an id, and a bare #contact already means 'this page'.",[172,173,174,175],{"_29":182,"_48":183,"_33":-5,"_50":10},{"_29":180,"_48":181,"_33":-5,"_50":51},{"_29":178,"_48":179,"_33":-5,"_50":51},{"_29":176,"_48":177,"_33":-5,"_50":51},"cmuo4z1xn01xz20jxodkdg7is","Line 1: the link should say \"contact\" without the #.","cmuo4z1xm01xy20jxx224wjmp","Line 5: you can only put an id on a
, not on a heading.","cmuo4z1xk01xx20jxeehz7qf7","Line 1: the link must include the page name, like \"page.html#contact\", or it can't jump.","cmuo4z1xj01xw20jx3s32zvuj","Line 5: the id should be just \"contact\", without the #. You only put # in the link.","cmuo4z1x801xq20jxben1o43k","A path that starts with / starts from the top of the website, not from the folder you are in. This link is on the page https://example.com/blog/post.html. Where does clicking it take you?","About us","## Full addresses vs short paths\n\n| Path | Meaning |\n|---|---|\n| `/about.html` | start from the top folder of the site, wherever you are now |\n\nLinks written inside `blog/post.html`:\n\n```html\nAbout\n```\n\n**Watch out:**\n- Paths that start with `/` still work when you move pages. But they need a web server. If you open the file straight from your computer, `/` means the top of your whole drive, not your site.","The leading / means 'start at the top of this website'. The browser keeps the site part (https://example.com) and ignores the folder the page is in (/blog/). So you get https://example.com/about.html. Without the slash, about.html would mean the blog folder: https://example.com/blog/about.html. The link never points at the visitor's computer, because the page came from a web server.",[190,191,192,193],{"_29":200,"_48":201,"_33":-5,"_50":51},{"_29":198,"_48":199,"_33":-5,"_50":10},{"_29":196,"_48":197,"_33":-5,"_50":51},{"_29":194,"_48":195,"_33":-5,"_50":51},"cmuo4z1xg01xu20jxmqepeopi","A file called about.html at the top of the visitor's own computer","cmuo4z1xe01xt20jxs68sh2u0","https://example.com/blog/about.html","cmuo4z1xc01xs20jxzeqbna0u","https://example.com/about.html","cmuo4z1xa01xr20jxp3xvb4nv","https://about.html","cmuo4z1x001xl20jxvs6dwont","The page post.html is inside the blog folder. It needs a link back to index.html, which is one folder higher. Which href is right?","\n\n\nBack to home","## Full addresses vs short paths\n\n- **Relative path (short path):** a path that starts from the folder the current page is in.\n\n| Path | Meaning |\n|---|---|\n| `page.html` | a file in the same folder |\n| `images/cat.jpg` | a file inside the `images` folder |\n| `../index.html` | go up one folder, then find the file |\n| `/about.html` | start from the top folder of the site, wherever you are now |\n\nHere is a sample site:\n\n```\nsite/\n├── index.html\n├── about.html\n├── images/\n│ └── cat.jpg\n└── blog/\n └── post.html\n```\n\nLinks written inside `blog/post.html`:\n\n```html\nHome\n```\n\n**Watch out:** A short path depends on where the page sits. If you move `post.html` to another folder, `../images/cat.jpg` may stop working.","Relative paths start from the folder the current page is in, here blog. Two dots (..) mean 'go up one folder'. So ../index.html goes up to my-site and finds index.html. Plain index.html and ./index.html both mean 'in this same folder', so they look for blog/index.html, which does not exist. blog/index.html is worse still: it looks for blog/blog/index.html.",[208,209,210,211],{"_29":218,"_48":219,"_33":-5,"_50":51},{"_29":216,"_48":217,"_33":-5,"_50":51},{"_29":214,"_48":215,"_33":-5,"_50":10},{"_29":212,"_48":213,"_33":-5,"_50":51},"cmuo4z1x601xp20jxwdtrf0oz","./index.html","cmuo4z1x501xo20jxe4zd5mcw","../index.html","cmuo4z1x301xn20jxh8y6lj1o","blog/index.html","cmuo4z1x201xm20jxu7vjv70f","index.html","cmuo4z1wr01xg20jxomfiyxuu","A relative path gives an address starting from where the current page is. A full address like https://example.com/images/cat.jpg spells out everything. Look at the folders below. Which href in index.html points to cat.jpg correctly?","\n\n\nSee the cat photo","## Full addresses vs short paths\n\nThere are two ways to point to a file.\n\n- **Absolute URL (full address):** the whole web address, starting with `https://`. It works from any page. You must use it to link to other websites.\n `https://example.com/about.html`\n- **Relative path (short path):** a path that starts from the folder the current page is in.\n\n| Path | Meaning |\n|---|---|\n| `page.html` | a file in the same folder |\n| `images/cat.jpg` | a file inside the `images` folder |\n| `../index.html` | go up one folder, then find the file |\n| `/about.html` | start from the top folder of the site, wherever you are now |\n\nHere is a sample site:\n\n```\nsite/\n├── index.html\n├── about.html\n├── images/\n│ └── cat.jpg\n└── blog/\n └── post.html\n```\n\nLinks written inside `blog/post.html`:\n\n```html\nHome\nAbout\n $\"A$ \n```","index.html and the images folder sit side by side. So you go into images, then pick cat.jpg: images/cat.jpg. Plain cat.jpg would look next to index.html, where there is no such file. ../ means 'go up one folder', which would leave my-site completely. The file name must include .jpg, because the browser asks for the exact name.",[226,227,228,229],{"_29":236,"_48":237,"_33":-5,"_50":51},{"_29":234,"_48":235,"_33":-5,"_50":51},{"_29":232,"_48":233,"_33":-5,"_50":10},{"_29":230,"_48":231,"_33":-5,"_50":51},"cmuo4z1wz01xk20jxmbqfr3ey","images/cat","cmuo4z1wx01xj20jxsp116plm","images/cat.jpg","cmuo4z1wv01xi20jxzdm7nn2b","cat.jpg","cmuo4z1wu01xh20jxeztcltr5","../images/cat.jpg","cmuo4z1wi01xb20jxdf8gurno","A link uses the tag. The href part says where the link goes. The words between and are what people click. What is wrong with this link?","
Our new price list is ready.\n Click here\n
","## The `` element and `href`\n\n- `` makes a link. The \"a\" stands for \"anchor.\"\n- The `href` attribute says where the link goes.\n- The words between the tags are what people click.\n- If you leave out `href`, the link is not real. You can't reach it with the Tab key, and clicking it does nothing.\n\n```html\n MDN Web Docs\n```\n\n## Say where the link goes\n\n- Some people use a screen reader. It is a program that reads the page out loud.\n- Screen reader users often skip from link to link and hear only the link words.\n- \"Click here\" tells them nothing.\n- So make the link words name the place or the action.\n\n```html\n\n
For our prices, click here.
\n\n\n
See our pricing plans.
\n```\n\n**Watch out:** if a page has five \"read more\" links, they all sound the same when read aloud.","The link works. Its text is the problem. Screen readers (software that reads pages aloud for blind users) can list every link on a page, and ten links all called 'Click here' tell you nothing. People skimming the page look for link words too. Better: See our new price list. A short path like prices.html is fine, and links sit inside paragraphs all the time.",[244,245,246,247],{"_29":254,"_48":255,"_33":-5,"_50":51},{"_29":252,"_48":253,"_33":-5,"_50":51},{"_29":250,"_48":251,"_33":-5,"_50":10},{"_29":248,"_48":249,"_33":-5,"_50":51},"cmuo4z1wp01xf20jxcdxl2wb4","The link needs target=\"_blank\" or it won't open.","cmuo4z1wn01xe20jxey3e2dxq","The words 'Click here' don't tell you where the link goes. Heard alone, like when a screen reader lists all the links, they mean nothing.","cmuo4z1wl01xd20jx0nip47fl","You can't put a link inside a paragraph.","cmuo4z1wk01xc20jxsjja9myh","The href must be a full web address starting with https://, or the link won't work.","email"]

holds the caption words. The author wants the caption properly tied to the photo. Which line is wrong?","codeBlock","
\n $\"Stone$ \n
\n
The old bridge, built in 1820.
","codeLang","html","notes","## `
` and `
`\n\n- `
` wraps something that stands on its own, like a picture, chart, code sample or quote.\n- `
` is the caption that everyone can see. Put it first or last inside `
`. Use only one.\n- A caption does **not** replace `alt`. The `alt` describes the picture. The caption adds extra facts for everyone.\n\n```html\n
\n $\"Eiffel$ \n
The Eiffel Tower, Paris, 2024.
\n
\n```","explanation","A
only counts as a caption when it sits inside a
, as its first or last child. Here it is outside, so it's just loose text. The browser still shows the words, but nothing ties them to the photo. Fix: move line 4 up, above
. alt and a caption do different jobs. alt describes the image for people who can't see it. The caption is extra information everyone reads. So keep both.
has no src; the image keeps its own.","options",[43,44,45,46],{"_29":56,"_48":57,"_33":-5,"_50":51},{"_29":54,"_48":55,"_33":-5,"_50":10},{"_29":52,"_48":53,"_33":-5,"_50":51},{"_29":47,"_48":49,"_33":-5,"_50":51},"cmuo4z1z601yy20jxvglguck4","text","Line 1:
needs its own src saying where the picture is.","isCorrect",false,"cmuo4z1z501yx20jxugvr0iau","Line 2: a picture inside
shouldn't have alt text, because the caption does that job.","cmuo4z1z301yw20jx9vyae6u4","Line 4: the caption is outside the
, so it isn't tied to the picture. Move it inside, before
.","cmuo4z1z101yv20jx6ndzeyqs","Line 4: the caption should go in the alt text, not in
.","cmuo4z1ys01yp20jxxeau3zmy","Why is it a good idea to give a picture a width and height, like below?","
Our garden
\n $\"Rows$ \n
We grow everything ourselves.
","## The `` element\n\n- `` puts a picture on the page.\n- It has no closing tag, because nothing goes inside it.\n- `src` is where the picture file is. It follows the same path rules as links.\n- `alt` is the words that stand in for the picture (see the next section).\n- `width` and `height` give the size in pixels, as plain numbers with no units. They let the browser save room for the picture before it loads, so the page doesn't jump around. CSS can still change the size.\n\n```html\n $\"A$ \n```","Images often load after the text. If the browser doesn't know the size, it leaves no room, then pushes everything down when the image arrives. Readers lose their place or tap the wrong thing. With width=\"800\" height=\"600\" (plain numbers, meaning pixels), the browser saves an 800 by 600 box from the start. These attributes don't change the file: a 5 MB photo still downloads 5 MB. Images show fine without them, and screen readers use alt, not size.",[64,65,66,67],{"_29":74,"_48":75,"_33":-5,"_50":51},{"_29":72,"_48":73,"_33":-5,"_50":51},{"_29":70,"_48":71,"_33":-5,"_50":10},{"_29":68,"_48":69,"_33":-5,"_50":51},"cmuo4z1yy01yt20jx3rg84aht","Screen readers read out the size instead of the alt text.","cmuo4z1yw01ys20jxmivjujeb","The browser can save the right amount of room before the picture arrives, so the text below doesn't suddenly jump down.","cmuo4z1yv01yr20jxo8acvs28","It makes the picture file smaller, so it downloads faster.","cmuo4z1yt01yq20jxrbazx77f","Without them the picture won't show at all.","cmuo4z1yk01yk20jxk4kq0n4v","The picture file is saved as images/Cat.jpg, with a capital C. On the author's Windows laptop the photo shows fine. After putting the site on a normal web server (running Linux), the picture is broken. Why?"," $\"Our$ ","## Capital letters in file names matter\n\n- Most web servers run Linux. On Linux, `Cat.jpg` and `cat.jpg` are **two different files**.\n- Windows and Mac usually don't care about capitals. So a path can work on your computer and break once the site is online.\n- Good habit: use only small letters in file names, and use hyphens instead of spaces (`red-car.jpg`).\n\n```html\n\n $\"Cat\"$ \n $\"Cat\"$ \n```","Windows and macOS usually ignore capital letters in file names, so cat.jpg finds Cat.jpg on the laptop. Most web servers run Linux, which does not ignore them: Cat.jpg and cat.jpg are two different names. The server looks for cat.jpg, finds nothing, and the image breaks. Simple habit: name every file in lowercase and write paths in lowercase too. Relative paths and .jpg files work fine on servers.",[82,83,84,85],{"_29":92,"_48":93,"_33":-5,"_50":10},{"_29":90,"_48":91,"_33":-5,"_50":51},{"_29":88,"_48":89,"_33":-5,"_50":51},{"_29":86,"_48":87,"_33":-5,"_50":51},"cmuo4z1yq01yo20jx7xnvk8ig","The alt text is too long, so the server won't send the picture.","cmuo4z1yp01yn20jxqrb1mklt","Web servers can't send .jpg files. The picture must be a .png.","cmuo4z1yn01ym20jxoazz3df3","On a real server, every picture address must start with https://.","cmuo4z1ym01yl20jxz4qoj981","The web server cares about capital letters. To it, cat.jpg and Cat.jpg are two different files, and cat.jpg isn't there.","cmuo4z1yb01yf20jxy1m9lhdw","The logo file is really in images/logo.png, but the code says imgs/logo.png. What shows up where the picture should be?","
Welcome
\n $\"Sunny$ \n
Open every day from 8am.
","## When the picture path is wrong\n\n- The browser shows a small broken-picture icon, or the `alt` text in its place. With no `alt`, you may see an empty box or nothing at all.\n- The page doesn't show an error message. To find the problem, open the browser's developer tools and look for a **404 (Not Found)** error.\n\n**Common causes:** a typo, the wrong folder (`images/` vs `../images/`), the wrong file ending (`.jpg` vs `.jpeg` vs `.png`), or wrong capital letters.","The browser asks for exactly imgs/logo.png. That file doesn't exist, so the image fails, quietly. The browser falls back to the alt text, often with a small broken-picture icon (the look varies by browser). The rest of the page loads as normal. The browser never guesses other folders. This is one more reason to write good alt text: it is what people see when an image breaks.",[100,101,102,103],{"_29":110,"_48":111,"_33":-5,"_50":51},{"_29":108,"_48":109,"_33":-5,"_50":10},{"_29":106,"_48":107,"_33":-5,"_50":51},{"_29":104,"_48":105,"_33":-5,"_50":51},"cmuo4z1yj01yj20jx7gce1ejl","An error page, and nothing after the picture loads.","cmuo4z1yh01yi20jxj1p219um","The words 'imgs/logo.png' written on the page.","cmuo4z1yg01yh20jxugciqyia","A broken-picture icon and/or the words 'Sunny Cafe logo'. The heading and paragraph still show as normal.","cmuo4z1yd01yg20jx4d5kzf25","The logo, because the browser looks in nearby folders for logo.png.","cmuo4z1y401ya20jxqapirnkj","The tag shows a picture. src says where the picture file is. alt is text that describes the picture, read aloud by screen readers (programs that read pages out loud for blind people). What does a screen reader probably do with these two pictures?"," $\"\"$ \n","## The `alt` text\n\n**Why it matters:**\n- Screen readers read it out loud.\n- It shows up when the picture fails to load.\n- Search engines read it.\n\n**How to write it:**\n- Say what the picture shows, or what it is for on this page.\n- Don't start with \"image of.\" The screen reader already says it is an image.\n- If the picture is a link, say where the link goes. Write `alt=\"Home\"`, not `alt=\"logo\"`.\n- If the picture is only decoration (a swirl, a divider line), use empty alt text: `alt=\"\"`. Screen readers will then skip it.\n\n```html\n\n $\"Sales$ \n\n\n $\"\"$ \n```\n\n**Watch out:** no `alt` at all is not the same as an empty `alt`.\n- No `alt` is a mistake. Many screen readers will read out the file name instead, like \"swirl dot p n g.\"\n- `alt=\"\"` is on purpose. It says, \"this picture is just decoration.\"","alt is how people who can't see the image learn what it shows. An empty alt (alt=\"\") is a deliberate signal: 'this is only decoration, skip it'. That's right for a swirly divider. A missing alt is different: the screen reader doesn't know whether the image matters, so it often reads the file name, which helps nobody. The team photo carries meaning, so it needs a real description, like alt=\"Our five staff smiling outside the shop\".",[118,119,120,121],{"_29":128,"_48":129,"_33":-5,"_50":10},{"_29":126,"_48":127,"_33":-5,"_50":51},{"_29":124,"_48":125,"_33":-5,"_50":51},{"_29":122,"_48":123,"_33":-5,"_50":51},"cmuo4z1ya01ye20jxqm6er7nt","It skips both, because an empty alt and no alt at all mean the same thing.","cmuo4z1y801yd20jx2ttbb96a","It says 'blank image' for the first, because alt should never be empty.","cmuo4z1y701yc20jxr7fdsjcx","It looks at both pictures and describes them itself, so alt doesn't matter.","cmuo4z1y501yb20jxq3r8h1sw","It skips the first picture as just decoration. For the second, which has no alt, it may read out the file name 'team-photo.jpg'.","cmuo4z1xw01y520jxygommscf","Links don't only go to web pages. Someone on a phone taps the second link. What happens?","Email us\nCall us","## Email and phone links: `mailto:` and `tel:`\n\n- `mailto:` opens the person's email app with the address already filled in.\n- `tel:` lets the person call the number. This is most useful on a phone.\n- Write phone numbers with the country code and no spaces.\n\n```html\nEmail help@example.com\nAsk about an order\nCall +27 21 555 1234\n```\n\n**Watch out:** there is no `//` after the colon. Write `mailto:help@example.com`, not `mailto://...`.","The start of an href says what kind of link it is. tel: means 'phone number', so a phone offers to dial it. mailto: means 'email address', so tapping the first link opens the email app with a new message to help@example.com. Phones are exactly where tel: links are most useful. Writing the number with its country code (+1) and no spaces makes it dial reliably.",[136,137,138,139],{"_29":146,"_48":147,"_33":-5,"_50":10},{"_29":144,"_48":145,"_33":-5,"_50":51},{"_29":142,"_48":143,"_33":-5,"_50":51},{"_29":140,"_48":141,"_33":-5,"_50":51},"cmuo4z1y201y920jxbyjuu2gy","Nothing happens. tel: links only work on computers.","cmuo4z1y101y820jxs01diym9","The browser tries to open a web page with that name and says 'page not found'.","cmuo4z1xz01y720jx60fkdz4m","The phone opens the email app with a new message to help@example.com.","cmuo4z1xy01y620jx0iubez9q","The phone offers to ring +1 555 123 4567.","cmuo4z1xp01y020jx0pv0phwu","What do target=\"_blank\" and rel=\"noopener\" do on this link?","\n Example Charity website\n","## Opening a new tab: `target=\"_blank\"` and `rel=\"noopener\"`\n\n- `target=\"_blank\"` opens the link in a new tab.\n- `rel=\"noopener\"` stops the new page from controlling your page. Without it, a bad site could quietly swap your tab for a fake page. This trick is called \"tabnabbing.\"\n- New browsers now do this for you, but it is still good practice to write it.\n- Don't open new tabs too often. People like to choose for themselves. Tell them when a link opens a new tab.\n\n```html\n\n Example site (opens in new tab)\n\n```","target=\"_blank\" opens the link in a new tab or window. rel=\"noopener\" cuts the tie between the two tabs, so the new page can't quietly change or redirect your original page. Modern browsers now do this for target=\"_blank\" links anyway, but writing it out is clear and harmless. Telling search engines not to follow a link is a different value: rel=\"nofollow\".",[154,155,156,157],{"_29":164,"_48":165,"_33":-5,"_50":51},{"_29":162,"_48":163,"_33":-5,"_50":51},{"_29":160,"_48":161,"_33":-5,"_50":51},{"_29":158,"_48":159,"_33":-5,"_50":10},"cmuo4z1xv01y420jx9m4i905p","The link opens in a new tab, and the new page can't reach back and mess with your page.","cmuo4z1xt01y320jx2mgizvow","The link opens in the same tab as a blank page, and only loads once the user says yes.","cmuo4z1xs01y220jxa117939r","The link opens in a new tab, and clicking it again won't open a second copy.","cmuo4z1xq01y120jxgu6mhah6","The link opens in a new tab, and search engines are told to ignore it.","cmuo4z1xh01xv20jx9bj2l884","An id gives one part of the page a name. A link with href starting with # jumps to the part with that name. Clicking this link does nothing. Which line is wrong, and why?","Jump to contact details\n\n
Lots of text here...
\n\n
Contact
\n
Email us any time.
","## Link to a spot on the same page\n\n- Give the target an `id`. Each `id` can be used only once on a page.\n- In the link, write `#` and then the id.\n- To jump to a spot on a different page, write `page.html#id`.\n\n```html\nJump to FAQ\n\n
Frequently asked questions
\n\nContact section of the help page\n```\n\n**Watch out:** the `id` has no `#` (`id=\"faq\"`). Only the link has the `#` (`href=\"#faq\"`). Capital letters must match too.","The # in href=\"#contact\" means 'look on this page for the id called contact'. The # is not part of the name itself. Line 5 names the heading \"#contact\", so no element is called contact, and the browser has nowhere to jump. Fix: id=\"contact\". Without the #, the href on line 1 would point to a page file called contact instead. Any element can have an id, and a bare #contact already means 'this page'.",[172,173,174,175],{"_29":182,"_48":183,"_33":-5,"_50":10},{"_29":180,"_48":181,"_33":-5,"_50":51},{"_29":178,"_48":179,"_33":-5,"_50":51},{"_29":176,"_48":177,"_33":-5,"_50":51},"cmuo4z1xn01xz20jxodkdg7is","Line 1: the link should say \"contact\" without the #.","cmuo4z1xm01xy20jxx224wjmp","Line 5: you can only put an id on a
, not on a heading.","cmuo4z1xk01xx20jxeehz7qf7","Line 1: the link must include the page name, like \"page.html#contact\", or it can't jump.","cmuo4z1xj01xw20jx3s32zvuj","Line 5: the id should be just \"contact\", without the #. You only put # in the link.","cmuo4z1x801xq20jxben1o43k","A path that starts with / starts from the top of the website, not from the folder you are in. This link is on the page https://example.com/blog/post.html. Where does clicking it take you?","About us","## Full addresses vs short paths\n\n| Path | Meaning |\n|---|---|\n| `/about.html` | start from the top folder of the site, wherever you are now |\n\nLinks written inside `blog/post.html`:\n\n```html\nAbout\n```\n\n**Watch out:**\n- Paths that start with `/` still work when you move pages. But they need a web server. If you open the file straight from your computer, `/` means the top of your whole drive, not your site.","The leading / means 'start at the top of this website'. The browser keeps the site part (https://example.com) and ignores the folder the page is in (/blog/). So you get https://example.com/about.html. Without the slash, about.html would mean the blog folder: https://example.com/blog/about.html. The link never points at the visitor's computer, because the page came from a web server.",[190,191,192,193],{"_29":200,"_48":201,"_33":-5,"_50":51},{"_29":198,"_48":199,"_33":-5,"_50":10},{"_29":196,"_48":197,"_33":-5,"_50":51},{"_29":194,"_48":195,"_33":-5,"_50":51},"cmuo4z1xg01xu20jxmqepeopi","A file called about.html at the top of the visitor's own computer","cmuo4z1xe01xt20jxs68sh2u0","https://example.com/blog/about.html","cmuo4z1xc01xs20jxzeqbna0u","https://example.com/about.html","cmuo4z1xa01xr20jxp3xvb4nv","https://about.html","cmuo4z1x001xl20jxvs6dwont","The page post.html is inside the blog folder. It needs a link back to index.html, which is one folder higher. Which href is right?","\n\n\nBack to home","## Full addresses vs short paths\n\n- **Relative path (short path):** a path that starts from the folder the current page is in.\n\n| Path | Meaning |\n|---|---|\n| `page.html` | a file in the same folder |\n| `images/cat.jpg` | a file inside the `images` folder |\n| `../index.html` | go up one folder, then find the file |\n| `/about.html` | start from the top folder of the site, wherever you are now |\n\nHere is a sample site:\n\n```\nsite/\n├── index.html\n├── about.html\n├── images/\n│ └── cat.jpg\n└── blog/\n └── post.html\n```\n\nLinks written inside `blog/post.html`:\n\n```html\nHome\n```\n\n**Watch out:** A short path depends on where the page sits. If you move `post.html` to another folder, `../images/cat.jpg` may stop working.","Relative paths start from the folder the current page is in, here blog. Two dots (..) mean 'go up one folder'. So ../index.html goes up to my-site and finds index.html. Plain index.html and ./index.html both mean 'in this same folder', so they look for blog/index.html, which does not exist. blog/index.html is worse still: it looks for blog/blog/index.html.",[208,209,210,211],{"_29":218,"_48":219,"_33":-5,"_50":51},{"_29":216,"_48":217,"_33":-5,"_50":51},{"_29":214,"_48":215,"_33":-5,"_50":10},{"_29":212,"_48":213,"_33":-5,"_50":51},"cmuo4z1x601xp20jxwdtrf0oz","./index.html","cmuo4z1x501xo20jxe4zd5mcw","../index.html","cmuo4z1x301xn20jxh8y6lj1o","blog/index.html","cmuo4z1x201xm20jxu7vjv70f","index.html","cmuo4z1wr01xg20jxomfiyxuu","A relative path gives an address starting from where the current page is. A full address like https://example.com/images/cat.jpg spells out everything. Look at the folders below. Which href in index.html points to cat.jpg correctly?","\n\n\nSee the cat photo","## Full addresses vs short paths\n\nThere are two ways to point to a file.\n\n- **Absolute URL (full address):** the whole web address, starting with `https://`. It works from any page. You must use it to link to other websites.\n `https://example.com/about.html`\n- **Relative path (short path):** a path that starts from the folder the current page is in.\n\n| Path | Meaning |\n|---|---|\n| `page.html` | a file in the same folder |\n| `images/cat.jpg` | a file inside the `images` folder |\n| `../index.html` | go up one folder, then find the file |\n| `/about.html` | start from the top folder of the site, wherever you are now |\n\nHere is a sample site:\n\n```\nsite/\n├── index.html\n├── about.html\n├── images/\n│ └── cat.jpg\n└── blog/\n └── post.html\n```\n\nLinks written inside `blog/post.html`:\n\n```html\nHome\nAbout\n $\"A$ \n```","index.html and the images folder sit side by side. So you go into images, then pick cat.jpg: images/cat.jpg. Plain cat.jpg would look next to index.html, where there is no such file. ../ means 'go up one folder', which would leave my-site completely. The file name must include .jpg, because the browser asks for the exact name.",[226,227,228,229],{"_29":236,"_48":237,"_33":-5,"_50":51},{"_29":234,"_48":235,"_33":-5,"_50":51},{"_29":232,"_48":233,"_33":-5,"_50":10},{"_29":230,"_48":231,"_33":-5,"_50":51},"cmuo4z1wz01xk20jxmbqfr3ey","images/cat","cmuo4z1wx01xj20jxsp116plm","images/cat.jpg","cmuo4z1wv01xi20jxzdm7nn2b","cat.jpg","cmuo4z1wu01xh20jxeztcltr5","../images/cat.jpg","cmuo4z1wi01xb20jxdf8gurno","A link uses the tag. The href part says where the link goes. The words between and are what people click. What is wrong with this link?","
Our new price list is ready.\n Click here\n
","## The `` element and `href`\n\n- `` makes a link. The \"a\" stands for \"anchor.\"\n- The `href` attribute says where the link goes.\n- The words between the tags are what people click.\n- If you leave out `href`, the link is not real. You can't reach it with the Tab key, and clicking it does nothing.\n\n```html\n MDN Web Docs\n```\n\n## Say where the link goes\n\n- Some people use a screen reader. It is a program that reads the page out loud.\n- Screen reader users often skip from link to link and hear only the link words.\n- \"Click here\" tells them nothing.\n- So make the link words name the place or the action.\n\n```html\n\n
For our prices, click here.
\n\n\n
See our pricing plans.
\n```\n\n**Watch out:** if a page has five \"read more\" links, they all sound the same when read aloud.","The link works. Its text is the problem. Screen readers (software that reads pages aloud for blind users) can list every link on a page, and ten links all called 'Click here' tell you nothing. People skimming the page look for link words too. Better: See our new price list. A short path like prices.html is fine, and links sit inside paragraphs all the time.",[244,245,246,247],{"_29":254,"_48":255,"_33":-5,"_50":51},{"_29":252,"_48":253,"_33":-5,"_50":51},{"_29":250,"_48":251,"_33":-5,"_50":10},{"_29":248,"_48":249,"_33":-5,"_50":51},"cmuo4z1wp01xf20jxcdxl2wb4","The link needs target=\"_blank\" or it won't open.","cmuo4z1wn01xe20jxey3e2dxq","The words 'Click here' don't tell you where the link goes. Heard alone, like when a screen reader lists all the links, they mean nothing.","cmuo4z1wl01xd20jx0nip47fl","You can't put a link inside a paragraph.","cmuo4z1wk01xc20jxsjja9myh","The href must be a full web address starting with https://, or the link won't work.","email"]

Our garden

Welcome

Contact

Frequently asked questions