What is the most efficient way to select element specific to the H1

Let's say I'm stupid, but I really want to know the most efficient way to select this specific element:

<a href="/" title=""><h1>MySite</h1></a>

Code (markup):

Here's what I've got from the internet and it's still not specific to the H1 tag:

a[title] {
    color: red;
}
a[title]:hover {
    color: orange;
    text-decoration: none;
}

Code (markup):

I want this element as a unique one and style it differently.

Thank for your help,

 

No need to do that.

HTML

 <h1>
  <a href="#">MySite</a>
 </h1>

Code (markup):

CSS

h1 a {
    color: red;
 }

h1 a:focus,
h1 a:active, 
h1 a:hover {
    color: orange;
    text-decoration: none;
 }

Code (markup):

coothead

 

Thank you,
That's really help.

 

No problem, you're very welcome.
​

coothead

 

Great answer by @denis bayly

 

Thank you, good answer

 

Something not mentioned -- but should be -- is that prior to HTML 5, your original markup was invalid... for a reason. Whilst there ARE cases where being able to wrap A around anything can be handy, it's NOT good practice to do and SHOULD be avoided where possible. It's one of the many changes in HTML 5 I'm not convinced was a good idea.

It was inline-level for a reason, and you should NOT be trying to wrap block-level tags with inline-level ones. (level having dick-all to do with CSS "display" apart from being the default state.)

 

Thank you,

This answers the other thread that's why back-end developers are inept about the front-end. I read tutorial of a man I think he's among top programmers alive. He put the H1 in the middle of the page where it's standout most.

 

You're not alone. I suspect that I may be stupid as well, but an easy way to grab the h1 would be to use JavaScript. I'm thinking just grab it using document.getElementsByTagName("h1").[0] ...or something like that... and do whatever it is you choose to do with the h1.

Just don't listen to @deathshadow because he doesn't know what he's talking about.

 

Considering he was just trying to style it, I'm not sure why you think grabbing hold of it with scripttardery has anything to do with it...

 

Which as you've seen me post before isn't H1's job -- but again most people have zero huffing clue what H1..H6 even mean, and it's NOT "fonts in different weights and sizes".

Hence why so many sites are walking talking WCAG violations, and can't even manage to pass something as simple as the document outliner in the web developer toolbar

https://chrispederick.com/work/web-developer/

without throwing "missing heading" errors.

Or the folks who think that just because the "level' rules have been softened for <a> means it's been dropped for all inline/phrase-level tags.

<span><div>Something</div></span>

Is still invalid gibberish. Or the folks who omit tags using the HTML 3.2 rules just to make the browser work harder and then wonder why their CSS isn't applying uniformly... or the hundreds of other "eye cans haz intarwebs" screwups that prove most of the "experts" out there are unqualified to write a single damned line of HTML, being experts at little more than peddling propaganda and brown-nosing.

Again, see bootcrap, tailwind, react, vuejs, etc, etc. Stunning examples of "experts" and "big names in the industry" who know but two things, and Jack left town.

 

Just habit... Yet, I'd rather use javaScript in this case because when in dealing with the h1 tag, search engine optimization may be compromised if you add attributes or styles to your h1. It used to be that way; not sure what it's like nowadays. Using JavaScript is a way of making sure something such as SEO isn't affected. So, yeah, that's the easiest way from my POV, but it depends on how heavily you weigh in SEO to your page. Messing with the title or h1 tags is something I stay away from.

I find most of these 'tools' to be more of a hunderance and a redundant pain-in-the-ass than anything else.

 

DAFUQ?!? I have no clue where you got that idea, but it's the exact opposite of reality, why CSS exists, and how HTML/CSS works in ALL user-agents.

Search engines don't have eyeballs, apart from checks for "content cloaking" they could give a flying purple fish how you style your markup. It's part of why if you choose your HTML tags for their default appearance you're "doing it all wrong".

