Each HTML element has a default display value, based on type of element.
There are two display values:
- Block
- Inline.
Inline-level elements:
- Only take up as much width as necessary.
- Do not create a new block formatting context.
- Do not start on a new line and do not push down any elements that come after it.
- Do not have a height, width, and padding properties.
- Can contain only other inline elements and text.
- Examples of inline-level elements include: <a>, <img>, <span>, <em>, <strong>, <br>, <button>, <input>, <label>, <select>, <textarea>.
Below is the table summarise what each of those element does.
| Inline-level tags | Description |
| <a> | Defines a hyperlink. |
| <img> | Defines an image. |
| <span> | Defines a small section of text. |
| <em> | Defines emphasized text. |
| <strong> | Defines important text. |
| <br> | Inserts a line break. |
| <button> | Defines a clickable button. |
| <input> | Defines an input control. |
| <label> | Defines a label for an input element. |
| <select> | Defines a drop-down list. |
| <option> | Defines an option in a drop-down list. |
| <textarea> | Defines a multiline input control. |
Note: some tags may behave differently based on the context.
.<span> tag is an inline-level element that is used to group elements for styling purposes, and it doesn’t provide any semantic meaning to the content it contains.
Block-level elements:
- Take up the full width of their parent container.
- Create a new block formatting context.
- Start with new line and goes down any elements that come after it.
- Have a height, width and padding properties.
- Can also contain other block and inline elements.
- Examples of block-level elements include: <div>, <h1>, <p>, <ul>, <ol>, <form>, <table>, <header>, <footer>, <main>.
| Block-level tags | Description |
| <div> | Defines a section of the document and can be used as a container for other elements. |
| <h1> – <h6> | Defines headings. <h1> is the most important heading and <h6> is the least important. |
| <p> | Defines a paragraph. |
| <ul> | Defines an unordered list. |
| <ol> | Defines an ordered list. |
| <li> | Defines a list item. |
| <dl> | Defines a description list. |
| <dt> | Defines a term in a description list. |
| <dd> | Defines a description of a term in a description list. |
| <form> | Defines a form for user input. |
| <table> | Defines a table. |
| <header> | Defines a header section. |
| <footer> | Defines a footer section. |
| <main> | Defines the main content of a document. |