The Inline Element:
An inline element does not start on a new line. An inline element only takes up as much width as
necessary.
Example:
- a
- br
- big
- img
- sub
The Block Elements
A block-level element always starts on a new line.A block-level element always takes up the full width available (stretches out to the left and right as far as it can).A block level element has a top and a bottom margin, whereas an inline element does not.
Example:
- p
- div
- dt
- ol
- table
The Inline-Block Element
The inline and block element also behave like a liline or a block Element
Example:
- div
- p
- form
- main
- article
Semantic Tag
In programming, Semantics refers to the meaning of a piece of code — for example "what effect does running that line of JavaScript have?", or "what purpose or role does that HTML element have" (rather than "what does it look like?".)
Semantic in Javascript
In JavaScript, consider a function that takes a string parameter, and returns an "li" element with that string as its textContent. Would you need to look at the code to understand what the function did if it was called build('Peach'), or createLiWithContent('Peach')?
Semantic in HTML
In HTML, for example, the "h1" element is a semantic element, which gives the text it wraps around the role (or meaning) of "a top level heading on your page."
Semantic in CSS
In CSS, consider styling a list with li elements representing different types of fruits. Would you know what part of the DOM is being selected with div > ul > li, or .fruits__item?
Example:
- header
- nav
- section
- article
- footer