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.
<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: Nice title
H2: Nice sub-title
H3: Nice sub-sub-title
<p>
Marks a paragraph. It's a block-level element.
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
<br>
Inserts a line break.
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
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.
<i>
Makes text italic.
<u>
Makes text underlined.
<s>
Renders text with strikethrough.
<sub>
Renders text as subscript
<sup>
Renders text as superscript
References
- HTML elements reference (MDN) — https://developer.mozilla.org/en-US/docs/Web/HTML/Element