-1
<div class="off-canvas-wrap" data-offcanvas>
  <div class="inner-wrap home">
    <nav class="header row">

    </nav>
    <!-- Off Canvas Menu -->
    <aside class="right-off-canvas-menu">
      <!-- close the off-canvas menu -->
      <!-- whatever you want goes here -->
      <div class="close">

In the first line, I can understand after div the class. Then, data-offcanvas. What is this? I noticed this while viewing the "view source page" of a web page.

Please help me to understand above html code.

Ivar
  • 6,138
  • 12
  • 49
  • 61
Anuraa
  • 1
  • 2
  • To add to the comment above, some people use it as a hook to then retrieve the tag in javascript: `document.querySelectorAll("[data-offcanvas]")[0]`, they do this so you can tell what elements will be modified by javascript just by looking at the HTML – Jonas Grumann Nov 07 '22 at 12:56

1 Answers1

0

data-offcanvas is a non standard or custom attribute which in this case appears to have no value.

You can read more in this here: https://www.w3schools.com/tags/att_data-.asp

Ted
  • 3,985
  • 1
  • 20
  • 33
  • 1
    "_in this case appears to have no value_" - The attribute itself _is_ the value. It's a [boolean attribute](https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#boolean-attributes). – Ivar Nov 07 '22 at 12:55
  • @Ivar - That's why I wrote "appears" to have no value. The OP is new to this game and I didn't want to confuse them. Baby steps... – Ted Nov 07 '22 at 12:57