HTML Tutorial
HTML Attributes
Attributes add extra information to tags: href on links, src on images, lang on the page.
Name and value on the start tag
Attributes live in the start tag. The pattern is a name, an equals sign, and a value in quotes. They never go on the end tag. One element can have several attributes, separated by spaces.
Example
<a href="https://studygrid.example/html">HTML tutorial</a>Here href is the name and the URL is the value. The words between the tags are the visible link text. The attribute tells the browser where to go when the link is activated.
href on links
The a element needs href to be a real link. The value can be another page on your site, a full URL, an email address with mailto:, or a jump to an id on the same page.
Example
<p>
<a href="about.html">About this site</a>
<a href="https://developer.mozilla.org/">MDN</a>
</p>src and alt on images
An img element uses src for the file path and alt for a short text substitute. Screen readers read alt. If the image fails to load, the browser can show that text instead.
Example
<img src="harbor.jpg" alt="Fishing boats at the harbor wall">Skip alt and the image has no accessible name. Empty alt="" is for decorative pictures only. If the picture carries information, write a real description.
lang on the page
Set the language on the root html element. You already saw this in the basic document chapter. You can also set lang on a single element when a phrase is in another language.
Example
<html lang="en">
<body>
<p>The station is called <span lang="de">Hauptbahnhof</span>.</p>
</body>
</html>width and height
Images and some other elements accept width and height. Values are in CSS pixels. Setting both helps the browser reserve space before the file loads, which reduces layout jump.
Example
<img src="harbor.jpg" alt="Fishing boats at the harbor wall" width="640" height="360">Prefer real dimensions that match the file. Stretching a small image with large width and height makes it look blurry. CSS can still resize later without changing the HTML attributes.
Always quote values
HTML allows unquoted values in some cases, but a space inside an unquoted value ends the attribute early. Quotes avoid that. Use double quotes in this course unless you have a reason not to.
| Attribute | Typical on | Purpose |
|---|---|---|
| href | a | Where the link goes |
| src | img, script, iframe | Where the resource is |
| alt | img | Text if the image is missing or unread |
| lang | html, or any element | Language of the content |
| width, height | img, canvas, video | Reserved size in pixels |
Click Try it in HTML under an example. That opens /html/try — a live page preview.
Boolean attributes
A few attributes are on or off with no extra value. disabled on a button, checkedon a checkbox, and required on an input work this way. Writing the name is enough. You will use them more in the forms chapters.
Attribute names are case-insensitive, like tags. Values for paths and ids often are not. Quote the value, keep names lowercase, and you will avoid most surprises.
Worked examples
The short listings above show the tag in isolation. These pages use the same markup on documents you would actually publish: a lab report, a clinic form, a timetable, a weather card.
HTML does not calculate. It names the pieces so a browser, a screen reader, and a search engine can tell a heading from a paragraph. The numbers below are classroom values — the same Ohm, pH, and pulse figures as the C track — now sitting in real page structure.
Preview them in the HTML editor at /html/try. Change a heading or a number and watch the page, not a print log.
Biology
A species name in another language
Attributes add facts to a tag. lang on a span tells assistive technology that this phrase is Latin, even if the page is English.
href, src, alt, and lang are the attributes you will use every day. Values sit in quotes. The name is lowercase in HTML.
Example
<p>The fruit fly
<em lang="la">Drosophila melanogaster</em>
is a common genetics model.
</p>Physics
An image that explains itself
src says where the file is. alt says what it is for anyone who cannot see it — and for search. An empty alt is for decoration only.
If the picture is the data (a circuit, a graph), the alt must carry the same idea as a caption would.
Example
<img
src="https://picsum.photos/seed/circuit/320/160"
alt="Series circuit with four 1.5 V cells"
width="320"
height="160">