h1 标签中带有链接和跨度的两行

Question

I have a shopify store, in the first line of my title of the product, I have an internal link to the vendor page, in the second line there is the product title.
I read it's valid to put two lines with <br/> in an <h1> heading (in order not to use two h1 headings), but I want to combine it with an <a> link (1st line) and a <span> (2nd line) for different styling. Is it valid what I'm doing, also in terms of SEO? Thank you for helping!!

<h1><a class="product-vendor-hyperlink" href="/collections/{{product.vendor | handleize}}">{{ product.vendor }}</a><br/><span class="product-single__title" itemprop="name">{{ product.title }}</span></h1>

Answer 1

It is valid, but not needed. Instead you can get rid of the br entirely. Set one or both of your child nodes to display:block

 .product-vendor-hyperlink{display:block;}

 <h1><a class="product-vendor-hyperlink" href="/collections/{{product.vendor | handleize}}">{{ product.vendor }}</a><span class="product-single__title" itemprop="name">{{ product.title }}</span></h1>

Another option is to consider the use of the <header> tag if you want to give full h1 weight to the product title but still keep the vendor link associated with being in the header. You can use this at the page level or use sections , div etc, but NOT li .

 <header> <a class="product-vendor-hyperlink" href="/collections/{{product.vendor | handleize}}">{{ product.vendor }}</a> <h1 class="product-single__title" itemprop="name">{{ product.title }}</h1> </header>

Answer 2

Its valid, but its really bad in terms of SEO, use the heading hierarchy and semantic HTML5 tags instead, check the two resources below:

Semantic tags

Heading Hierarchy