Highlighted

About workflow and stuff about hashtags and order.

Contributor ,
Mar 16, 2020

Copy link to clipboard

Copied

About workflow and stuff. Why the #header is only made for the header and the #header h1 not for h1?

Why people push #header h1 under #header?

 

Capture.JPG

Views

351

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

About workflow and stuff about hashtags and order.

Contributor ,
Mar 16, 2020

Copy link to clipboard

Copied

About workflow and stuff. Why the #header is only made for the header and the #header h1 not for h1?

Why people push #header h1 under #header?

 

Capture.JPG

Views

352

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Mar 16, 2020

Copy link to clipboard

Copied

I'm not sure what you're asking.

If you're asking about the relation between the <header> tag and the #header id, there really isn't one, generally speaking. They're separate things in html and css. If you are using a javascript that requires the use of an id="header" using the <header> html tag won't be enough by itself. That's probably why you have <header id="header">. 

HTML                  CSS
<header>              header 

id="header"         #header 

class="header"     .header


Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Mar 16, 2020

Copy link to clipboard

Copied

I recommend that you stick with semantic HTML5 tags as selectors.  In other words, don't use unique IDs unless you absolutely need them for JavaScript.   Semantic tags give meaning and structure to content as well as acting as hooks for your CSS styles to grab onto.   See graphic and link below for commonly used semantic HTML5 tags.

 

image.png

Figure from W3Schools

https://www.w3schools.com/html/html5_semantic_elements.asp

 

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Mar 16, 2020

Copy link to clipboard

Copied

In addition to what Jon and Nancy have said, I am glad that the article that Nancy referred to - https://www.w3schools.com/html/html5_semantic_elements.asp - does expand on the use of headers and footers. These are not only used in the main document, but can also be used in other elements that require a header.

 

Having said that, in my personal opinion, an outline of the document is the most important goal for SEO and screen readers. This is where header tags play an important role. As an example, have a look at

junk.jpg

What this tells me is that both the body and the nav elements have no heading (hx).


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Resources
Learn Resources
Add a group