The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

2 Pages V  1 2 >  
Reply to this topicStart new topic
> Advice on H1
PeteS
post Jan 9 2018, 01:23 PM
Post #1





Group: Members
Posts: 7
Joined: 9-January 18
Member No.: 26,573



Hi All..

Could anyone tell me the reason why the following might occur.

Someone updates H1 heading tag in my HTML website.

They show me the H1 addition in an image that they sent.

I cant find it using view page source>CTRL & F to search H1.

How can it be that it is showing his end and not mine?

Thanks in advance!!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 9 2018, 09:21 PM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,024
Joined: 9-August 06
Member No.: 6



Are you sure the image is of the actual live webpage? Can you see it on the page? If so, are you sure it's really a H1 and not just looking like a H1? Did you search for the text it contains?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
PeteS
post Jan 10 2018, 07:04 AM
Post #3





Group: Members
Posts: 7
Joined: 9-January 18
Member No.: 26,573



Hi Pandy and Thank You for your reply.

Yes i did search using the text, but nothing appeared. The image that he sent was this.... which shows the H1 tag.


IPB Image


However, when i use an incognito window to search for the h1 text from the view page source


I see the following


http://i64.tinypic.com/zxjiww.jpg

This is the page source to the live webpage... view-source:https://www.weleadusa.org/agenda-21-depopulation-map.html


Surely it should show my end?

I am stumped, and i am also thankful for your help!

Many Thanks again
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
PeteS
post Jan 10 2018, 07:08 AM
Post #4





Group: Members
Posts: 7
Joined: 9-January 18
Member No.: 26,573



Sorry....

This is what i see from my end

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 10 2018, 09:53 AM
Post #5


.
********

Group: WDG Moderators
Posts: 7,916
Joined: 10-August 06
Member No.: 7



QUOTE(PeteS @ Jan 10 2018, 01:04 PM) *

This is the page source to the live webpage... view-source:https://www.weleadusa.org/agenda-21-depopulation-map.html

I see a third version:

CODE
<div class="infam55">
    <p><strong>The infamous </strong> <h2 class="agend-5rr"> Agenda 21 depopulation map</h2> <strong> is quite useful in that it reveals a pervasive American problem.</strong></p></div>  

Maybe the other person didn't upload the page, or has uploaded it to another URL?

A few sidenotes:

Heading elements like H1 or H2 are not allowed inside P (or vice versa). Instead the browser will think the P element is closed when a H1 start tag is encountered.

The STYLE element can't be in the BODY section, it should be in HEAD. This actually allowed from HTML5.2.

Finally, when javascript is disabled most of the page content is hidden.

The W3C validator points a few more errors: https://validator.w3.org/nu/?doc=https%3A%2...lation-map.html

This post has been edited by Christian J: Jan 18 2018, 02:29 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 10 2018, 07:49 PM
Post #6


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,024
Joined: 9-August 06
Member No.: 6



Sorry, I thought the screencap was of the rendered page, through a browser.

Three versions? If it were merely two I would say you viewed a cached page, but three? unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 11 2018, 09:55 AM
Post #7


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,024
Joined: 9-August 06
Member No.: 6



BTW I see the same as Christian.

But there is a H1 a bit down from the H2.

HTML
<p> <span class="line-break"></span> Also, whether it is Agenda 21, and what the <h1 class="addedes">agenda 21 depopulation map</h1> represents, or,
the many other infringements and failures we face that are at issue; they are all enabled by the same absence, inertia and misconceptions- and are easily remedied.<span class="line-break"></span></p>


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
PeteS
post Jan 17 2018, 10:21 AM
Post #8





Group: Members
Posts: 7
Joined: 9-January 18
Member No.: 26,573



Sorry for the late reply and Thank You.

A bit since..

"Heading elements like H1 or H2 are not allowed inside P (or vice versa). Instead the browser will think the P element is closed when a H1 start tag is encountered. "

With the above in mind i checked with Moz which confirms a H1 tag?