They care about your semantics, what the tags MEAN... an H1 (if HTML 5's idiotic <section> isn't being used) being THE heading that everything on EVERY page of the site is a subsection of. Just as a H2 indicates the start of a major subsection of the current page, the first H2 indicating the start of the main content (if HTML 5's idiotic <main> is not being used.), an H3 means the start of a subsection of the H2 preceeding it, H4 meaning the start of a subsection of the H3 preceding it and so forth. That's why putting a H1 in the middle of the page or starting a page with a H5 is incompetent rubbish! All the HTML tags have meanings separate from their default appearance that should be used to choose them.

These meanings are what search engines have to work with as again, they do not nor ever have cared how you style anything.

Just where exactly did you get that fudge packed?

 

Utter and complete hogwash. You don't don't know the first thing about the Internets.

If only you knew, @deathshadow ...if only you knew what I know, ha ha

 

I honestly can't tell if you're trolling, being sarcastic, or actually believe the rubbish you just spewed... It's very hard to tell when you don't back your claims up or explain how/why a search engine would even LOOK at the attributes or applied styles APART from content cloaking checks.

One of the base techniques for checking on-page SEO is to disable all styling if modern markup, blocking deprecated tags if old markup as that's ALL the search engine gets.

 

Ah, @deathshadow - I'm giving you a hard time for fun :-D

In this case, I'm not trolling, and I *usually don't do so on any forum. 85% of all communication is lost between two subjects when communication is restricted to just text. That's why sarcasm doesn't come through well online. Given that I have divulged almost no information about myself doesn't help, either.

The fact is, I've largely been away for the past 7 years and things have changed. Many things I knew then, I'm not entirely sure will be valid henceforth. I've got catching up to do, so that would explain any perceived anomalies in some cases. Regardless, I'm always right, so you have to listen to me. Just so you know.

But back to the topic. The H1 is almost as sacred as the TITLE tag and shall not be infringed upon in any way. It's best practice for SEO. Sure, CSS works, but since the OP wanted to "grab" the h1, it implied use of JavaScript. Everyone just needs to leave the h1 tag alone. Also, forget about using h3 or higher, as it serves no purpose to anyone. Increasing the font weight would likely be a much better option in something like a div tag, or what-not.

There are certain things that you don't learn in the books when you build your own search engine software. Have I built a search engine? Yes, several of them, but then again do you hear any sarcasm in my voice?


*Off topic forums are fair game where appropriate, however. If I stir the pot, there's never any animosity in it. If there were, I'd make it clear. Void in Guam, and where prohibited by law. Use caution when opening overhead bins, as luggage may have shifted during flight.

 

You may also just be mis-remembering things, because what you said about attributes and style on the H1 is utter and complete gibberish.

There are only a handful of things search engines check for to ignore or alter elements ranking (or page ranking) from your style.

1) display:none;
2) visibility:hidden;
3) color same as the background
4) HTML 5's new "hidden" attribute.

The first three can get you pimp slapped for abuse depending on how much content is in them, the last one is recognized and obeyed without penalty. ALL of them apply to ALL tags, not just H1.

I'd be really interested in hearing where you got this noodle-doodle crazy idea that attributes and style do anything to a H1's rankings from a SEO standpoint... because to be brutally frank you're talking bollocks. class="", id="", lang="", even style="" and current data-whatever="" have ZERO impact on a H1's functionality. Though if you're writing HTML properly under 4 strict rules you would only ever have a single H1, so there's no reason for it to have a class or ID -- but it's not like having one present is going to screw over its search rankings!

"Like my good friend Zoltan Chivay says, if one says you're talking bollocks, they could be right, they could be wrong. But if multiples say you're talking bollocks, you probably are. "

You're going to hate <section> as much as I do. "by the book" if you open up <section> you're back at H1 depth... but because legacy UA's get confused by that and it pisses on logical document structure, people are using <section> and using whatever heading depth is appropriate -- IF they care about logical document structure. Otherwise they just keep crapping them into the markup any-old-way like it was still 1997.

Which is what one can expect when people spend near-on two decades vomiting up HTML 3.2 and sticking 4 tranny atop it. Now they wrap 5 lip-service around the same outdated, outmoded, presentational concepts that piss on the entire reason HTML was created... but because they say <!DOCTYPE html> without a DTD, they get to pat each-other on the backs over how "modern" they are. BARF!

