2.html-elements.md
Quiz
~/ hackweb.dev
...
~/
/tutorials
/en/html/html-elements/edit
~ Contribute
Suggest a correction or improvement. The author reviews it before it goes live.
Loading...
en/tutorials/html/2html-elements
# HTML Elements Deep Dive HTML is built from elements. The two most important ideas are **block vs inline** behavior and how elements **nest** inside each other to form the document tree. ## Block and inline A **block** element spans the full width of its container and starts on a new line. An **inline** element flows inside surrounding text. ```html <p>This is a block element — it takes the full width.</p> <strong>inline</strong> and <em>inline</em> flow within text. ``` - Block: `<div>`, `<p>`, `<h1>`–`<h6>`, `<ul>`, `<section>` - Inline: `<a>`, `<span>`, `<strong>`, `<em>`, `<img>` ## Nesting elements Elements can contain other elements. Always close inner elements before outer ones, and never put block elements inside inline ones. ```html <section> <h2>Chapter title</h2> <p>A paragraph with an <a href="/">inline link</a>.</p> </section> ``` ## Text and emphasis Use semantic text elements instead of plain styling. They carry meaning for assistive tech and search engines. ```html <p>This is <strong>important</strong> and this is <em>emphasized</em>.</p> ``` - `<strong>` — important (bold by default) - `<em>` — emphasis (italic by default) - `<code>` — inline code
Submit suggestion
cancel