Search code examples
htmlsemantic-ui

Is using <article> inside <form> semantically fine?


Like the below html.
I want to use article as its main content of the form.
I've already used a main element on the outside of the form element by the way.

<form>
  <header>
    <button type="submit">Save</button>
    <button type="submit">Close</button>
  </header>
  <article>
    <fieldset>
      <legend></legend>
      <input />
      <input />
      <input />
    </fieldset>
    <fieldset>
      <legend></legend>
      <input />
      <input />
    </fieldset>
  </article>
</form>

Solution

  • Yes

    A semantic tag is simply an element that defines itself semanticly to the developer. Using an <article> tag is no different than using a block level element such as a <div> tag except it is semantically sound.

    The tag specifies independent, self-contained content.

    What are Semantic Elements?

    A semantic element clearly describes its meaning to both the browser and the developer.

    Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.

    Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content.

    ASP.NET

    In the case of asp.net web forms if the tag was not allowed then it couldn't be used at all as the entire structure must be encased in a <form> tag.

    W3 Schools Documentation

    https://www.w3schools.com/html/html5_semantic_elements.asp

    https://www.w3schools.com/tags/tag_article.asp