The <div> Tag — a Universal Container
<div> — a block element for grouping content. It carries no semantic meaning whatsoever.- Used when no semantic tag fits, but you still need to group elements or apply shared styles.
- If a more suitable semantic tag exists (
<main>, <section>, <article>, <aside>) — use it instead of <div>.
Principle: semantics first, then <div>. Don’t wrap everything in a <div> — look for a tag with the right meaning.
Naming Classes
- In English — this is the industry standard. Classes in Ukrainian or other languages are not acceptable.
- Semantic names — the class describes the element’s purpose, not its appearance.
- kebab-case — words are separated by hyphens:
course-card, main-nav, article-preview.
✅ Correct
course-cardarticle-previewsidebar-widgetmain-content
❌ Incorrect
red-block (the color may change)big-text (a visual description)left-column (the position may change)kartka-kursu (not in English)
Never name classes after their appearance. Design changes — names stay. The class red-button becomes meaningless if the button is repainted blue.
The <main> Tag — the Main Content
<main> marks the page’s main, unique content — the very reason the user opened the page.- There must be exactly one per page.
- It does not include the header, footer, navigation, or sidebar — only the main content.
- On an article page, it’s the article text. On a blog’s home page, it’s the feed of posts.
On the Smashing Magazine site, the main content is the article text. The sidebar with recommendations and the header with navigation are all outside <main>.
<body>
<header>...</header>
<main>
<!-- The page's main content -->
<h1>Article Heading</h1>
<p>Article text...</p>
</main>
<footer>...</footer>
</body>
The <aside> Tag — Related Content
<aside> marks content that is related to the main content but is not part of it.- It can be inside
<main> (a pull-out in an article, a related promotional offer) or outside it (a sidebar).
- A page can have several
<aside> elements.
- The key criterion is a connection to the main content. If a block has no connection to
<main>, it’s not an <aside>.
An article about artificial intelligence with a promotional block for a Data Science course next to it. It is indirectly related to the article’s content → <aside>.
<!-- aside inside main -->
<main>
<article>...</article>
<aside>Related course</aside>
</main>
<!-- aside outside main -->
<main>...</main>
<aside>Sidebar</aside>
The <section> Tag — a Thematic Group
<section> — thematically grouped content that has a heading.- Unlike
<article>, a <section> is not self-contained — it’s part of a larger context.
- If you pull a
<section> out of the page, it may lose its meaning.
- A
<section> can contain other <section> or <article> elements.
A simple guideline: a <section> is essentially a <div> with a heading and thematic content. If there’s a heading and a group of related elements — use <section>.
<section>
<h2>Other Courses</h2>
<article>Course card 1</article>
<article>Course card 2</article>
<article>Course card 3</article>
</section>
The <article> Tag — Independent Content
<article> — a self-contained, independent unit of content that can be pulled out of the page and used on its own.- An
<article> must have a heading.
- Typical examples: a product card, a news item in a feed, a blog post, a comment.
- An
<article> cannot contain another <article>.
<article>
- Independent of context
- Can be moved elsewhere
- Requires a heading
- Cannot be nested within itself
<section>
- Part of a larger context
- May lose meaning when taken out
- A heading is desirable
- Can be nested within itself
Priority of Semantic Tags
When marking up a page, determine the tags in this order:
<main> — single out the page’s main content.<aside> — find the blocks related to the main content.<article> — identify independent, self-sufficient elements.<section> — group thematic blocks that have headings.<div> — everything that didn’t fit any semantic tag.
There’s no need to “obsess over semantics” and stuff semantic tags everywhere. Their main purpose is to give search engines and screen readers a general idea of the page’s structure.
An Example of Page Markup
Imagine a news site page with an article and recommendations:
<body>
<header>Site header</header>
<main>
<!-- The article — the main content -->
<section>
<h1>Article Heading</h1>
<p>First part of the text...</p>
</section>
<section>
<h2>Second Section</h2>
<p>Second part of the text...</p>
</section>
<!-- Related offer -->
<aside>Special course on the article's topic</aside>
</main>
<!-- Recommended courses block -->
<section>
<h2>Other Courses</h2>
<article>Course card 1</article>
<article>Course card 2</article>
</section>
<footer>Site footer</footer>
</body>
Study the markup of quality sites (for example, Smashing Magazine) through your browser’s inspector — this will help you develop a “professional eye” for page structure.
The Box Model
Every element on a page is a rectangle (a box). The browser builds the layout based on the sizes of these boxes.
Parts of an Element
- Content area (content) — the area where text or child elements are placed.
- Inner padding (padding) — the space between the content and the border.
- Border (border) — the element’s visible frame.
Element = content + padding + border
What Is a Box?
Box = element + outer margin (margin). It is through boxes that elements “see” one another and interact on the page.
Calculation Formulas
- Element width = width + padding-left + padding-right + border-left + border-right
- Element height = height + padding-top + padding-bottom + border-top + border-bottom
- Box width = element width + margin-left + margin-right
If the sum of the child elements’ widths exceeds the parent’s width — the elements wrap onto a new line. Even 1 extra pixel will cause a wrap.
The box-sizing Property
box-sizing changes exactly what the width and height properties affect.
| Value |
width sets |
Calculation |
content-box (default) |
the width of the content area |
Total width = width + padding + border |
border-box |
the width of the whole element |
The browser automatically shrinks the content area |
Given width: 300px and padding: 50px.
With content-box: total width = 300 + 50 + 50 = 400px.
With border-box: total width = 300px (content automatically = 200px).
box-sizing does not affect margin — that’s a property of the box, not the element. box-sizing only changes the behavior of width and height.
box-sizing is not inherited. It must be set on each element separately (or via the universal selector *).
Inline and Block Elements
The display property determines how an element behaves on the page.
display: inline
- They behave like words in a sentence — lining up one after another in a row.
- The box model does not apply:
width, height, and vertical margin do not work.
padding is rendered but does not interact with neighboring elements (it overlaps the text).- The size is determined solely by the inner content.
Examples: <a>, <span>, <strong>, <em>, <time>.
display: block
- They take up the full width of the parent’s content area by default.
- The full box model applies:
width, height, margin, padding, border.
- Every block element starts on a new line.
Examples: <div>, <h1>–<h6>, <ul>, <ol>, <li>, <section>, <article>.
A Special Case: <p>
The <p> tag has an inline formatting context (only inline elements inside), but the box model applies to it (width, margin, padding work).
How to check an element’s type: if the element takes up the full width by default — it’s a block element. If its width equals its content — it’s inline. Or open the reference on
MDN.
Changing an Element’s Type
An inline element can be made a block element (and vice versa) via display:
/* Make the link a block element */
a {
display: block;
width: 375px;
margin-top: 20px;
}
After display: block, the link:
- Takes up the full width of the parent (or the specified
width).
- Responds to
margin-top and padding.
- Starts on a new line.
Text Alignment: text-align
text-align aligns the inline content inside a block element.- It’s applied to the parent block element, not to the text itself.
- It does not work for inline elements — they are already part of a line.
To center the text of an inline link, wrap it in a block element and set text-align:
center on the wrapper.
<div class="action">
<a href="#">Read more</a>
</div>
<!-- CSS -->
.action { text-align: center; }
Centering a Block Element
To center a block element horizontally, you need two conditions:
- The element has an explicit width (
width).
- Automatic side margins are set.
.news {
width: 485px;
margin-left: auto;
margin-right: auto;
}
The browser automatically distributes the free space equally between the left and right margins.
If no width is set — the block element takes up the full width of the parent anyway, and centering makes no sense.
Don’t use the shorthand margin: auto — it will overwrite the vertical margins. Set margin-left: auto and margin-right: auto separately.
A Single auto Margin
margin-left: auto — pushes the element to the right.margin-right: auto — changes nothing (the element is on the left anyway).- Both set to
auto — the element is centered.
Vertical auto margins (margin-top: auto, margin-bottom: auto) do not work for centering in the normal flow.
Property Inheritance
- Text properties are inherited:
font-family, font-size, color, line-height, text-align, and so on.
- Set them on
body — and all child elements will receive these values.
- Box model properties are NOT inherited:
margin, padding, border, width, height, box-sizing.
body {
font-family: "Segoe UI", sans-serif;
color: #333;
line-height: 1.6;
/* All child elements will inherit these values */
}
Summary
| Topic |
Key Point |
<div> |
A universal container with no semantics |
<main> |
The main content, one per page |
<aside> |
Related content, connected to the main content |
<article> |
Independent content with a heading |
<section> |
A thematic group with a heading |
| Box Model |
content + padding + border = element; + margin = box |
box-sizing |
content-box: width → content; border-box: width → whole element |
| Inline vs Block |
Inline: no box model; Block: full box model |
| Centering a block |
width + margin-left/right: auto |
| Inheritance |
Text properties — yes; box model — no |
