# Element
**ALSO SEE:** [[attributes]]
## [[HTML]]
##### Definition
everything from the start tag to the end tag
##### Info
tags are not case sensitive
- so `<P>` is the same as `<p>`
- lowercase is recommended for HTML
- some file types (like XHTML) require lowercase
##### Examples
```html
<tagname> Content goes here... </tagname>
```
|Start tag | Element content | End tag|
|---|---|---|
|`<h1>` | `Large Heading` | `</h1>` |
| `<p>` | `a paragraph.` | `</p>` |
### Empty Elements
##### Definition
have no content or end tag
Some elements have no content
##### Example
`<br>`
### Element List
| Defines | start tag | end tag | Link | Note |
| ----------------------- | ------------------ | ------------------- | ------------------- | ---- |
| Bi-Directional Override | `<bdo>` | `</bdo>` | [[#`<bdo>`]] | |
| Headings | `<h1>` thru `<h6>` | `</h1>` thru `<h6>` | [[#Headings]] | |
| Paragraphs | `<p>` | `</p>` | [[#`<p>`]] | |
| abbreviations | `<abbr>` | `</abbr>` | [[#`<abbr>`]] | |
| body | `<body>` | `</body>` | [[#`<body>`]] | |
| bold text | `<b>` | `</b>` | [[#`<b>`]] | |
| contact info | `<address>` | `</address>` | [[#`<address>`]] | |
| define title | `<cite>` | `</cite>` | [[#`<cite>`]] | |
| deleted text | `<del>` | `</del>` | [[#`<del>`]] | |
| emphasized text | `<em>` | `</em>` | [[#`<em>`]] | |
| horizontal rule | `<hr>` | *none* | [[#`<hr>`]] | |
| hyperlink | `<a>` | `</a>` | [[#`<a>`]] | |
| image | `<img>` | `</img>` | [[#`<img>`]] | |
| important text | `<strong>` | `</strong>` | [[#`<strong>`]] | |
| inserted text | `<ins>` | `</ins>` | [[#`<ins>`]] | |
| italic text | `<i>` | `</i>` | [[#`<i>`]] | |
| line break | `<br>` | *none* | [[#`<br>`]] | |
| marked text | `<mark>` | `</mark>` | [[#`<mark>`]] | |
| preformatted text | `<pre>` | `</pre>` | [[#`<pre>`]] | |
| quotation, long | `<blockquote>` | `</blockquote>` | [[#`<blockquote>`]] | |
| quotation, short | `<q>` | `</q>` | [[#`<q>`]] | |
| root | `<html>` | `</html>` | [[#`<html>`]] | |
| smaller text | `<small>` | `</small>` | [[#`<small>`]] | |
| subscript text | `<sub>` | `</sub>` | [[#`<sub>`]] | |
| superscript text | `<sup>` | `</sup>` | [[#`<sup>`]] | |
**Formatting Elements:**
- `<b>` - Bold text
- `<strong>` - Important text
- `<i>` - Italic text
- `<em>` - Emphasized text
- `<mark>` - Marked text
- `<small>` - Smaller text
- `<del>` - Deleted text
- `<ins>` - Inserted text
- `<sub>` - Subscript text
- `<sup>` - Superscript text
### Element Details
###### `<a>`
- defines **hyperlink**
- uses [[attributes#`href`|`href`]] to specify the URL of the page the link goes to
- Syntax:
-` <a href="`_url_`>`_link text_`/a>`
- by defualt, links will appear as follows in all browsers:
- An unvisited link is underlined and blue
- A visited link is underlined and purple
- An active link is underlined and red
- Specifying the window...
- By default, the linked page will be displayed in the current browser window
- use the [[attributes#`target`|target attribute]] to specify where the link opens
- Can use an image as a link by placing [[#`<img>`]] inside the [[#`<a>`]] tag
```html
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
```
- can link to an email address using `mailto:` inside the [[attributes#`href`|href]] attribute
```html
<a href="mailto:
[email protected]">Send email</a>
```
- can use a button as a link using [[JavaScript]]
- Can use absolute or relative URLs
```html
<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>
<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>
```
###### `<b>`
- bold text
- for important text, see [[#`<strong>`]]
-
###### `<strong>`
- Important text
- typically displayed as bold (see also: [[#`<b>`]])
-
###### `<i>`
- Italic text
- for emphasized text, see [[#`<em>`]]
###### `<em>`
- Emphasized text
- typically displayed as italic (see also: [[#`<i>`]])
###### `<mark>`
- text that should be marked or highlighted
###### `<small>`
- Smaller text
###### `<del>`
- Deleted text, typically shown as a strike-through
###### `<ins>`
- Inserted text, usually underlined
###### `<sub>`
- Subscript text
###### `<sup>`
- Superscript text
###### `<html>`
- Attributes:
- [[attributes#`xmins`|'xmins']]
- [[attributes#Global attributes|global attributes]]
- should include [[attributes#`lang`|'lang' attribute]] to declare language of the web page. this assists search engines and browsers
- Ex. `<html lang="en">
- [additional info from W3 Schools](https://www.w3schools.com/tags/tag_html.asp)
###### `<body>`
- defines the document's body
- start tag is `<body>`
- end tag is `</body>`
- [additional info from W3 Schools](https://www.w3schools.com/tags/tag_body.asp)
###### Headings
- `<h1>` thru `<h6>`
- start tag is `<h1>` for heading 1
- end tag is `</h1>` for heading 1
- browsers automatically add some white space (a margin) before and after a heading
- Can change font size in html (using [[attributes#`style`|style attribute]]) or [[CSS]] (using `font-size` property)
- ex using html: `<h1 style="font-size:60px;">Heading 1</h1>`
- [additional info from W3 Schools](https://www.w3schools.com/tags/tag_hn.asp)
###### `<p>`
- for paragraphs
- start tag is `<p>`
- end tag is `</p>`
- browsers automatically...
- start paragraphs on a new line
- add a margin before and after a paragraph
- remove any extra spaces or lines from text
- [additional info from W3 Schools](https://www.w3schools.com/tags/tag_p.asp)
###### `<pre>`
- defines preformatted text
- preserves both spaces and line breaks
- displayed in a fixed-width font, typically Courier
- [additional info from W3 Schools](https://www.w3schools.com/tags/tag_pre.asp)
###### `<br>`
- defines a line break
- does not have a closing tag (is an empty element)
- [additional info from W3 Schools](https://www.w3schools.com/tags/tag_br.asp)
###### `<img>`
- used for images
- [[attributes]]
- [[attributes#`src`|src]]
- [[attributes#`alt`|alt]]
- [[attributes#`width`|width]]
- [[attributes#`height`|height]]
- should contain `width` and `height`
- requires `alt`
###### `<hr>`
- defines a thematic break
- typically displayed as a horizontal rule
- is an empty tag (has no end tag)
- [additional info from W3 Schools](https://www.w3schools.com/tags/tag_hr.asp)
- Example:
```html
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
```
###### `<blockquote>`
- usually indented
- attributes include:
- [[attributes#`cite`|cite]]
###### `<q>`
- defines a short quotation
- browsers typically place quotation marks around this text
###### `<abbr>`
- defines an abbreviation or an acronym
- example using [[attributes#`title`|title attribute]]:
```html
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
```
###### `<address>`
- defines the contact information for the author/owner of a document or an article
- can be an email address, URL, physical address, phone number, social media handle, etc
- element usually renders in _italic,_ and browsers will always add a line break before and after
###### `<cite>`
- defines the title of a creative work (like book, poem, song)
- Example:
```html
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
```
###### `<bdo>`
- BDO stands for Bi-Directional Override.
- used to override the current text direction
- Example:
```html
<bdo dir="rtl">This text will be written from right to left</bdo>
```
## Also See
[[attributes]]