Simple but challenging: tag these properly
i mean my friend is a begineer and basically wrapped them all in divs and then used extremely long classnames xd
id use the h1 etc but given how many styles there are, i don't think going to like h5 is worth it in this case,
basically all im asking from you is to name it elegantly if you don't mind..
22 Replies
maybe something like
?
shes incredible in design overall but the way how she wrote the code structure, i had to change it a bit..
it's a component btw, im using svelte as a framework for it so that's why i think using header and main in this case could be fine
For semantic HTML, You want the h1 to basically describe the page. I would use the first as an h1 with a span then use p elements for the rest, styled as needed. “You listened to” could be an h2 I suppose but the size of it should not be the decision for what tag; it should cascade in order of importance and the content that’s nested
right.. also can i call it header and main? i mean it is a component you see, the frame itself is a section, that's obvious but then inside that section can i name it footer and main?
maybe article?
The container elements yes, header and main is semantic html. Within those containers you would declare h1, p, h2 however . As for the footer , I don’t think you would use it inside main. It’s a separate element like header .
Is the footer referring to Top Songs? If so that would be an
<aside>
Article could work toowell im not talking about the top songs section, im talking just about this overview panel on the right, there the
welcome back to tempo would be footer with probably main/article wrapping the youl listened to xxx mins that's 3 daysArticle tags hold content that can make complete sense without the context of the rest of the page. Like if you put it on an empty page it would make sense. Top Songs may need a few more lines to make it a true article (Your Top Songs on Tempo) but even as it is I think you could get away with using an article tag
How is welcome back to tempo a footer ?
i meant header*
sorry 😅
Haha okay I was so confused
Yeah it could be the header of that section
lovely, i know :D more talking about the
you listened to 143448.. thing, i guess there i could just say it's div ig?I would wrap all of it under the nav bar in a
main then use a section and aside/articleyeah that's for sure, im once again talking about just the right section
Within the section a div is fine
Idk how large this site is but in the context of this page I don’t think you need to make the Welcome To a header. You could say the section is aria-labelledby
Then connect it to whatever the Welcome To is called. Give it an id to reference but of course use a class to style an id for aria reference
so basically:
or do i maybe replace the div with article?
oh, right
<header><nav></nav></header>
<main>
<section aria-labelledby=“primary-content-title”>
<h1 id=“primary-content-title” class=“primary-content-title”>Welcome to<span class=“accent”>Tempo</span></h1>
<div>
<h2>yo…</h2>
<p>14…
<p>th…
</div>
</section>
<aside>
<h3>Top Songs</h3>
…etc
<aside>
</main>
You can only have one h1 on a page
Sorry that took so long I’m on the phonewow! so pretty ahh
You don’t need to put the h1 Welcome To in its own div unless you have some reason to. You can use a span to break it up for styling, give it the accent color and a display block to break it onto the next line. Then you’re not breaking up the h1 into two words, for accessibility and SEO.
Basically you want the html markup to be layered for screen readers , then change the order and styles with css. But you want the flow to make sense if you’re reading it without looking at it. Like using form inputs without labels; if you can’t see the placeholder it’s just an empty input. That’s why you always want to include the label in the html then use css to hide it if you don’t want it to visually show (look up the class .sr-only). Build your HTML as though you cannot see the page and you have to read it
well im not entirely sure if i want to keep it without some wrapper because the youve listened to is in the center and i maybew anted to make the welcome as position absolute, do you think that's a bad idea?
I try to avoid absolute whenever possible, so many possibilities for overflow or unintentional overlap.
why would you need to make the welcome to, absolute ? Wrap it in a div either way but I wouldn’t use absolute when we have flex and grid now
For this specific situation anyway of course absolute has its use cases
Even with absolute, you wouldn’t need a wrapper when it’s all in one tag. You would just make the h1 absolute. But I would not recommend using absolute in this use case
oh right, i totally forgot that i can use the span inside the h1, great, thank you
that does make sense
thank you once again for your awesome help <3
Good luck !!
forgot to report that it works wonderfully, ill flag this thread as solved when im on pc