Question: As the [HTML5 spec](https://www.w3.org/TR/html52/textlevel-semantics.html#example-e6ee3b01) states

> 
> The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g., buttons or other links).
> 
> 
> 

With this in mind, I have a WordPress PHP document starting with the HTML5 doctype (`<!DOCTYPE html>`), and I'm wrapping a `<article>` with a `<a>`, and have set the `<a>` to `display: block`.

My source PHP:

```
<a href="<?php the_permalink(); ?>">
    <article>
        <header>
            Some header content
        </header>
        <footer>
            Some footer content
        </footer>
    </article>
</a>

```

But when I view it in several up-to-date browsers (tested in Chrome, Firefox, and Safari), I get this:

```html
<a href="the-correctly-rendered-url">
</a>
<article>
  <a href="the-correctly-rendered-url"></a>
  <header>
    <a href="the-correctly-rendered-url">
       Some header content
            </a>
  </header>
  <footer>
    Some footer content
  </footer>
</article>
```

The wrapping `<a>` gets moved completely outside of the `<article>`, and duplicated to wrap some elements inside of it.

Are these browsers just not adhering to HTML5 specs? What can be done if the rendered page doesn't seem to follow the given spec?

Answer: 
In this case, some other custom & Wordpress functions were creating additional `<a>` tags, `project_categories_terms_links()` and `edit_post_link()`, inside the `<article>` tag which was causing the odd rendering.

Once I removed those or made them plain text, everything rendered as expected.

Hope this helps anyone coming across the same issue.
you can try

```
    <article>
      <a href="<?php the_url(); ?>">
         <header>
            Some header content
         </header>
         <footer>
            Some footer content
        </footer>
      </a>
    </article>

```