Scribd
Upload
51 views3 pages

HTML Basics and Essential Tags Guide

The document provides an overview of HTML concepts, including the use of live server extensions, Emmet abbreviations for boilerplate code, and the structure of HTML elements. It explains the significance of various tags, attributes, and their proper usage, such as the <head> and <body> tags, anchor tags for links, and the distinction between semantic and non-semantic tags. Additionally, it covers form elements, commenting shortcuts, and text formatting options in HTML.

Uploaded by

Swadeep Sachan
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
51 views3 pages

HTML Basics and Essential Tags Guide

The document provides an overview of HTML concepts, including the use of live server extensions, Emmet abbreviations for boilerplate code, and the structure of HTML elements. It explains the significance of various tags, attributes, and their proper usage, such as the <head> and <body> tags, anchor tags for links, and the distinction between semantic and non-semantic tags. Additionally, it covers form elements, commenting shortcuts, and text formatting options in HTML.

Uploaded by

Swadeep Sachan
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

HTML - Apna College

-->live server extension


-->emmet abbreviation: helps to get predefined statements or codes in html like we have in
eclipse for java
-->boiler plate code: basic html code snippet comprising head,body and footer like it's a
basic html code structure and we can achieve it by
typing ! and then select one ! marked code from emmet abbreviation to get boiler plate code
-->Element: tag + content in between the tag
-->short cut for commenting: just select the portion and hit ctrl+/
--><head> tag: whatever we write under this is not supposed to be shown on the webpage as
part of the content whereas we write the code
under <body> tag which is not supposed to be shown on the webpage
--><meta name="viewport" content="width=device-width, initial-scale=1.0"> in the html
code defines responsiveness behaviour
-->attributes example: <html lang="en"> in which lang is the attributes
--><br /> os used for next line
-->attribute value can be written can be written using both "" or '' but preferable is double
quot as it comes by default
-->don't use heading tag for size as it is basically used for representing importance of the text
and also it can also lead to confusion for the
browser as browser considers heading tag for importance
-->In VS code, if we want to wrap text of our vs code then select the portion and go to
settings and search for "toggle word wrap" to wrap it
-->Anchor tag is used to generate the link for example <a
href="[Link] and also it is used to call any other file
written in our vs code for example <a href="/[Link]">Call Hello</a>
->NOTE:remember to put /(file path) before file name while calling any other file of our vs
code
->links are of 2 types:
[Link] link: for external link, example <a href="[Link]
[Link] link: for internal link - used for calling our vs code file, example <a
href="/[Link]">Call Hello</a>
--><big> and <small> tag : for text
--><hr />: horizontal ruler - used for putting horizontal line between text like it seems to
divide the portions
-->empty tags - doesn't require any further text example <br />, <hr /> etc
-->subscript tag - <sub></sub> and superscript tag - <sup></sup>
--><pre></pre> tag is used when we want to show our text as it is on the webpage as
browser doesn't take any spaces what we write in vs code or other IDE.
--> We have two types of tags mainly:
1. Semantic tag: header, footer etc like by their names only things becomes clear.
2. Non-semantic tag: div, span etc
--> <aside> tag: is used when we don't want browser to read it for example adds.
--> In below using target="_main" the link opens in new tab.

<a href="[Link] target="_main">Google</a>

--> In above instead of Google which if we write <img src="link"></img> then image will
become clickable.
--> We have container elements:
1. Block elements: Takes full width eg <div>
2. Inline elements: Takes as per the content eg <span>

--> In HTML forms if we use <label> tag then along with the circle of radio button the text
also becomes clickable.
eg.

<label for="101">
<input type="radio" value="Class VI" name="class" id="101">Class VI
</label>

here that last Class VI text also becomes clickable

You might also like