1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Question about <h> tag order on a webpage

Discussion in 'HTML & Website Design' started by Will64, Aug 11, 2023.

0
  1. #1
    I came across this code in a tutorial.

    The person previously stated that they recommended, in short, that there be only one <h1> tag on a webpage for best practices.

    Then they provided this webpage html for an example.

    My question is about their use of the <h2> and <h3> tags within the <header>, followed by an <h1> headline. Does the <h1> information have to appear be before any <h2> information is introduced?

    If the <h1> in on this page needed to be there... is there a better way of handling the <header> information?

    Is this a good example of semantic html?

    I've been using html for a while, but I still consider myself a beginner.

    Any light shed on this will be appreciated.
    +==============+
    <body>
    <header>
    <h2>Some City Public Meeting</h2>
    <h3>A tag line for Some City</h3>
    </header>

    <main>
    <h1>Speaker list for this meeting</h1>
    <nav>
    <ul>
    <li>Speaker 1</li>
    <li>Speaker 2</li>
    <li>Speaker 3</li>
    </ul>
    </nav>

    <p><em>Contact us by phone</em> at (555) 555-5555 for information.</p>
    </main>

    <footer>
    <p>&copy; Copyright 2022 Some Town.</p>
    </footer>
    </body>
    +==============+
     
    Will64, Aug 11, 2023 IP
  2. Sumit_Singh

    Sumit_Singh Well-Known Member

    Messages:
    716
    Likes Received:
    64
    Best Answers:
    6
    Trophy Points:
    100
    #2
    Hi Will64
    <h1> is the important heading tag on the webpage that includes the main content and keywords of your webpage, blog or the content is about.
    In the above code <h2> and <h3> tags are used in the header because that are the taglines. For example it may be the company name and the tagline that usually appears on the banner image. It is in the heading tags because of crawling and indexing purpose and the most importantly to improve the search engine visibility.
    It depends on the page style which type of page it is and how you are designing it, so you can use the heading tags accordingly. As <h1> is the main and most important heading tag and we can use it once per webpage so it would be recommended to use it wisely.
     
    Sumit_Singh, Aug 12, 2023 IP
  3. Will64

    Will64 Member

    Messages:
    5
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    25
    #3
    Hi Sumit_Singh,
    Thank you for taking time to help me with my question. Your answer is clear and helped me to better understand html semantics and structure. Cheers!
     
    Will64, Aug 12, 2023 IP
    Sumit_Singh likes this.
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #4
    That is some utter garbage ignorant code. And you can prove it using either the official HTML validation service, or using the "web developer toolbar" extension under "document outline".

    [​IMG]

    Numbered headings have numbers for a reason, to create a organized navigable structure. This matters particularly for non-visual users and the user-agents they access pages through. That means aural/speech, braille, and of course search. HTML is supposed to be about content for everyone, and if you're choosing any of your markup -- tags, id's, classes -- based on what you want things to look like, you've failed to divine the entire reason HTML exists.

    This is why halfwitted rubbish like failwind and bootcrap are monuments to HTML 3.2 era stupidity!

    Your H1 (singular) should be the (singular) first heading on the page. An H1 (singular) is the (singular) heading (singular) that every other heading on the page marks a subsection of. This is why the site title/logo is usually the best candidate for your H!, and the quacks, morons, fools, and black-hat SEO dirtbags who tell you to abuse it for something like a "hero section" are talking out their arses.

    This is because an H2 marks the start of a major subsection of the page, a subsection of what the H1 starts. Th first H2 is the start of your main content if you aren't using the MAIN tag.

    Just as an H3 means the start of a subsection of the H2 preceding it. An H4 means the start of a subsection of the H3 preceding it. At which point do I really have to explain what H5 and H6 MEANS?

    This is why you don't skip over headings when the number goes up. It's why you don't pair H1+H2 or H2+H3 for a heading and tagline when they are in fact all one heading! That last part being where the example not only failed once, but twice! You don't use a separate heading for a "tagline" that is actually part of the same heading / semantic landing / structural breakpoint!

    What amazes me about people not understanding this is I leaned these concepts in grade school a decade before HTML was a twinkle in TBL's eye. What the blazes do they even teach in school anymore? Oh that's right, the mainstream wants it to be nothing more than glorified daycare and to hell with things like teaching facts or reasons. Because Jesus.


    And for those who would argue this, MDN backs me up.
    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#accessibility_concerns

    Also, what makes a section with zero anchors inside it navigation? What grammatical reason is there for emphasizing "contact us by phone?". Why is it "copyright copyright?" Use the symbol or the word, not both. Also legally you no longer need to say the year.

    I would even argue that the footer isn't even a sentence, much less one or more sentences constituting an organized thought -- the definition of a paragraph.

    This would be closer to what I'd consider proper.

    
<header>
	<h1>Some City Public Meeting</h1>
	A tag line for Some City
</header>

<main>
	<section>
		<h2>Speaker list for this meeting</h2>
		<ul>
			<li>Speaker 1</li>
			<li>Speaker 2</li>
			<li>Speaker 3</li>
		</ul>
	</section>
	<p>
		Contact us by phone</em> at
		(555) 555-5555 for information.
	</p>
</main>

<footer>
	&copy; Some Town
