Concepts and Terms in HTML and CSS

Semantic and Non-Semantic Tags

  • Semantic Tags are the tags that have a meaning in themselves and tell us about the content inside the tags. E.g form, header tags

  • Non-Semantic Tags are the tags that do not tell about the content written inside them. E.g div, span tags

It's important to use semantic tags wherever possible to make people understand the website better who uses screen readers for using the website.

Tag vs. Element The tag doesn't include the contents written b/w tags. Element means the starting and closing tags including the content written between them

// Tag 
<button>

//Element
<button>Submit</button>

Types of Elements

  • BLOCK ELEMENT -> It uses the entire row i.e it stretches from the extreme left end of the screen to the right one. For this reason itself, it always starts from a new line. Mainly it has some top and bottom margins. E.g div, p tags.

  • INLINE ELEMENT ->An inline element does not start on a new line and takes up as much width as necessary. It does not have some top and bottom margins too. E.g span, button tag

CSS Selectors

In simple words, CSS Selectors means the ways to select HTML elements to put CSS on them. There are various selectors, but mainly there are 3 types of selectors which are as follows:-

  1. ID - a selection made on the basis of ID . E.g In real life the ID can be a roll number. It is unique, right? So does is the ID in HTML. It is represented by #(hash) .

  2. Class - A class can have n number of pupils and so does in HTML, n number of elements can have the same class name. It is represented by a .(dot) .

  3. Tag Name - A CSS can be applied to all the tag names present in a file directly.

E.g
button
{
border:none;
}

It will make the border: none of all the buttons present in the HTML file.

Variables in CSS It's a way to write once and use it everywhere in CSS. E.g

:root
{
--primary-color:red;
}

Now any element that needs color red can use it as :

div
{
color:var(--primary-color);
}
button
{
border-color: var(--primary-color);
}

The major use of variables in CSS is that it reduces the number of conditions that are supposed to be written in code on which a different color pops up.

Did you find this article valuable?

Support Parull Kohhli by becoming a sponsor. Any amount is appreciated!