Advanced Front End Preparation Guide

Table of Content

• HTML
  • Semantic HTML
    Q1. What are Semantic Elements?
    Q2. Examples of Some Semantic Elements.
    Q3. Why Should We Use Semantic Tags Instead of Generic Tags?
    Q4. How Semantic HTML Helps in SEO?
    Q5. How Semantic HTML Helps in Accessibility?
  • HTML Sanitization
    Q6. What is HTML Sanitization?
    Q7. Types of HTML Sanitization
    Q8. Name Some Libraries for Clients Side Sanitization
  • HTML5 Latest Tag
    Q9. What is HTML5?
    Q10. New Features of HTML5?
    Q11. Latest Tags of HTML5?
• CSS
  • Flexbox
  • Grid
  • SCSS
  • Naming Convention
    • BEM
    • ABEM
  • Folder Structure
    • ITCSS
  • Modular CSS
  • Object Oriented CSS
• Web Accessibility
• W3C Validation
• JavaScript
  • How JavaScript Work
  • Context API
  • Event Loop
  • DOM Manipulation
  • Asynchronous JavaScript
    • Callback
    • Promise
    • Async and Await
  • Webpack
• Testing
  • Unit Testing
    • JEST
    • React Testing Library
  • Integration Testing
    • JEST
    • React Testing Library
  • E2E Testing
    • Puppeteer JS
    • Playwright
• ReactJS
  • How React JS Work
  • How Virtual DOM Actually Work
  • What is ReactJS Fiber
• ReactJS Packages
  • State Management
  • Story Book
  • React Query
  • MaterialUI
• TypeScript
• Data Structure and Algorithm
  • Complexity Analysis
    • Time Complexity
    • Space Complexity
  • Data Structure
    • Linear Data Structure
    • Non-Linear Data Structure
  • Algorithm
    • Searching
    • Sorting
    • Tree
    • Graph
    • Dynamic Programming

HTML

• Semantic HTML

1. What are Semantic Elements?

   A semantic element clearly describes its meaning to both the browser and the developer.
   Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.
   Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content.

   ⬆ Back to Top

2. Examples of Some Semantic Elements.

   <article>
   <aside>
   <details>
   <figcaption>
   <figure>
   <footer>
   <header>
   <main>
   <mark>
   <nav>
   <section>
   <summary>
   <time>
   

   ⬆ Back to Top

3. Why Should We Use Semantic Tags Instead of Generic Tags?

   Semantic tags provide meaning to the content they contain, whereas generic tags do not. This meaning can be interpreted by both humans and machines, which can be helpful in a number of ways. For example, screen readers can use the semantic information in a document to provide a more meaningful experience for blind or visually impaired users. Search engines can also use semantic information to provide more relevant results for users. In general, using semantic tags makes your HTML code more understandable and easier to work with.

   ⬆ Back to Top

4. How Semantic HTML Helps in SEO?

   Semantic HTML refers to syntax that makes the HTML more comprehensible by better defining the different sections and layout of web pages. It makes web pages more informative and adaptable, allowing browsers and search engines to better interpret content

   ⬆ Back to Top

5. How Semantic HTML Helps in Accessibility?

   Semantic HTML gives context to screen readers, which read the contents of a page out loud. With the button example in mind: buttons have more suitable styling by default. a screen reader identifies it as a button.

   ⬆ Back to Top

• HTML Sanitization

6. What is HTML Sanitization?

   HTML sanitization generally refers to removing potentially malicious JavaScript content from raw HTML strings.

   ⬆ Back to Top

7. Types of HTML Sanitization

   There are two different HTML sanitization implementations:

   i) Client-side sanitization: prevents unsafe content from the DOM level
   ii) Server-side sanitization: prevents the storage of malicious HTML content in databases

   We indeed need to use both sanitization layers to prevent XSS vulnerabilities. If your database is affected by malicious XSS payloads, the client-side sanitization layer will protect all application users, but if an attacker sends malicious HTML directly from the RESTful API, server-side sanitization will protect the system.

   ⬆ Back to Top