"The STYLE element can't be in the BODY section, it should be in HEAD."

If i understand. Checking "Style" in the search box never returned anything.

Finally, when javascript is disabled most of the page content is hidden.

What would a solution to this be?

Also, i can see H1 tag is below the H2 tag in the pages HTML. Am i right in saying that these should be in ascending order. H1, and then H2 below and so on.

Many Thanks again!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 17 2018, 11:35 PM
Post #9


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,024
Joined: 9-August 06
Member No.: 6



QUOTE
"Heading elements like H1 or H2 are not allowed inside P (or vice versa). Instead the browser will think the P element is closed when a H1 start tag is encountered. "


Correct.

QUOTE
With the above in mind i checked with Moz which confirms a H1 tag?


I don't understand. What did you check and how?

QUOTE
"The STYLE element can't be in the BODY section, it should be in HEAD."


That used to be correct. If you use HTML 5 it's allowed in BODY but must be used a certain way. For all previous versions of (X)HTML the statement is true though.

QUOTE
If i understand. Checking "Style" in the search box never returned anything.


Now you've lost me again. What search box? Did you search the source for "style"?

QUOTE
Finally, when javascript is disabled most of the page content is hidden.

What would a solution to this be?


Don't use JS to generate content.

QUOTE
Also, i can see H1 tag is below the H2 tag in the pages HTML. Am i right in saying that these should be in ascending order. H1, and then H2 below and so on.


Not necessarily. I don't think there ever has been consensus about this.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 18 2018, 06:26 AM
Post #10


.
********

Group: WDG Moderators
Posts: 7,916
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Jan 18 2018, 05:35 AM) *

QUOTE
"The STYLE element can't be in the BODY section, it should be in HEAD."


That used to be correct. If you use HTML 5 it's allowed in BODY but must be used a certain way.

No it used to be allowed in HTML5 with the SCOPED attribute, but that's removed: https://developer.mozilla.org/en-US/docs/We...L/Element/style

Rant warning:

In practice, browsers seem to understand STYLE elements in BODY, but there might be performance issues as mentioned here: https://github.com/whatwg/html/issues/1605
You can still use LINK element stylesheets in BODY according to https://html.spec.whatwg.org/multipage/links.html#body-ok though I haven't found the corresponding part in the HTML5 spec yet. According to https://jakearchibald.com/2016/link-in-body/ this helps with incremental rendering, but I frankly see no use for that unless the browser is already nearly choking on ad scripts and other bloat.

QUOTE
QUOTE
Finally, when javascript is disabled most of the page content is hidden.

What would a solution to this be?


Don't use JS to generate content.

See also https://en.wikipedia.org/wiki/Progressive_enhancement
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 18 2018, 10:55 AM
Post #11


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,024
Joined: 9-August 06
Member No.: 6



It is? I didn't know that. Good riddance. I always thought it was stupid.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 18 2018, 10:59 AM
Post #12


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,024
Joined: 9-August 06
Member No.: 6



It's still in the spec though. 'scoop' seems to be gone but STYLE is still allowed in BODY as I understand it. unsure.gif


CODE
Contexts in which this element can be used:
    Where metadata content is expected.
    In a noscript element that is a child of a head element.
    In the body, where flow content is expected.


https://www.w3.org/TR/html/document-metadat...e-style-element
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 18 2018, 02:21 PM
Post #13


.
********

Group: WDG Moderators
Posts: 7,916
Joined: 10-August 06
Member No.: 7



You're right, seems they've added it back again in HTML5.2 (without requiring SCOPE):

QUOTE
The following constructions are now valid HTML:
<style> within the <body>.

https://www.w3.org/TR/html/changes.html#changes