</footer>
    Code (markup):
    You've got a perfectly good HEADER for wrapping the tagline, so why waste any other tag on it. Some might argue that the return of the dipshit HGROUP tag might be more appropriate, but I dislike putting sentence fragments into paragraphs. But if you want that route:

    
<header>
	<hgroup>
		<h1>Some City Public Meeting</h1>
		<p>A tag line for Some City</p>
	</hgroup>
</header>

<main>
	<section>
		<h2>Speaker list for this meeting</h2>
		<ul>
			<li>Speaker 1</li>
			<li>Speaker 2</li>
			<li>Speaker 3</li>
		</ul>
	</section>
	<p>
		Contact us by phone</em> at
		(555) 555-5555 for information.
	</p>
</main>

<footer>
	&copy; Some Town
</footer>
    Code (markup):
    Would be that approach. Which might make sense if you had actual <nav> for your site menu in the header.
     
    deathshadow, Aug 13, 2023 IP
  5. Will64

    Will64 Member

    Messages:
    5
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    25
    #5
    Hi deathshadow,
    I follow your CutCodeDown website. In fact, that's what prompted my question. This tutorial example just didn't look right to me.

    I've looked at how you handle header material (company name, tagline, etc):

    <h1>
    <a href="#">
        Site Title
        <span>-</span>
        <small>Put a Tagline Here</small>
    </a>
</h1>
    HTML:
    I couldn't figure out why they structured the header that way, with an h1 below it. I thought maybe there was some header exception I hadn't learned about yet.

    Thank you for taking time to provide a complete answer, and reviewing proper html structure, especially with regard to the header section.
     
    Will64, Aug 14, 2023 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #6
    That's actually my old way of handling it from before UA's did anything useful with HEADER. I would lean today towards putting the anchor around the H1 and the tagline inside a HEADER tag.

    Though honestly as much as I hate on HGROUP, I will say that for inside the page header for the H1, I can start to see utility for it.

    But that's the fun part of coding for the web. It's a moving target. What's good practice one day can be junk the next, and what's junk today could be useful tomorrow.

    What my first real programming mentor told me: The day you stop learning is the day the rest of the world leaves you behind.
     
    deathshadow, Aug 14, 2023 IP
  7. Will64

    Will64 Member

    Messages:
    5
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    25
    #7
    Would this be what you're describing?
    <a href="#"><h1>Site Title</h1></a>
<header>Put a Tagline Here</header>
    HTML:
    or would you wrap it all in the header tag?

    Thank you for the further explanation, and the "moving target" analogy. Due to the moving target... I'm trying to learn the thinking behind it all so as things change, I'll be aware of what the point is, and then use whatever is currently available (regarding html, css) to sort it. I referenced your "old way", and you took time to show how you would handle this now... but your thinking/logic behind it all remains the same.

    I've tended to be a "read only" member of this forum. I appreciate the helpful replies to my question.
     
    Will64, Aug 14, 2023 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #8
    No, in fact that doesn't even make sense as it's all one headER containing a headING.

    To borrow from the current HGROUP pattern.

    
<header>
  <h1><a href="#">Site Title</a></h1>
  <p>Put a Tagline Here</p>
</header>
    Code (markup):
    I wasn't a fan of the old HGROUP, but I'm warming to its new implementation even if I don't agree with its "only heading or paragraph" content.

    Take a full-blown site header.

    

<input type="checkbox" id="pinMenuToggle" data-jsRemember="pinMenu" hidden>
<header>
	<hgroup>
		<h1><a href="#">Site Title</a></h1>
		<p>Put a Tagline Here</p>
	</hgroup>
	<a href="#mainMenu" class="mainMenuOpen" hidden>
		<span>Open Main Menu</span>
	</a>
	<nav id="mainKenu">
		<a href="#" class="modalClose" hidden tabindex="-1">
			<span>Close Main Menu</span>
		</a>
		<div data-modalTitle="Main Menu">
			<a href="#" class="modalClose" hidden>
				<span>Close Main Menu</span>
			</a>
			<ul>
				<li><a href="./">Home</a></li>
				<li><a href="#whatIDo">What I do</a></li>
				<li><a href="#testimonials">Testimonials</a></li>
				<li><a href="#contactMe">Contact Me</a></li>
				<li class="pinMenu" hidden>
					<label for="pinMenuToggle" class="icon_pin">
						<span>Pin Menu</span>
					</label>
				</liL>
			</ul>
		</div>
	</nav:>
</header>
    Code (markup):
    That hgroup becomes a really handy container for flex-grow. So I'm warming to it.

    It's sad how often new stuff is oft poorly explained in tutorials or show no real thought or care in the specifications. It's like "just show me a proper usage case and I'd understand it" and the people creating this stuff are incapable of that.

    See let/const in JS. Made no sense and served no purpose until I realized I could leverage it to kick IIFE to the curb.

    It didn't help in HGROUP's case that the initial implementation of only filling it with multiple heading tags was utter semantic gibberish and a middle finger to accessibility minded alternative navigation. Kind of like the folks who insist on putting H1 on things that don't describe ALL the subsections of the page.
     
    deathshadow, Aug 30, 2023 IP
  9. Will64

    Will64 Member

    Messages:
    5
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    25
    #9
    Yikes! I had that all bass ackwards. Thank you for clearing this up in detail for me. I appreciate your time in doing that. My thought is that if I can get the foundational html down, and the thinking behind it, my websites will be in much better shape.
     
    Will64, Aug 31, 2023 IP