HTML Tags: The Basics
These are the most common HTML tags. You would put these inside <body>, since they correspond to the content of your web page.
- Block-level elements will be placed in their own line
- Inline elements will flow in-line with the surrounding text
| Tag | Type | Description |
|---|---|---|
| Containers | ||
<div> | Block | Creates a generic block-level container |
<span> | Inline | Creates a generic inline container |
| Common tags | ||
<h1-h6> | Block | Marks headers |
<p> | Block | Marks paragraphs |
<hr> | Block | Inserts a horizontal ruler |
<br> | Inline | Inserts a line break |
<a> | Inline | Creates anchors/hyperlinks |
<b> | Inline | Makes text bold |
<i> | Inline | Makes text italic |
<u> | Inline | Makes text underlined |
<s> | Inline | Renders text with |
<sub> | Inline | Renders text as subscript |
<sup> | Inline | Render text as superscript |
<div> and <span>
<div> is used to create a generic block-level container, which means it will take the whole horizontal space of its parent
(it will be on its new line).
<span> is used to create a generic inline container, which means it will flow with the current line of text.
These containers by themselves will not change how the content is displayed; you will normally use this for layouting and styling with CSS.
<!-- div creates its own line -->
<div style="background-color: red; color: white">
I'm creating a new line!
</div>
<!-- span flows inline with the surrounding text -->
Lorem ipsum
<span style="background-color: blue; color: white">
I'm flowing with the text
</span>
dolor sit amet<h1> – <h6>
These are used to create headers. They are block-level elements.
<h1>would normally be used for title<h2>would be for the subtitle<h3>would be for the sub-subtitle- so on and so forth.
<h1>H1: Nice title</h1>
<h2>H2: Nice sub-title</h2>
<h3>H3: Nice sub-sub-title</h3>H1: Nice title
H2: Nice sub-title
H3: Nice sub-sub-title
<p>
Marks a paragraph. It's a block-level element.
<p>Lorem ipsum dolor sit amet. Consectetur adipisicing elit.</p>
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>Lorem ipsum dolor sit amet. Consectetur adipisicing elit.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<hr>
Inserts a horizontal ruler.
one two three
<hr>
one two threeone two three
<br>
Inserts a line break.
<p>
Lorem ipsum
<br />
dolor sit amet
</p>
Lorem ipsum
dolor sit amet
<a>
Creates anchors and hyperlinks.
Common attributeshref=[...]— where the link points totarget=[...]— where to open it (read here)
download=[...]— instead of opening the link, prompt the user to download it. If value is not empty, it will be the name of the downloaded file. (Only works for same-origin URLs, orblob:anddata:schemes)ping=[...]— list of space-separated URLs to which the browser will sendPINGPOST requests when the hyperlink is followed (usable for tracking).hreflang=[...]— indicates the language of the linked resource (e.g.en-US)rel=[...]— relation of the linked resource (read here)referrerpolicy=[...]— read here
<p>To search the internet, <a href="https://google.com">click here</a>!</p>
<!-- Prompts download when clicked -->
<p>
Taken from MDN site:
<a href="/res/web/html/mdx-info2.png" download>Download an image?</a>
</p>
<!-- When clicked, the header will be brought to top of page -->
<h2 id="my-anchor">My Anchor</h2>
<p>Click <a href="#my-anchor">here</a> to go to My Anchor</p>To search the internet, click here!
Taken from MDN site: Download an image?
My Anchor
Click here to go to My Anchor
<b>
Makes text bold.
<b>I'm bold!</b><i>
Makes text italic.
<i>I'm italic!</i><u>
Makes text underlined.
<u>I'm underlined!</u><s>
Renders text with strikethrough.
<s>I'm struck-through!</s><sub>
Renders text as subscript
I'm a <sub>subscript</sub><sup>
Renders text as superscript
I'm a <sup>superscript</sup>References
- HTML elements reference (MDN) — https://developer.mozilla.org/en-US/docs/Web/HTML/Element