3
\$\begingroup\$

Which one of these web components is designed better?

Option 1 contains an a tag within the custom element.

  <bootstrap-social service="github" size="lg">
    <a href="http://github.com/reggi">Sign in with Github</a>
  </bootstrap-social>

Option 2 the custom element has an href tag and the inner text is within the element.

  <bootstrap-social service="github" size="lg" href="http://github.com/reggi">
    Sign in with Github
  </bootstrap-social>
Improve this question
\$\endgroup\$
1
  • 3
    \$\begingroup\$ I suspect the first would be preferable for graceful degradation... \$\endgroup\$
    – Schism
    Aug 8 '14 at 2:05
1
\$\begingroup\$

Since the only difference between the two examples is the href attribute we see in DevDocs that:

Elements in HTML have attributes; these are additional values that configure the elements or adjust their behavior in various ways to meet the criteria the users want.

In the documentation, the only elements that receive the href attribute are: <a>, <area>, <base> and <link>. Although href works with any other element, I believe that, when it comes to semantics, Option 1 is the most suitable.

Sources:

Improve this answer
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.