(5.0 and 5.1 didn't mention BODY). My excuse is that this took place just one month and four days ago:

QUOTE
W3C Recommendation, 14 December 2017

blush.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 18 2018, 05:12 PM
Post #14


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,024
Joined: 9-August 06
Member No.: 6



I must say the HTML 5 spec is much harder to read than the previous specifications. I liked the SGML approach with DTDs. It was so structured. With this new one I have to wonder if I understand the ENGLISH right... ninja.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
PeteS
post Jan 24 2018, 01:22 PM
Post #15





Group: Members
Posts: 7
Joined: 9-January 18
Member No.: 26,573



Great Thank You for your help!

Because H1 tag is inside the </p>.. is it a case of</p> is not needed here as at all?


QUOTE
With the above in mind i checked with Moz which confirms a H1 tag?

QUOTE
I don't understand. What did you check and how?


By using the Moz browser tool bar and other tag checking tools. They all confirm H1 tag is there, together with H2



This post has been edited by PeteS: Jan 24 2018, 01:23 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 24 2018, 02:20 PM
Post #16


.
********

Group: WDG Moderators
Posts: 7,916
Joined: 10-August 06
Member No.: 7



QUOTE(PeteS @ Jan 24 2018, 07:22 PM) *

Because H1 tag is inside the </p>.. is it a case of</p> is not needed here as at all?

A </p> end tag before the H1 is optional, see https://www.w3.org/TR/html/syntax.html#opti...rt-and-end-tags

The </p> end tag after the H1 is invalid, though. For example, this:

CODE
<p>text1
<h1>heading</h1>
text2</p>

is considered equivalent with this:

CODE
<p>text1</p>
<h1>heading</h1>
text2</p>

...where the </p> end tag after the H1 is a stray tag which is ignored by browsers, while validators will consider the stray tag a syntax error.

The correct way to write it should be like this:

CODE
<p>text1</p>
<h1>heading</h1>
<p>text2</p>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 24 2018, 11:05 PM
Post #17


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,024
Joined: 9-August 06
Member No.: 6



Yeah, but it wouldn't be good practice if we still are talking about the same H1.

CODE
<p> <span class="line-break"></span> Also, whether it is Agenda 21, and what the <h1 class="addedes">agenda 21 depopulation map</h1> represents, or,
the many other infringements and failures we face that are at issue; they are all enabled by the same absence, inertia and misconceptions- and are easily remedied.<span class="line-break"></span></p>


The H1 is used for emphasis (and maybe SEO) and should be replaced with an EM or just styled bold, whatever. A H1 on the page would maybe be nice, but then let it be a heading.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 25 2018, 06:33 AM
Post #18


.
********

Group: WDG Moderators
Posts: 7,916
Joined: 10-August 06
Member No.: 7



True, I was digressing as usual.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
PeteS
post Jan 25 2018, 06:58 AM
Post #19





Group: Members
Posts: 7
Joined: 9-January 18
Member No.: 26,573



Great Thank You : )

QUOTE
The H1 is used for emphasis (and maybe SEO) and should be replaced with an EM or just styled bold, whatever. A H1 on the page would maybe be nice, but then let it be a heading.


...so that heading would be the complete sentence tagged as H1 and not the individulal wording.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 26 2018, 06:19 AM
Post #20


.
********

Group: WDG Moderators
Posts: 7,916
Joined: 10-August 06
Member No.: 7



QUOTE(PeteS @ Jan 25 2018, 12:58 PM) *

...so that heading would be the complete sentence tagged as H1 and not the individulal wording.

Syntactically, yes, except that semantically this text:

CODE
Also, whether it is Agenda 21, and what the agenda 21 depopulation map represents, or, the many other infringements and failures we face that are at issue; they are all enabled by the same absence, inertia and misconceptions- and are easily remedied.

doesn't fit a heading at all --to me it looks like paragraph (P) text.

The part "agenda 21 depopulation map" might use one of the phrase elements (e.g. EM, CITE, MARK, I or B --it's always hard to decide on which one, if in doubt use none) or link to another page about the agenda 21 depopulation map (and that separate page may well begin with <h1>Agenda 21 depopulation map</h1> at the top of the BODY section). The latter would make sense both syntactically, semantically and be good SEO.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

2 Pages V  1 2 >
Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 17th October 2018 - 01:59 AM