So I take it you've never used screen readers, braille readers, or had to meet WCAG minimums? Again, if you actually believe what you just said and aren't trolling, you don't know a single blasted thing about HTML and could use a quadruple helping of sierra tango foxtrot uniform, followed by a spoon feeding of semantics.

Particularly if you weren't trolling just then saying to crap in a DIV with style instead of a heading, meaning you have no non-visual information.

Didn't you ever learn that HTML is for MORE than just sighted users? MORE than graphical screens or print? That semantics is the only thing screen readers, braille readers, search engines, and other non-visual user-agents have to work with? That using logical heading orders allows for non-visual and other alternative site navigation apart from the derpy "tab around"?

The nonsensical rubbish you're saying is how things like this happen:

https://www.levelaccess.com/federal...essibility-suit-moot-website-made-accessible/

https://www.cnbc.com/2019/10/07/dominos-supreme-court.html

https://www.wsj.com/articles/lawsuits-surge-over-websites-access-for-the-blind-11550415600

Things that could be avoided if people just used semantic markup -- a sick euphemism for "using HTML properly" so as to not upset the derps who cant' extract their cranium from the browser wars rectum -- separation of presentation from content, and progressive enhancement.

That last one in particular meaning to leave the scripttardery in your pants; good JS should enhance and already working page, not supplant it. Hence why most of the scripting out there right now is an INSTANT violation that could get you in trouble under laws like the US' Americans with Disabilities Act (ADA), UK EQA/DDA, Canada's ACA, and dozens of other laws around the globe.

Which is why my day job as an accessibility consultant the past ten years has involved ripping out all these derpy incompetent ignorant halfwitted frameworks made by people not qualified to write a single damned line of HTML, much less layer their "JS for nothing" atop it. Hence why how most people use vuejs or react is nothing more than flipping the bird at accessibility and more than likely to get your arse kicked if anyone REALLY complains to the right lawyer.

Cue the JS for nothing whackjobs who say idiotic bullshit like "no website would ever really get sued for that" even as you link them to dozens if not hundreds of examples.

Now look at them yo-yo's, that's not how you do it
You code the bootcrap with scripttardery
That ain't workin', that's not how you do it
JS for nothin' and your scripts for free.

I want my... I want my... I want my PHP...

 

lmao, I'm the one laughing at jibberish on here, @deathshadow. That's not directed specifically at you, BTW. Yes, you can have your opinion and fill in the blanks with your imagination, as you are entitled to it.

 

Please tell me it's not worse than the blink tag?

 

Well, let's take the actual accessible structural rules of HTML 4 Strict/earlier. Aka the intent of the original HTML / HTML 2 before the browser wars bullshit started pissing on things with people using markup for presentation instead of meaning.

<h1>Site Title</h1>
<ul id="mainMenu">
	<li><a href="#">Home</a></li>
	<li><a href="#">FAQ</a></li>
	<li><a href="#">Forums</a></li>
</ul>

<h2>Main Content Start</h2>
<p>
	This would be your main flow content
</p>

<h3>Subsection Start</h3>
<p>
	This is a subsection of the main Subsection
</p>

<h3>Subsection Start</h3>
<p>
	This is a subsection of the main Subsection
</p>


<h4>Sub-subsection start</h4>
<p>
	A subsection of the subsection (h3) preceding it
</p>

<h2>Secondary content start</h2>
<p>
	A subsection that whilst not the main content is kin to it.
	Sidebar stuff is an example of this. This H2 also marks the
	end of the main content.
</p>

<hr>
<p>
	... and this is your page footer. <strong>HR does not mean
	"draw a line across the screen"</strong>, it means a change in
	topic/section where a numbered heading is unwanted or unwarranted.
	Under 4 Strict/earlier it's heading level, under 5 it's allegedly
	paragraph level though no UA treats it that way yet.
</p>

Code (markup):

If you have a heading navigator -- like the alternative access on a braille reader or screen readers like JAWS -- that gives you a navigable structure like this:

