PHASE 1Beginner ~24 min· topic 1 of 8

Topic 1.1

Elements, Tags and Attributes

In one line

An element is one piece of a page, written as an opening tag, some content and a closing tag; attributes inside the opening tag add extra settings like an id, a link address or an on/off switch.

Think of it like this

A labelled gift box. The box is the element. The lid and the bottom are the opening and closing tags that hold the gift in. The gift inside is the content. The sticky notes on the lid ("to: Asha", "fragile") are attributes: they don't change what's inside, but they tell everyone extra facts about the box.

Words you'll meet

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

Element: One piece of a page, like a heading or a paragraph: opening tag, content, closing tag.
Tag: The labels in angle brackets that start and end an element:  opens,  closes.
Content: What sits between the opening and closing tags: text, other elements, or both.
Nesting: Putting an element inside another. The inner one must close first.
Void element: An element with no content and no closing tag, like   or <img>.
Attribute: An extra setting written inside the opening tag as name="value", like href on a link.
Boolean attribute: An attribute that is on when present and off when missing, like disabled. Its value is ignored.
Content model: The rule for what an element is allowed to contain, defined in the HTML standard.

Step by step

01Take one element apart

Here is a paragraph with a class attribute. It has four parts: the opening tag , the attribute class="note" inside it, the content Hello, and the closing tag .

index.htmlwhole filehtml

<p class="note">Hello</p>

Take one element apartdiagram

Rendering diagram…

02Put elements inside elements

Add an  (emphasis) inside the paragraph. It opens after  and closes before , so it sits completely inside. The browser builds a tree: the paragraph is the parent, and the text and  are its children.

index.htmlwhole filehtml

<p class="note">Hello, <em>you</em>!</p>

Put elements inside elementsdiagram

Rendering diagram…

03Add a void element

An image has no content: everything it needs is in its attributes, so it has no closing tag. src says which file to show and alt describes it in words.

index.htmlwhole filehtml

<p class="note">Hello, <em>you</em>!</p>
<img src="wave.png" alt="A waving hand">

04Add a boolean attribute

A checkbox that starts ticked uses the boolean attribute checked. You write the name alone. checked="" and checked="checked" mean the same thing.

index.htmlwhole filehtml

<label><input type="checkbox" checked> Send me updates</label>

05Check what the browser built

Open DevTools → Elements. You see the tree, not your text: tags in lowercase, attributes in order, and any mistakes already repaired. The tree the browser builds from your HTML is called the DOM (Document Object Model). JavaScript reads and changes the page through it.

Try it yourself

1
Turn the switch off
In the first example, predict: what does button.disabled print if you change disabled="false" to disabled="no"? Run it. Then delete the whole attribute and run again.
2
Fix the overlap
In the second example, rewrite the first paragraph so the tags close in the right order: bold both italic. Predict the new innerHTML before you run it.
3
Count the children
In the first example, add ! at the end of the first paragraph, before . How many children does it have now? Run to check.

Code & diagrams

Reading elements and attributes New tab

The paragraph has three children: the text before ``, the `` element and the text after it.

Preview

Press Run to see the page.

Console

Nothing logged yet.

Expected console output

Tag name: P
class attribute: note
Children of the paragraph: 3
href: https://hectal.in
checked is present: true
button.disabled: true

The browser repairs bad nesting New tab

Look at the dashed boxes: the second paragraph closed before the div, and the stray `` made a third, empty paragraph.

Preview

Press Run to see the page.

Console

Nothing logged yet.

Expected console output

What you wrote: <b>bold <i>both</b> italic</i>
What you got: Overlapping: <b>bold <i>both</i></b><i> italic</i>
Paragraphs on the page: 3

Quotes, duplicates and case New tab

Unquoted values and uppercase names work, but write lowercase names and double quotes. The second `class` is thrown away.

Preview

Press Run to see the page.

Console

Nothing logged yet.

Expected console output

title: single quotes work
id (unquoted): plain
class (written twice): first
Attribute names: title, id, class

Break it on purpose

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

Break #1

Forget to close a tag

Write First importantSecond (the  is never closed).

terminal

$ the page shows

── what you'll see ──

"important" and the whole second paragraph are both in italics.

Break #2

Try to switch off a boolean attribute with a value

Write <input type="checkbox" checked="false">.

terminal

$ the page shows

── what you'll see ──

The checkbox is ticked.

Break #3

Put a div inside a paragraph

Write Intro <div>Box</div> outro.

terminal

