Let's start with learning -
What is HTML?
HTML stands for Hyper Text Markup Language and is the code that is used to structure a web page and its content. HTML is a markup language that defines the structure of your content. It consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way.
HTML is the most basic building block of the Web. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (CSS) or functionality/behavior (JavaScript).
Boilerplate code for HTML
You can generate all of the boilerplate code in VS Code by typing an exclamation mark ! in an HTML file and pressing Tab or Enter.
DOCTYPE
<!DOCTYPE html>
The HTML document type declaration or Doctype is an instruction used by web browsers to fetch what version of HTML the website is written in. It helps browsers in understanding how the document should be interpreted thus easing the rendering process. It is neither an element nor a tag.
ELEMENTS
<p>My name is Akriti</p>
The main parts of our element are as follows:
The opening tag: This consists of the name of the element (in this case, p), wrapped in opening and closing angle brackets. This states where the element begins or starts to take effect — in this case where the paragraph begins.
The closing tag: This is the same as the opening tag, except that it includes a forward slash before the element name. This states where the element ends — in this case where the paragraph ends. Failing to add a closing tag is one of the standard beginner errors and can lead to strange results.
The content: This is the content of the element, which in this case, is just text.
The element: The opening tag, the closing tag, and the content together comprise the element.
EMMET
Emmet is one of my favorite built-in features of VS Code. It is also available as an extension in other code editors. Think of Emmet as shorthand. With it, you can easily write a lot of code quickly. It dramatically speeds up your HTML & CSS workflow. Understanding how to use Emmet is literally a superpower.
When you start typing a code you will see Emmet abbreviations in form of a drop down. You just need to click on tab/enter to get your desired code, which makes coders life a lot easier.
EMMET for HTML -
Creating an element by its name: In HTML, as you type in the name of the HTML tag, you will get a suggestion list, select the element that you want to insert from the suggestion list. You can start a tag and you don't need to enter the closing tag for it.
Creating an element by its class name: In HTML, if you want to create an element with a particular class name then first enter the name of the element and . and add the name of the class which you like to give to the element and hit enter. The element will be created with the class name you mentioned.
Creating an element by its id: In HTML, if you want to create an element with a particular id then first enter the name of the element and # and the id which you like to give to the element and hit enter. The element will be created with the id you specified.
CLASSES & ID TOGETHER- We can define both by using the same syntax
Creating Multiple elements: If you want to create multiple elements using Emmet then specify the name of the element and * and specify how many elements of that type you want and hit enter.
Creating nested/Child elements: You can create nested elements by using >and type the outer element name and enter > and enter inner elements and hit enter to get the desired output.
CHILD AND MULTIPLICATION TOGETHER - We can make it more easy and comfortable by using both in one.
Thank you for reading !!