I want to use the 'scoped tabs' component in a demo community on the Napili template. Example of 'scoped tabs' from LDS (Lightning Design System) at https://www.lightningdesignsystem.com/components/tabs/#scoped 

I will be hand-coding the markup. The HTML markup seems easy enought. But I see in the description on the web page, it has some 'javascript needs' to move the .slds-active class and toggle the .slds-hide/.slds-show classes.

Does that mean it requires me to write custom javascript? 

I'm going thru the Lightning Design System trailhead, and on part 5 it ocurred to me, why is there the pattern of putting classes in enlcosing span tags vs adding the class to the element? Does this have something to do with LDS? An example in the trailhead of an img enclosed by a span with classes in the span is:

<span class="slds-avatar slds-avatar--large">
      <img src="{!URLFOR($Resource.REPLACE_WITH_NAME_OF_SLDS_STATIC_RESOURCE, 'assets/images/avatar1.jpg')}" alt="portrait" />
</span>

What's the reasoning of the ablove pattern vs putting the classes on the img tag like so:

<img class="slds-avatar slds-avatar--large" src="{!URLFOR($Resource.REPLACE_WITH_NAME_OF_SLDS_STATIC_RESOURCE, 'assets/images/avatar1.jpg')}" alt="portrait" />

 

I want to use the 'scoped tabs' component in a demo community on the Napili template. Example of 'scoped tabs' from LDS (Lightning Design System) at https://www.lightningdesignsystem.com/components/tabs/#scoped 

I will be hand-coding the markup. The HTML markup seems easy enought. But I see in the description on the web page, it has some 'javascript needs' to move the .slds-active class and toggle the .slds-hide/.slds-show classes.

Does that mean it requires me to write custom javascript? 

I'm going thru the Lightning Design System trailhead, and on part 5 it ocurred to me, why is there the pattern of putting classes in enlcosing span tags vs adding the class to the element? Does this have something to do with LDS? An example in the trailhead of an img enclosed by a span with classes in the span is:

<span class="slds-avatar slds-avatar--large">
      <img src="{!URLFOR($Resource.REPLACE_WITH_NAME_OF_SLDS_STATIC_RESOURCE, 'assets/images/avatar1.jpg')}" alt="portrait" />
</span>

What's the reasoning of the ablove pattern vs putting the classes on the img tag like so:

<img class="slds-avatar slds-avatar--large" src="{!URLFOR($Resource.REPLACE_WITH_NAME_OF_SLDS_STATIC_RESOURCE, 'assets/images/avatar1.jpg')}" alt="portrait" />

 

I'm not a native english speaker but the wording on the challenge for ISVs, Packaging and AppExchange seem wrong to me. None of the features are available in the Lightning Experience and the None of the above answer is rated as correct. However the question has a NOT in it so the answer then becomes: None of the above are not available.... See attached screenshot