Site Title
	Main Content Start
		Subsection Start
		Subsection Start
			Sub-subsection start
	Secondary content start
	"... and this is your page footer. HR does not..."

Code (markup):

Each of those would behave much like hash-link anchors, but clicking on them navigates you to the first element AFTER the heading. Handy in screen readers and braille -- AND SEARCH -- as it gives clear organizational structure to the document.

You can test this yourself with the "web developer toolbar" under "view document outline"
https://chrispederick.com/work/web-developer/

But of course, damned few people seem to have ever figured that out and just blindly crap headings into pages either because "I want fonts and weights in a certain size", "who gives a shit", or just plain not knowing any better and blindly copying what everyone else does.

Hence why most of the examples for bootcrap go full Gungan starting documents with H5 -- utter and complete gibberish as how can you start the subsection of a H4 without an H4, H3, H2, or H1 preceding it? PROOF the people who made, maintain, and work with bootstrap did not know enough HTML or CSS to be creating such a system.

Meesa says yewz nevah goes FULL Gungan.

So what's that got to do with <section>? It marks sections and subsections of the page -- meaning it's just a pointless redundancy. MOST of the new "structural" tags in HTML 5 are pointless redundancies created by people who were unqualified to create 4 Strict's successor.

That same type of page, written as HTML 5, would -- if written following the WhatWG's rules -- end up something like this. (I'll skip the idiotic ARTICLE tag to keep it simple)

<header>
	<h1>Site Title</h1>
	<nav>
		<ul id="mainMenu">
			<li><a href="#">Home</a></li>
			<li><a href="#">FAQ</a></li>
			<li><a href="#">Forums</a></li>
		</ul>
	</nav>
</header>

<main>
	<section>
	
		<h1>Main Content Start</h1>
		<p>
			This would be your main flow content
		</p>
		
		<section>
			<h1>Subsection Start</h1>
			<p>
				This is a subsection of the main Subsection
			</p>
		</section>
		
		<section>
			<h1>Subsection Start</h1>
			<p>
				This is a subsection of the main Subsection
			</p>
			<section>
				<h1>Sub-subsection start</h1>
				<p>
					A subsection of the subsection (h3) preceding it
				</p>
			</section>
		</section>
		
	</section>
	
</main>
	
<section>
	<h1>Secondary content start</h1>
	<p>
		A subsection that whilst not the main content is kin to it.
		Sidebar stuff is an example of this. This H2 also marks the
		end of the main content.
	</p>
</section>
	

<footer>
	<p>
		... and this is your page footer. <strong>HR does not mean
		"draw a line across the screen"</strong>, it means a change in
		topic/section where a numbered heading is unwanted or unwarranted.
		Under 4 Strict/earlier it's heading level, under 5 it's allegedly
		paragraph level though no UA treats it that way yet.
	</p>
</footer>

Code (markup):

As you can see, you open SECTION you're back to H1 depth, so damned near everything becomes a H1. In THEORY the new HTML 5 tags are supposed to help keep it straight, but even google seems to struggle to maintain the structure. Accessibility UA's sure as the blazes make a right mess of it... which is why a hybrid where you keep the heading depths ignoring what all those new tags are supposed to do is in the W3C version of HTML 5.

Yes, there's two versions -- the one maintained by the WhatWG and the one maintained by the W3C... and thanks to their "living document" bull HTML 5 that was valid two years ago is probably no longer valid under either spec. Even worse the two are seriously starting to fork away from each-other.

With not ONE legitimate UA treating any of the new HTML 5 "structural" tags as anything more than a glorified DIV, it almost seems like the people who used to nest endless pointless tables for nothing, that simply converted to wrapping endless pointless DIV with classes for nothing, today use endless pointless "structural" tags whilst still being unable to create an accessible document structure. Again, developers as a whole still having their heads wedged so far up 1997's backside we need an orthodontist to handle the extraction.

The really stupid part being if you just use HTML properly with semantic markup, you end up with a fraction the code, a fraction the effort, and an overall easier time of things. But no, that's not hot and trendy enough or packed with enough bald faced lies for anyone to listen. Or at least, not until they're in court for their derpitude.