$ DevTools → Elements

── what you'll see ──

Intro

" outro"

Myth vs fact

Myth

  with a slash is the correct modern way to write void elements.

Fact

In HTML the slash on a void element is allowed and ignored. Both   and   are valid. On a non-void element like <div/> the slash is ignored too, so the div is not closed.

Myth

Attribute values must always be in double quotes.

Fact

Double quotes, single quotes and (for simple values) no quotes are all valid HTML. Double quotes are the convention because they always work.

Myth

disabled="false" turns disabled off.

Fact

Any presence of a boolean attribute turns it on. Remove the attribute to turn it off.

Pro corner

Extra depth for experienced readers. New to this? Skip it for now and come back later.

▸
The HTML parser's repair rules are fully specified. Mis-nested formatting tags like  are handled by the adoption agency algorithm, which closes and reopens elements so every browser builds the same DOM.
▸
There is a difference between an attribute (text in the HTML) and a property (a value on the DOM object). input.getAttribute("value") is the starting value you wrote; input.value is what's in the box now. For checked, the attribute sets the default and the property holds the live state.
▸
HTML attribute names are lowercased by the parser, but SVG and MathML inside HTML keep case-sensitive names like viewBox. The parser has a fix-up table for them.
▸
Some elements have optional closing tags: , </li>, </td> and others may be left out, and the parser closes them automatically. It's valid, but writing every closing tag avoids surprises.

Remember this

1
An element is one piece of a page, like a paragraph. You write it with an opening tag , the content, and a closing tag  with a slash. Tag names are case-insensitive ( works), but everyone writes them in lowercase. In DevTools and in JavaScript the browser shows the element's name in capitals: P.
2
Elements nest: one element can sit inside another, like I am very happy. The inner element must close before the outer one does. Think of it as boxes: you close the small box before you close the big box around it. Writing text overlaps the boxes, and the browser has to guess what you meant.
3
Not every element can go inside every other. A content model (the rule for what an element may contain) is defined for each element in the HTML standard. For example, a  may contain only text-level content (words, links, , images), never another , a list or a <div>. If you put one there anyway, the browser closes the paragraph early.
4
Some elements have no content and no closing tag. They are called void elements:   (line break), <hr> (divider line), <img> (image), <input> (form field), <meta>, <link>, <source>, <track>, , <area>, <base>, <col> and <embed>. Writing   with a slash is allowed but the slash does nothing in HTML. Writing  or <img></img> is wrong.
5
An attribute is a name="value" pair in the opening tag: <a href="https://hectal.in" title="Home">. Separate attributes with spaces, in any order. Names are case-insensitive. The value can use double quotes, single quotes, or no quotes if it has no spaces or special characters, but always quoting with double quotes is the safe habit. If you write the same attribute twice, the browser keeps the first one and ignores the second.
6
A boolean attribute is an on/off switch: if it is present, it's on; if it's missing, it's off. <input checked>, <button disabled> and <details open> are examples. The value does not matter: disabled="false" still disables the button, because the attribute is present. To turn it off, remove the attribute completely.

Explain it without notes

What is the difference between an element, a tag and an attribute?

What is a void element? Name five.

How do boolean attributes work, and why doesn't disabled="false" enable a button?

What happens when you put a <div> inside a ?

Practice

Write a paragraph with the id intro and the class lead, containing the text Welcome to my page where the word my is emphasised.

Write a text box (<input>) that is disabled and required, using boolean attributes correctly. Then write how you'd make it enabled again in HTML.

Find and fix the two mistakes: Read <a href=about.html>about me</a> 

Trade-offs

↔
Leaving out optional closing tags and quotes makes HTML shorter but harder to read and easier to break when someone edits it later; most teams write every closing tag and quote every value.

Done when you can

I can name the parts of an element: opening tag, attributes, content, closing tag.
I can nest elements correctly, closing the inner one first.
I can list common void elements and write them without closing tags.
I can write attributes with correct syntax and know the first duplicate wins.
I can use boolean attributes and turn them off by removing them.

Command Palette

Words you'll meet

Step by step

01Take one element apart

02Put elements inside elements

03Add a void element

04Add a boolean attribute

05Check what the browser built

Try it yourself

Turn the switch off

Fix the overlap

Count the children

Code & diagrams

Break it on purpose

Forget to close a tag

Try to switch off a boolean attribute with a value

Put a div inside a paragraph

Myth vs fact

Pro corner

Remember this

Explain it without notes

Practice

Trade-offs

Done when you can