Author Topic: META redirect and HTML 5 (Read 1134 times)

GrumpyYoungMan · « **on:** 27 Jan 2020, 05:33:24 am »

<!DOCTYPE html>
<html lang="en-GB">
<head>
    <title>Redirect - Hold on to your hats...</title>
    <meta http-equiv="refresh" content="2; url=http://example.com/" />
<style>

    * { 
        
        box-sizing: border-box; 
    
    }

    body { 
        
        margin: 0px;
        
        background: #b1bdc9; 
        
        font-family: Verdana; 
    
    }

    .contentWrapper {
    
        position: absolute;
        left: 50%;
        top: 50%;
  
        transform: translate(-50%, -50%);
    
        border: solid 2px #266071; 
        border-radius: 0.5em;
    
        padding: 0.5em; 
        margin: 0.5em;
        
        background: #fff;
        
        width: 50em;
    
    }

    #center { text-align: center; }
    
    </style>
    
</head>
<body>


    <div class="contentWrapper">
        
        <div>Redirect in Progress...</div>
        
        <div id="center">( Please Wait )</div>
    
    </div>

</body>
</html>

The HTML 5 validator over at https://validator.w3.org/nu/#textarea reports that:

Quote

Bad value 2;url=http://example.com/ for attribute content on element meta: Expected a space character, but saw u instead.

How can I make this validate correctly - Please?

GrumpyYoungMan · « **Reply #1 on:** 27 Jan 2020, 05:37:30 am »

Solved - I was just missing a space

Bad:

Code: [Select]

<meta http-equiv="refresh" content="2;url=http://example.com/" />
Validates

Code: [Select]

<meta http-equiv="refresh" content="2; url=http://example.com/" />

Jason Knight · « **Reply #2 on:** 27 Jan 2020, 05:43:15 am »

1) in the majority of cases if you are redirecting like that, there's something WRONG with your server-side handling of things.

2) It's 2020, lose the XML style closures. XHTML was a dead end that the sooner it's in the rear-view mirror, the better.

3) To be valid HTML 5 you need a space after the semi-colon, but beware this BREAKS the functionality in IE8/earlier which is why a lot of people tell HTML 5 validation to go suck an egg. Same reason I tell their media="projection,tv" warnings to sod off.

So

Code: [Select]

<meta http-equiv="refresh" content="2; url=http://example.com">

Should work. That said, I'd suggest setting it server-side with PHP's header() or whatever language you are using's equivalent.

Now that said, id="center" == /FAIL/... what have I told you? Do not use classes or ID's to say what things look like.

-- edit -- you posted that you found where to put the space whilst I was typing, so I bolded my warning.

GrumpyYoungMan · « **Reply #3 on:** 27 Jan 2020, 05:54:41 am »

Thanks again Jason!

I am using PHP, so maybe like you say just use the inbuild PHP header function?

Quote from: Jason Knight on 27 Jan 2020, 05:43:15 am

Now that said, id="center" == /FAIL/... what have I told you? Do not use classes or ID's to say what things look like.

I will consider myself told off, but it was even worse than that - as when I posted it it was inline... Sorry, don't hurt me...

Jason Knight · « **Reply #4 on:** 28 Jan 2020, 02:42:00 am »

Quote from: GrumpyYoungMan on 27 Jan 2020, 05:54:41 am

I am using PHP, so maybe like you say just use the inbuild PHP header function?

Code: [Select]

header('refresh:2; url=http://example.com');
SHOULD do the same job, so yes if this refresh servers a legitimate purpose that's how I'd suggest going about it... either that or a 300 series status code.

BUT given what you're showing for a redirect/refresh, this does NOT look like someplace you even should be doing a redirect... I'd have to know why you're doing this to say for sure, but if it's for something like form result handling then it's utter tripe I'd pitch in the trash. Sites that do this "If you're not redirected in 2 seconds" crap on form handling out of some nutjob inability to process forms properly reek of blindly copying bad techniques that should never exist in the first place.

There is rarely if ever a good reason to do a "refresh" this way.

GrumpyYoungMan · « **Reply #5 on:** 28 Jan 2020, 07:27:06 am »

Thanks again Jason, you are spot on, you are basically right, I am copying what I have seen from other sites.

So what are you saying I should just take the input and redirect back to homepage? Or another page just confirming the details have been entered?

So the:
Login Form - redirect successful - home page is an old technique now?

Jason Knight · « **Reply #6 on:** 28 Jan 2020, 02:07:07 pm »

With logins the best approach is to just send the user back to the page they logged in from. That way they don't lose where they were.

Hence my current approach is to make logins a modal dialog that is sent to all pages when a user isn't logged in. Because I use "one index" construction ALL pages are really the same page with different content plugged in, so the login / user is logged in checks are run for every page. As such you just change where it says guest to the user name / avatar / what have you, and the trigger for the modal to a logout button -- and of course omit the modal login form.

Then use a random hash in the session matched to a hidden so that if they hit back, they can't re-use the old login form, deleting / recreating the hash on login or on a new form.

No redirects or extra sub-pages needed -- unless they FAIL logging in... in that case I send the login form modal open instead of closed with the error message.

GrumpyYoungMan · « **Reply #7 on:** 28 Jan 2020, 03:50:48 pm »

That make sense, what about handing the registration? Like telling them to wait for email to activate there account, etc?

CUTCODEDOWN
Minimalist Semantic Markup

Author Topic: META redirect and HTML 5 (Read 1134 times)

GrumpyYoungMan

META redirect and HTML 5

GrumpyYoungMan

Re: META redirect and HTML 5

Jason Knight

Re: META redirect and HTML 5

GrumpyYoungMan

Re: META redirect and HTML 5

Jason Knight

Re: META redirect and HTML 5

GrumpyYoungMan

Re: META redirect and HTML 5

Jason Knight

Re: META redirect and HTML 5

GrumpyYoungMan

Re: META redirect and HTML 5

Advertisement