HTML Elements

Welcome to the HTML cheatsheet

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

example

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.

example-2

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.

example-2

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.

image

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.

semantic_html