8. Name Some Libraries for Clients Side Sanitization

   Web developers tend to use the following libraries for client-side/DOM-level sanitization:

   i) DOMPurity: HTML sanitizer library for JavaScript, that also works on server-side Node.js via the jsdom package

   ii) js-xss: An HTML sanitizer library that works on browser, server-side Node.js, and as a command-line tool

   iii) sanitize-html: An htmlparser2-based sanitizer library for Node.js and browser that’s very popular among React developers because there is a wrapper library especially for React

   These libraries typically parse unsafe HTML using either the browser’s inbuilt DOM iterator, or a custom HTML parser that excludes unsafe HTML content before using innerHTML.

   ⬆ Back to Top

9. What is HTML5?

   HTML5 is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and final major HTML version that is a World Wide Web Consortium (W3C) recommendation. The current specification is known as the HTML Living Standard.

   It is maintained by the Web Hypertext Application Technology Working Group (WHATWG), a consortium of the major browser vendors (Apple, Google, Mozilla, and Microsoft). It was initially released on 22 January 2008.

   ⬆ Back to Top

10. New Features of HTML5?

    HTML5 introduces a number of new elements and attributes that can help you in building modern websites. Here is a set of some of the most prominent features introduced in HTML5

    1. New Semantic Elements − These are like <header>, <footer>, and <section>.

    2. Forms 2.0 − Improvements to HTML web forms where new attributes have been introduced for <input> tag.

    3. Persistent Local Storage − To achieve without resorting to third-party plugins.

    4. WebSocket − A next-generation bidirectional communication technology for web applications.

    5. Server-Sent Events − HTML5 introduces events which flow from web server to the web browsers and they are called Server-Sent Events (SSE).

    6. Canvas − This supports a two-dimensional drawing surface that you can program with JavaScript.

    7. Audio & Video − You can embed audio or video on your webpages without resorting to third-party plugins.

    8. Geolocation − Now visitors can choose to share their physical location with your web application.

    9. Microdata − This lets you create your own vocabularies beyond HTML5 and extend your web pages with custom semantics.

    10. Drag and drop − Drag and drop the items from one location to another location on the same webpage.

    ⬆ Back to Top

11. Latest Tags of HTML5?

    The following tags (elements) have been introduced in HTML5 :

    1. <article> - Represents an independent piece of content of a document, such as a blog or newspaper
    2. <aside> - Represents a piece of content that is only slightly related to the rest of the page
    3. <audio> - Defines an audio file.
    4. <canvas> - This is used for rendering dynamic bitmap graphics on the fly, such as graphs or games.
    5. <command> - Represents a command the user can invoke.
    6. <datalist> - Together with the a new list attribute for input can be used to make comboboxes.
    7. <details> - Represents additional information or controls which the user can obtain on demand.
    8. <embed> - Defines external interactive content or plugin.
    9. <figure> - Represents a piece of self-contained flow content, typically referenced as a single unit from the main flow of the document.
    10. <footer> - Represents a footer for a section and can contain information about the author, copyright information, et cetera.
    11. <header> - Represents a group of introductory or navigational aids.
    12. <hgroup> - Represents the header of a section.
    13. <keygen> - Represents control for key pair generation.
    14. <mark> - Represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.
    15. <meter> - Represents a measurement, such as disk usage.
    16. <nav> - Represents a section of the document intended for navigation.
    17. <output> - Represents some type of output, such as from a calculation done through scripting.
    18. <progress>- Represents a completion of a task, such as downloading or when performing a series of expensive operations.
    19. <ruby> - Together with <rt> and <rp> allow for marking up ruby annotations.
    20. <section> - Represents a generic document or application section
    21. <time> - Represents a date and/or time.
    22. <video> - Defines a video file.
    23. <wbr> - Represents a line break opportunity.

    ⬆ Back to Top