One a-tag before `article`, three in generated site - causing styling to mess up

Hi there
I’m sorta struggling right now. I’m trying to create a section, which represents the “latest” blog post. This has worked so far, however, when adding an a-tag enclosing the article-tag to link to the post, something’s really messing everything up.

In the following, you can see my code I’ve written so far.

{{- range first 1 .Pages -}}
    <a href="{{.RelPermalink}}">
        <article class="group cursor-pointer">
            <div class="flex h-96">
              <figure class="image flex-none mt-1 w-full aspect-video overflow-hidden rounded-3xl">
                <img class="object-cover group-hover:scale-105 transition duration-500 w-full h-full" src="{{ .Params.Image }}" alt="">
              <div class="inner pl-10 pt-1">
                <small>{{ .Date | time.Format ":date_long" }}</small>
                <h1 class="title text-3xl font-bold group-hover:underline">{{ .Title }}</h1>
                <p class="lead">{{ .Summary }}</p>
                <div class="flex flex-wrap content-start">
                  {{ range $name := .Params.tags }}
                    {{ with $.Site.GetPage (printf "/tags/%s" $name) }}
                      <a class="tag" href="{{ .RelPermalink }}">{{ $name }}</a>
                    {{ end }}
                  {{ end }}
{{- end -}}

When running the site either with hugo server -w or the compiled site and started it within an nginx docker-container, the finished site looks like the following in the dev-tools:

I would expect, that the a-tag is only encasing the article tag, as written in the code, which in the dev-tools is clearly not the case. If it wouldn’t mess up my styling, I probably would’nt have noticed it.

I have checked my code and there is nothing else injecting the extra a-tags.

I have cleared my cache multiple times and checked the site in multiple browsers (Firefox, (Brave), Chromium).

When removing the a-tag from the code the problem disappears.

Does anyone have an idea, what is causing this mess?
I’d appreciate any help I can get.

You have a nested a tag inside. Thats not allowed.
Maybe the browser gets confused…

Havent typed in your code, but i guess will complain.

See: HTML Standard

Or <a>: The Anchor element - HTML: HyperText Markup Language | MDN

Oh god, I kinda feel dumb now. :man_facepalming:
Haven’t noticed the nested tag. But the validator really showed me my mistake.

Thank you very much. :slight_smile:

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.