# HTML elements – The basics
An HTML element is is a piece of content (usually text) that is enclosed within tags. The tag name defines what type of content it is and how it should be displayed.
Some common tags you'll use include:
`` Defines a Heading
`` Defines a paragraph
`` Defines an anchor link
Most HTML elements have an opening, and closing tag, the content sitting between them, for example:
`This is a heading
`
`This is my first paragraph
`
however, there are a few tags that don't have a closing tag. for example:
`
` This is used to insert a line break.
`
` This with insert a horizontal rule.
`
` the `img` tag is used to insert an image.
#### Attributes
Attributes are often included in an HTML open tag to define more information about the content. Attributes are included using a name and value pair. In the examples below the attribute href for "hypertext reference", defines the location the anchor link should go when the text "visit google" is clicked.
`visit google`
in this image element:
``
the `scr` or "source" attribute is used to define the location of the images to display. The `alt` attribute defines alternate text for when the image cannot be displayed or viewed. alt attributes are important for the accessibility of visually impaired readers.
another common attribute that is often included in an HTML tag is `class`. `class` attributes make it possible to differentiate different types of content with the same tags and style them accordingly in CSS.
the `id` attribute is used to define a unique identifier for an HTML element. This makes the element easy to select using javascript and can be navigated to using anchor links.
[](https://bookstack.chesterwhitwell.co.nz/uploads/images/gallery/2022-05/image-1652918480825.png)
### Block vs inline
The browser has two ways to display elements in the viewport.
**Block** elements always start on a new line and use the full width of the viewport.
Examples of block level elements include:
- ``
- `
`, ``, ``
- All headings `h1`–`h6`
- ``, ``, ``
**Inline** elements display in a line. They do not force the text after them to a new line.
An anchor (or link) is an example of an inline element. You can put several links in a row, and they will display in a line.
Examples of inline elements:
- `
`
- ``, ``, ``, ``, `, `
- ``
The `img` tag is also an example of an inline element, meaning that unless they are floated (covered later in CSS) they will flow horizontally with text and other inline elements.
Take a look at the codepen below, notice that each of the paragraph tags are presented as a block and the anchor tag stays inline.
Try moving the img tag inside one of the paragraph tags. ***What do you think will happen?***
***Did you notice that the image can sit between words in the paragraph?***
the default display properties of an element can be changed using CSS styles.
#### Nesting
Nesting in HTML refers to placing elements inside other elements. for example placing an <img> element inside a <p> element.
when creating a list, the line items (<li> tags) are nested within <ul> or <ol> tags. there are a couple of rule for nesting.
1. You can't open a tag in one element and close it in another, make sure you're closing tags are in the correct order.
2. You shouldn't nest block elements inside inline elements.
```HTML
The about page
The about page
The about page
```