Scribd
Upload
6 views2 pages

Emmet and HTML Basics for Developers

The document covers Day 6 of Full Stack Web Development, focusing on Emmet, a toolkit for faster HTML and CSS coding through shorthand notations. It explains the use of the <div> tag for grouping elements, the differences between block and inline elements, and the structure of ordered and unordered lists. Additionally, it discusses variations of the <a> anchor tag for creating hyperlinks and navigation within web pages.

Uploaded by

bhattrohit2636
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
6 views2 pages

Emmet and HTML Basics for Developers

The document covers Day 6 of Full Stack Web Development, focusing on Emmet, a toolkit for faster HTML and CSS coding through shorthand notations. It explains the use of the <div> tag for grouping elements, the differences between block and inline elements, and the structure of ordered and unordered lists. Additionally, it discusses variations of the <a> anchor tag for creating hyperlinks and navigation within web pages.

Uploaded by

bhattrohit2636
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

Day 6 – Full Stack Web Development

Emmet
Emmet is a powerful toolkit that helps developers write HTML and CSS code much faster. It allows
writing shorthand notations that expand into full code. For example: typing h1 gives <h1></h1>, and
ul>li*3 expands into a list with 3 items.

Experimentation with Emmet


With Emmet, we can also create complex structures quickly. Example:
[Link]>h1{Hello}+p{Welcome} expands to a <div> element with a heading and a
paragraph inside.

Elements Grouping
Emmet allows grouping of elements using parentheses ( ). Example: (ul>li*2)+(p{Footer}) creates
an unordered list with 2 list items, followed by a paragraph.

The <div> Tag


The <div> tag is a block-level container used to group elements together. It has no semantic
meaning but is very useful for structuring layouts and applying CSS styles. Example: A <div> with
background color and padding can hold headings, paragraphs, and other tags.

Block vs Inline Elements


Block Elements always start on a new line and take up the full width. Examples: <div>, <p>, <h1>.
Inline Elements stay in the same line and only take as much width as the content. Examples:
<span>, <a>, <b>.

Lists & Nested Lists


HTML provides ordered (<ol>) and unordered (<ul>) lists. Ordered lists use numbers, while
unordered lists use bullets. Nested lists mean placing a list inside another list, useful for
representing hierarchies such as 'Frontend → HTML, CSS'.

Anchor Tag Variations


The <a> (anchor) tag is used for hyperlinks. - Normal Link: <a
href="[Link] - Open in New Tab: Add target="_blank". - Internal Page
Links: Example, <a href="[Link]">About</a>. - Bookmarks: Allow navigation to sections within
the same page, e.g., <a href="#section1">Go to Section 1</a>.

Revision
✔ Emmet = shortcut for faster coding. ✔ Elements can be grouped with parentheses. ✔ <div>
groups and styles content. ✔ Block vs Inline = layout differences. ✔ Lists can be ordered,
unordered, or nested. ✔ Anchor tag has multiple variations for links.

You might also like