HTML Elements
Content
The content of an HTML element is all the information between the opening and closing tags of an element
This includes text, video, images as well as gifs, but does not include the tags, the information with the tags together make up an element
Structure
HTML is a family tree structure. HTML elements can have parents, grandparents, siblings, children, grandchildren, etc.
As depicted in the given example, every HTML document has a similar structure, which gives the website that users see its structure.
Attributes
HTML attributes are values added to the opening tag of an element to change or configure the element's default style or behaviour.
In the example, we are giving the <p> (paragraph) element a unique identifier using the id attribute and changing the color of the default text using the style attribute.
Semantic HTML
Non Semantic HTML
Non semantic HTML makes it a bit harder to read your code, as well as makes it not so accessible
It can be a disadvantage to any other developers reading your code, as they might spend some time getting familiar with your code.
Although using non semantic HTML is not illegal, it is advised to try to use semantic HTML where you can to help not only with readability but accessability, as well as SEO.
Semantic HTML
Semantic HTML introduces meaning in to the code we write, as well as makes the website accessible, so software such as screen readers are capable of identifying parts of the html document
Semantic HTML also helps make your code more readable so that you, as well as other developers reading your code do have an easier time.