Content Tags

Headings: H1 — H6

Headings are the main way to structure information on a page. HTML provides six levels of headings: from <h1> to <h6>. In practice, 3–4 levels are usually enough even for complex pages.

Rules of use

• <h1> — the main heading of the page; there must be only one per page. It is intensively indexed by search engines.
• Levels follow in sequence: h1 → h2 → h3 → h4. You cannot skip levels (for example, placing h4 immediately after h1).
• Headings of the same level can be repeated as many times as needed.
• Even if the designer did not draw a main heading — still mark up an <h1> and hide it visually with CSS.

Paragraphs: <p>

The <p> (paragraph) tag marks up a fragment of text united by a common meaning. Section or category titles should not be marked up as paragraphs — headings exist for that.

Important nuances

• The <p> tag by itself does not add spacing — spacing is created by the browser’s default styles. In a real layout there may be no space at all between paragraphs.
• If a paragraph is whole, keep it on a single line of code (line breaks concern only the width of the editor window).
• The formatting of the opening and closing tags must be uniform: either both on separate lines, or both on the same line as the text.

Line spacing: line-height

The CSS property line-height sets the distance between lines of text.

Absolute value (in pixels)

p {
line-height: 24px;
}

The line spacing is fixed rigidly. If the font size changes — the spacing stays the same, and the text may look “crammed together” or too spread out.

Relative value (unitless)

A relative unit is a fraction of the font size. It is written without units of measurement:

p {
line-height: 1.5;
}

If font-size: 16px, then line-height: 1.5 = 16 × 1.5 = 24px.

The advantage of relative units: with any change of font size, line-height is recalculated automatically, and visually the amount of “air” between the lines stays proportional.

You can see what value the browser recalculated it to on the Computed tab in DevTools.

Lists: <ol>, <ul>, <li>

List tags are used to mark up enumerations. Each list item is wrapped in a <li> (list item) tag.

Two types of lists

Nesting rules

• Inside <ol> or <ul> there can be only <li> tags — no other tags directly inside the list.
• Inside <li> you can use any tags: paragraphs, images, tables, other lists, and so on.
• A nested list is placed inside the <li> tag of the parent list.

Styling markers: list-style-type

The CSS property list-style-type changes the type of marker or numbering:

ol {
list-style-type: disc;  /* black dot instead of numbers */
}

Popular values: disc, circle, square, decimal, lower-alpha, none. The full list is in the reference MDN: list-style-type.

Why list semantics matter

Screen readers (programs for the blind) announce the type of list: “ordered list, 5 items” or “unordered list”. Correct markup makes the site accessible to all users and raises its position in search results.

Images: <img>

The <img> tag is self-closing (without a closing part) and inserts an image into the page. It has two required attributes.

The src attribute

src (source) — the path to the image. It can be absolute (a URL from the internet) or relative (a path to a local file).

<img src="images/photo.jpg" alt="Image description">

The alt attribute

alt (alternative text) — alternative text. It is needed for three purposes:

1. If the image fails to load — the browser shows the text from alt instead of the picture.
2. For search engines — search engines do not “see” images; they index the value of alt and use it in image search.
3. For screen readers — blind users hear the description of the image when focus lands on it.

The title attribute

A universal attribute for any tag. On hover, a tooltip appears. It is useful for icon-based interfaces, where it is not always clear what a button does.

Image with a caption: <figure> and <figcaption>

If an image has an explanatory caption — use the <figure> wrapper and the caption tag <figcaption>.

<figure>
<img src="photo.jpg" alt="Description">
<figcaption>Image caption</figcaption>
</figure>

Features

• <figure> — a semantic wrapper that tells the browser: here is a media element related to the content (a picture, video, code, etc.).
• Inside <figure> there can be only one <figcaption>.
• <figcaption> is optional — it may be absent.
• <figure> is not a picture. The content image is only <img>.
• In the text you should not refer to the position of a figure (“as shown in the figure above”). Instead, use numbered references (“figure 1”), so that the logic is not broken when the block is moved.

Text wrapping: float

The CSS property float makes an element “float” to the left or right edge, while the text wraps around it on the opposite side.

figure {
float: left;
}

If the picture is wrapped in <figure> — it is exactly the figure (the outermost parent tag) that should be floated.

Inner spacing: padding

The padding property sets the spacing from the boundaries of an element inward, toward its content. It is the analog of margins in a document — the distance from the edge of the sheet to the text.

Longhand properties

Shorthand notation

Border: border

The border (border) is located outside the padding. By default it is invisible on all elements, but it is available for styling.

Three components of a border

Each of these properties has 4 sub-properties for individual sides (for example, border-top-width, border-left-style, etc.).

Shorthand notation

If all 4 sides are the same, use:

figure {
border: 2px solid #ddd;  /* thickness style color */
padding: 15px;
}

Outer spacing: margin

The margin property sets the spacing outside an element. The syntax and shorthand notation are absolutely the same as for padding.

figure {
margin: 0 30px 25px 0;  /* top right bottom left */
}

The box model: the big picture

In DevTools: blue — content, green — padding, yellow — border, orange — margin.

Inline markup: <span>

The <span> tag is a universal inline container with no semantic meaning of its own. It is used to style individual words or phrases.

New types of selectors

Selector by tag (already familiar)

p { color: #333; }

Applies to all elements with that tag.

Selector by identifier: #id

<p id="intro">Text</p>
#intro { color: blue; }

• The id attribute is universal; it can be assigned to any tag.
• The value of id must be unique on the page — two elements with the same id is invalid code.
• In CSS the selector begins with # (a hash).

Selector by class: .class

<span class="book-name">Kobzar</span>
.book-name { font-weight: bold; }

• A class can be repeated on an unlimited number of elements.
• In CSS the selector begins with . (a dot).
• One element can have several classes, listed separated by a space: class="book-name
primary".
• Name classes by the purpose of the element, not by its appearance.

Comparison of selectors

Code formatting

Follow a consistent formatting style:

• Nested tags must be indented 2 spaces relative to the parent tag.
• Code editors and sandboxes (CodePen, etc.) have an auto-formatting feature — use it before checking.
• The formatting of the opening and closing tags must be consistent.

Multi-line editing

Two ways to edit several lines at once in the editor:

• Cmd (Mac) / Ctrl (Windows) + click — click into the desired lines, and the cursor expands across several lines at once.
• Alt/Option + drag — “stretch” the cursor vertically across consecutive lines (rectangular selection).

Tips for beginners

• Do not be afraid to ask questions. There are no stupid questions. Any question leads to understanding.
• Ask specific questions. Instead of “I don’t understand anything” — “what does this property mean?”.
• Do not copy others’ work. A solution made by another person does not stick in your head.
• Forget about optimization for the next two years. Do not save lines of code. If you only need to set 2 paddings — write 2 longhand properties, not the shorthand.
• Get used to code formatting right away. All development is built on adhering to style guides.
• Reach the solution on your own. A mentor only gently guides with hints — and that is the right approach.

Summary

What we covered in this lecture:

1. Headings <h1>–<h6> — levels and rules of use
2. Paragraphs <p> — marking up text fragments
3. Lists <ol>, <ul>, <li> — ordered and unordered
4. Images <img> — the src, alt, title attributes
5. Image with a caption <figure> + <figcaption>
6. CSS box model properties: padding, border, margin
7. line-height — absolute and relative values
8. list-style-type — styling list markers
9. float — text wrapping (and only wrapping!)
10. Selector by id (#) and selector by class (.)
11. The <span> tag — inline text styling with no semantic meaning