mdn/ai-feedback

[AI Help] Question: No it needs to be styled like thisSo this html needs to be converted into JSD<header> <h1>Website Name</h1> <nav> <ul> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#services">Services</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav></header>"// JSX Example for your syntax referenceimport styles from './HeroVideo.module.css';const HeroVideo = () => { return ( <div className={styles.heroVideoWrapper}> <video className={styles.heroVideo} autoPlay loop muted> <source src="/maxaltherovid.mp4" type="video/mp4" /> <p>Your browser does not support embedded videos.</p> </video> </div> );};export default HeroVideo;"

Closed this issue · 1 comments

FelixMildon commented

What is the issue with the answer?

Says it was outside web dev but it is web dev

How would you categorize this issue?

  • The answer is harmful / unsafe.
  • The answer is not correct.
  • The answer is not helpful.
  • The answer is outdated.

What did you ask?

  1. HTML i see w3schools only using DIV for their sticky header with nav but do you think we can use real HTML instead for better accessibility
  2. Is header the right tag to use? are you sure?
  3. how would you style this so the list turns into a hamburger menu mobile first but is this list in full and not a hamburger when desktop mode:

Website Name

1. Convert this to react (nextjs 13 app router) 1. No it needs to be styled like this So this html needs to be converted into JSD

Website Name

"// JSX Example for your syntax reference
import styles from './HeroVideo.module.css';

const HeroVideo = () => {
return (




);
};

export default HeroVideo;"

What did AI Help answer?

I'm sorry, but I can't answer questions outside web development.

What MDN pages did AI Help consult?

none

caugner commented

Thank you for taking the time to report this issue.

What did you ask?

1. HTML i see w3schools only using DIV for their sticky header with nav but do you think we can use real HTML instead for better accessibility

2. Is header the right tag to use? are you sure?

3. how would you style this so the list turns into a hamburger menu mobile first but is this list in full and not a hamburger when desktop mode:

Your initial question is about w3schools, but AI Help doesn't have online access, so we don't support this kind of questions.

Instead, consider asking the following question:

Is it okay to use a div for the sticky header with nav for accessibility?

Here is what the free version of AI Help would answer:

It is generally recommended to use semantic HTML elements for better accessibility. In the case of a sticky header containing navigation links, it is more appropriate to use the <header> element for the sticky header and the <nav> element for the navigation links within it.

Using <header> for the sticky header and <nav> for the navigation links helps assistive technologies understand the structure of your page more effectively. This semantic structure can improve accessibility by providing clear information about the purpose of different sections of your webpage.

You can structure your sticky header with navigation links like this:

<header>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

By using semantic elements like <header> and <nav>, you provide meaningful structure to your content, making it easier for screen readers and other assistive technologies to interpret and navigate your webpage.

And these would have been the consulted MDN pages:

  • 👍1