Shiv's blog
Speed Up Your Coding with Emmet in VSCode and Mastering HTML Elements

Speed Up Your Coding with Emmet in VSCode and Mastering HTML Elements

Shiv Shekhawat's photo
Shiv Shekhawat
·

4 min read

In this blog post, we will explore how to use Emmet in Visual Studio Code (VSCode) to speed up your coding process. We will also dive into various HTML elements, such as <div> tags, inline vs. block elements, lists, and anchor tags. Finally, we will discuss how to style lists without using CSS. Let's get started!

1. Using Emmet in VSCode to Make Your Coding Fast

Emmet is a powerful plugin available in VSCode that helps you write HTML and CSS code faster by using abbreviations. It's like a shorthand for writing code, which can save you a lot of time.

To use Emmet in VSCode, simply start typing an abbreviation and press Tab to expand it. Here are some examples:

  • Type ! and press Tab to generate a basic HTML boilerplate.

  • Type ul>li*5 and press Tab to create an unordered list with five list items.

For a comprehensive list of Emmet abbreviations, check out the official documentation.

2. The <div> Tag and How to Use It

The <div> tag is a generic container for other HTML elements. It is a block-level element, meaning it takes up the full width of its parent container and starts on a new line. You can use <div> tags to group elements together and apply styles or attributes to them.

Example:

<div>
  <h1>Welcome to My Website</h1>
  <p>This is a paragraph inside a div.</p>
</div>

3. Difference Between Inline vs. Block Elements

HTML elements can be categorized into two types: inline and block.

  • Inline elements do not start on a new line and only take up as much width as necessary. Examples include <span>, <a>, and <img>.

  • Block elements start on a new line and take up the full width of their parent container. Examples include <div>, <p>, and <h1>.

4. Various Use Cases of Lists in HTML

Lists are essential for organizing and presenting information in a structured format. HTML provides three types of lists:

  1. Unordered lists (<ul>): Used for listing items without any specific order. Each list item is marked with a bullet point.

  2. Ordered lists (<ol>): Used for listing items in a specific order. Each list item is marked with a number.

  3. Description lists (<dl>): Used for listing terms and their descriptions.

Example:

<!-- Unordered list -->
<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Oranges</li>
</ul>

<!-- Ordered list -->
<ol>
  <li>First step</li>
  <li>Second step</li>
  <li>Third step</li>
</ol>

<!-- Description list -->
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

5. Various Use Cases of the Anchor Tag

The anchor tag (<a>) is used to create hyperlinks in HTML. It can link to other web pages, files, email addresses, or specific sections within a page.

Examples:

  • Link to a web page: <a href="example.com">Visit Example.com</a>

  • Link to a file: <a href="document.pdf">Download PDF</a>

  • Link to an email address: <a href="">Email Us</a>

  • Link to a section within a page: <a href="#section-id">Jump to Section</a>

6. How to Remove Bullet Type Style from <ul>

To remove the bullet style from an unordered list, you can use the type attribute with the value none. However, this method is not recommended as it is deprecated in HTML5. The preferred way is to use CSS.

Example (not recommended):

<ul type="none">
  <li>Apples</li>
  <li>Bananas</li>
  <li>Oranges</li>
</ul>

7. How to Display List Items Side by Side Rather Than Vertically

To display list items side by side without using CSS, you can use a table. However, this method is not recommended as it is not semantically correct. The preferred way is to use CSS.

Example (not recommended):

<table>
  <tr>
    <td><ul><li>Apples</li></ul></td>
    <td><ul><li>Bananas</li></ul></td>
    <td><ul><li>Oranges</li></ul></td>
  </tr>
</table>

Now that you've learned about Emmet in VSCode and various HTML elements, it's time to put your knowledge to the test! Answer the following questions in the comments section:

  1. What is the purpose of the <div> tag in HTML?

  2. What is the difference between inline and block elements?

  3. How can you create a hyperlink using the anchor tag?

  4. What is the recommended way to remove bullet style from an unordered list and display list items side by side?

Happy coding!

Web DevelopmentBeginner DevelopersWeMakeDevsBlogsWithCCHTML5