Learn HTML and CSS: Valid HTML

Attributes and valid HTML

The browser forgives a lot: a forgotten quote, an id that appears twice. But whoever forgives has to guess. On Hilary's site it guessed wrong, and now the link to the cats jumps to the dogs.

The rules of an attribute

An attribute sits in the opening tag: a name, an = and a value in quotes, like alt="Misty, a grey cat". Two attributes are separated by a space.

Without quotes, the value stops at the first space: alt=Misty sleeps gives an alt of just Misty. The browser reads the rest as new, unknown attributes.

Each attribute appears only once in a tag. If it's there twice, only the first one counts.

index.html

1<main>2  <img src="kat.svg" alt="Misty, a grey cat" width="96" height="96">3  <p>Misty is looking for a home.</p>4</main>

asiel.example

Characters with a meaning

Two characters mean something in HTML. A < followed by a letter starts a tag: in cat<dog everything from the < up to the next > disappears.

And an & starts a character reference. < becomes <, and & becomes &. If what follows your & happens to be the name of a reference, you'll see a completely different character: &copy becomes ©.

So write them as references: Cat & Dog shows Cat & Dog, and 3 < 5 shows 3 < 5.

index.html

1<main>2  <h2>With thanks to</h2>3  <p>Cat &amp; Dog pet food in Heywood, for every bag of biscuits.</p>4</main>

asiel.example

An id is unique

An id is the name of one element. If the same id appears twice, the HTML is invalid, and when in doubt the browser picks the first one.

You notice it with a jump link: a link to #adopt jumps to the element with id="adopt", on the same page. Handy for a long page with a table of contents at the top.

If two chapters are both called adopt, the link always jumps to the first.

index.html

1<main>2  <p><a href="#adopt">How do I adopt?</a></p>3  <section id="animals">4    <h2>Looking for a home</h2>5    <p>Rex, Bella and Misty.</p>6  </section>7  <section id="adopt">8    <h2>How to adopt</h2>9    <p>Fill in the form and come and see us.</p>10  </section>11</main>

asiel.example

Try it yourself

Turn How do I adopt? into a link that jumps to the How to adopt chapter. To do that, give that chapter the id adopt.

1<main>2  <p>How do I adopt?</p>3  <section>4    <h2>Looking for a home</h2>5    <p>Rex, Bella and Misty.</p>6  </section>7  <section>8    <h2>How to adopt</h2>9    <p>Fill in the form and come and see us.</p>10  </section>11</main>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #fffaf3;5  color: #3d2b1f;6}7header {8  padding: 20px 16px 14px;9  background: #f6c88f;10}11header h1 {12  margin: 4px 0 0;13}14.slogan {15  margin: 4px 0 10px;16}17nav ul {18  display: flex;19  flex-wrap: wrap;20  gap: 4px 18px;21  margin: 0;22  padding: 0;23  list-style: none;24}25nav a {26  color: #7a3e12;27  font-weight: bold;28}29main {30  padding: 8px 16px 24px;31}32table {33  border-collapse: collapse;34}35th,36td {37  padding: 6px 12px;38  border: 1px solid #e3c9a8;39  text-align: left;40}41th {42  background: #fbe3c4;43}44.card {45  margin: 12px 0;46  padding: 12px 16px;47  border-radius: 16px;48  background: #ffffff;49}50.card h3 {51  margin: 4px 0;52}53.box {54  padding: 4px 16px;55  border-radius: 16px;56  background: #fde9d4;57}58.breed {59  color: #b5541c;60}61.closed {62  color: #b42318;63  font-weight: bold;64}65footer {66  padding: 12px 16px;67  background: #f6c88f;68}

asiel.example

Ready for more?

The full lesson has 5 exercises, from easy to challenging, with hints, points and a streak you can build.

Start the lesson

Learn HTML and CSS: Valid HTML

Attributes and valid HTML

The browser forgives a lot: a forgotten quote, an id that appears twice. But whoever forgives has to guess. On Hilary's site it guessed wrong, and now the link to the cats jumps to the dogs.

The rules of an attribute

An attribute sits in the opening tag: a name, an = and a value in quotes, like alt="Misty, a grey cat". Two attributes are separated by a space.

Without quotes, the value stops at the first space: alt=Misty sleeps gives an alt of just Misty. The browser reads the rest as new, unknown attributes.

Each attribute appears only once in a tag. If it's there twice, only the first one counts.

index.html

1<main>2  <img src="kat.svg" alt="Misty, a grey cat" width="96" height="96">3  <p>Misty is looking for a home.</p>4</main>

asiel.example

Characters with a meaning

Two characters mean something in HTML. A < followed by a letter starts a tag: in cat<dog everything from the < up to the next > disappears.

So write them as references: Cat & Dog shows Cat & Dog, and 3 < 5 shows 3 < 5.

index.html

1<main>2  <h2>With thanks to</h2>3  <p>Cat &amp; Dog pet food in Heywood, for every bag of biscuits.</p>4</main>

asiel.example

An id is unique

An id is the name of one element. If the same id appears twice, the HTML is invalid, and when in doubt the browser picks the first one.

You notice it with a jump link: a link to #adopt jumps to the element with id="adopt", on the same page. Handy for a long page with a table of contents at the top.

If two chapters are both called adopt, the link always jumps to the first.

index.html

1<main>2  <p><a href="#adopt">How do I adopt?</a></p>3  <section id="animals">4    <h2>Looking for a home</h2>5    <p>Rex, Bella and Misty.</p>6  </section>7  <section id="adopt">8    <h2>How to adopt</h2>9    <p>Fill in the form and come and see us.</p>10  </section>11</main>

asiel.example

Try it yourself

Turn How do I adopt? into a link that jumps to the How to adopt chapter. To do that, give that chapter the id adopt.

1<main>2  <p>How do I adopt?</p>3  <section>4    <h2>Looking for a home</h2>5    <p>Rex, Bella and Misty.</p>6  </section>7  <section>8    <h2>How to adopt</h2>9    <p>Fill in the form and come and see us.</p>10  </section>11</main>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #fffaf3;5  color: #3d2b1f;6}7header {8  padding: 20px 16px 14px;9  background: #f6c88f;10}11header h1 {12  margin: 4px 0 0;13}14.slogan {15  margin: 4px 0 10px;16}17nav ul {18  display: flex;19  flex-wrap: wrap;20  gap: 4px 18px;21  margin: 0;22  padding: 0;23  list-style: none;24}25nav a {26  color: #7a3e12;27  font-weight: bold;28}29main {30  padding: 8px 16px 24px;31}32table {33  border-collapse: collapse;34}35th,36td {37  padding: 6px 12px;38  border: 1px solid #e3c9a8;39  text-align: left;40}41th {42  background: #fbe3c4;43}44.card {45  margin: 12px 0;46  padding: 12px 16px;47  border-radius: 16px;48  background: #ffffff;49}50.card h3 {51  margin: 4px 0;52}53.box {54  padding: 4px 16px;55  border-radius: 16px;56  background: #fde9d4;57}58.breed {59  color: #b5541c;60}61.closed {62  color: #b42318;63  font-weight: bold;64}65footer {66  padding: 12px 16px;67  background: #f6c88f;68}

asiel.example

Ready for more?

The full lesson has 5 exercises, from easy to challenging, with hints, points and a streak you can build.

Start the lesson