`
**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:
- ``
- ``, ``, ``, ``, `` - Deleted text
- `` - Inserted text
- `` - Subscript text
- `` - Superscript text
***Try adding some of the other formatting tags to the paragraphs in the codepen below.***
#### heading tags
Heading tags are as the name suggests used to define headings. Heading tags range from `` (most important) to `
, ` - `` 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``` # More tags Now with an understanding of the fundamental structure of and HTML page, let's look at a few more common tags and their uses. #### Text formatting We previously looked at the <p> tag and its use for defining paragraphs. sometimes we need to highlight one or just a few words within a paragraph. That's where text formatting tags can be useful. these formatting elements are designed to highlight special types of text: - `` - Bold text - `` - Important text - `` - Italic text - `` - Emphasized text - `` - Marked text - `` - Smaller text - `The about page
` (most important) to `` (least important). The block elements so will start on a new line and use the full width of the viewport.
take a look at the code pen below to their default styling. ***Try adding a new heading after heading 6, using your name.***
#### Lists
The two most common types of lists used in HTML are ordered (or numbered) lists or unordered lists. unordered lists are displayed with a bullet point by default.
A `` tag is used to define an unordered list and an `` tag is used to define an ordered list.
items in the list are written within `- ` tags.
***Try adding some new items to lists in the code pen below.***
***What happens if you add a step between 2 and 3 of the ordered list?***
***notice how the list numbering will always be in order.***
There is another list type called a description list, which list of terms, with a description of each term.
The `
` tag defines the description list, the `- ` tag defines the term (name), and the `
- ` tag describes each term, for examples:
```HTML
- Coffee
- - black hot drink
- Milk
- - white cold drink
```
***Try copying the code above into the previous codepen to see the results.***
- ` tag is used to define an unordered list and an `
- ` tags.
***Try adding some new items to lists in the code pen below.***
***What happens if you add a step between 2 and 3 of the ordered list?***
***notice how the list numbering will always be in order.***
There is another list type called a description list, which list of terms, with a description of each term.
The `
- ` tag defines the description list, the `
- ` tag defines the term (name), and the `
- ` tag describes each term, for examples:
```HTML
- Coffee
- - black hot drink
- Milk
- - white cold drink
- ` tag is used to define an ordered list.
items in the list are written within `