Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Generated HTML markup for Option Groups is invalid #740

Closed
SteveTheTechie opened this issue Feb 2, 2018 · 5 comments
Closed

Generated HTML markup for Option Groups is invalid #740

SteveTheTechie opened this issue Feb 2, 2018 · 5 comments

Comments

@SteveTheTechie
Copy link
Contributor

SteveTheTechie commented Feb 2, 2018 •
edited
Loading

Reference https://validator.w3.org/#validate_by_input

The following models the way that anchor tags are used in the generated markup for option groups. However, this markup is flagged as invalid HTML by the HTML validator. (I suspected it would be.)

<!DOCTYPE HTML SYSTEM>
<html>
<head>
<title>tester</title>
</head>
<body>
<ul>
<a href="https://www.google.com/">test</a>
<li>test2</li>
</ul>
</body>
</html>

If the anchor can somehow be wrapped in a <li>, it is then valid... e.g. the following validates fine:

<!DOCTYPE HTML SYSTEM>
<html>
<head>
<title>tester</title>
</head>
<body>
<ul>
<li><a href="https://www.google.com/">test</a></li>
<li>test2</li>
</ul>
</body>
</html>
@mlh758
Copy link
Collaborator

mlh758 commented Feb 2, 2018

Yup, only permitted content is <li>
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul

@mlh758
Copy link
Collaborator

mlh758 commented Feb 2, 2018

Probably need a class for the option group ul and a first child selector to modify that first element.

@mlh758
Copy link
Collaborator

mlh758 commented Feb 2, 2018

I'll work on a fix for this today.

mlh758 pushed a commit that referenced this issue Feb 2, 2018
Fix #740 Group label inside an li tag
bb7e512
@SteveTheTechie
Copy link
Contributor Author

SteveTheTechie commented Feb 2, 2018 •
edited
Loading

I looked at your commit... You may want to take a look at the following:
https://stackoverflow.com/questions/5899337/proper-way-to-make-html-nested-list
https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Nesting_lists

For a nested list, it should be like... the group label is in the parent li's:

<ul>
<li><a>group label 1</a>
     <ul>
          <li>group item 1.1</li>
          <li>group item 1.2</li>
     </ul>
</li>
<li><a>group label 2</a>
     <ul>
          <li>group item 2.1</li>
          <li>group item 2.2</li>
     </ul>
</li>
</ul>

mlh758 pushed a commit that referenced this issue Feb 3, 2018
@mlh758
Fix #740 Group label inside an li tag
4b79232
mlh758 pushed a commit that referenced this issue Feb 3, 2018
@mlh758
Fix #740 Group label inside an li tag
44624c0
mlh758 pushed a commit that referenced this issue Feb 4, 2018
@mlh758
Fix #740 Group label inside an li tag
27e3775
@mlh758
Copy link
Collaborator

mlh758 commented Feb 4, 2018

PR for this is merged.

@mlh758 mlh758 closed this as completed Feb 4, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@mlh758 @SteveTheTechie