What’s a valid HTML5 document?
I’ve just been reading the HTML5 author spec. It states that the , and tags are optional. Does that mean that you can leave them out completely and still have a valid HTML5 document? If I’m interpreting this correctly, it means this should be completely valid:
Is this correct? You can check out the spec here: http://dev.w3.org/html5/spec-author-view/syntax.html#syntax «8.1.2.4 Optional tags» is the bit out about it being OK to omit , and
You MUST have the tag, as written in your link : «Documents must consist of [. ] The root element, in the form of an html element.» For and , I’ll have a look.
@samsamX, no, that’s inaccurate. If you read the whole doc you see later: «an HTML document always has a root html element, even if the string doesn’t appear anywhere in the markup.». If you omit the tag in a valid way, there is an implicit root html element anyway.
@samsamX, they trick you into believing it was meant to be read by humans. Even a laywer would have a hard time with the HTML5 spec.
4 Answers 4
The title element is indeed required, but as Jukka Korpela notes, it also must be non-empty. Furthermore, the content model of the title element is:
Therefore, having just a space character in the title element is not considered valid HTML. You can check this in W3C validator.
So, an example of a minimal and valid HTML5 document is the following:
This is the minimal HTML5-valid document:
According to MDN even the title tag may be omitted «if the element is an srcdoc, or if title information is available from a higher level protocol». So the minimal HTML5-valid document is context-dependent. (I have heard it alleged that ‘title information is available from a higher level protocol’ covers email.)
It is no longer valid, since now HTML5 drafts require that the title element have nonempty content. Any character (even a space) there will do. (Until, perhaps, they change the rules again.)
According to Validator.nu and the W3C validator the tag with a whitespace is regarded as empty. There has to be some non-space character inside.
W3C HTML validator maintainer here. FYI with regard to the validator behavior, as of today, the validator now enforces the requirement in the HTML spec that the title element must contain at least one non-whitespace character —
Is it true that the spec requires that? I see «Content model: Text that is not inter-element whitespace.» But inter-element whitespace is defined as being certain forms of Text nodes. has no text node children so it does not have inter-element whitespace. Text on the other hand is defined as either nothing, or text nodes. «Nothing» matches so a strict reading says that the content model is satisfied. No doubt that’s not the intent of the definitions, but maybe there’s a spec flaw there.
Saved searches
Use saved searches to filter your results more quickly
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
not a valid HTML tag name error #159
not a valid HTML tag name error #159
Comments
undefined: [object Object] is not a valid HTML tag name in
. imports const jsx = ( > > location=> ); console.log('jsx ? ', render(jsx)); when I run it in jsx mode, i get a slightly more useful error but still not able to pin down just what the invalid tag is:
Error: [object Object] is not a valid HTML tag name in <[object Object] value=< Object < "history": Object < "action": "POP", "block": [Function anonymous], "createHref": [Function createHref], "go": [Function anonymous], "goBack": [Function anonymous], "goForward": [Function anonymous], "listen": [Function anonymous], "location": Object < "hash": "", "pathname": "/", "search": "", "state": undefined >, "push": [Function anonymous], "replace": [Function anonymous] >, "location": Object < "hash": "", "pathname": "/", "search": "", "state": undefined >, "match": Object < "isExact": true, "params": Object <>, "path": "/", "url": "/" >, "staticContext": Object <> > > > I’m trying to switch my app over from react to preact, and this is the only thing that’s blocking me. When I run the app without SSR, just using preact to mount on the client only, everything works fine. No errors.
Given that html is so. loose, wouldn’t a warning be better here?
The text was updated successfully, but these errors were encountered:
Well, yeah, I understand the error, but that’s not where my confusion lies
What I don’t understand is why react , preact and preact-compat are all capable of rendering this setup, but preact-render-to-string returns a invalid tag name error. To be clear — if I convert things to client side rendering only, with preact , I have no issue
That seems like a bug to me. I would assume preact-render-to-string uses the same renderer as preact right?
Now of course, it’s not StaticRouter on the client, it’s BrowserRouter , but they are functionally pretty similar and react-router is a super common dependency, so it would be odd for StaticRouter to be the problem, imo. And if that is the case, it’s kind of a deal-breaker, or at the very least, it’s just really not worth the hassle to switch it out for a preact friendly alternative, imo
Happy to take a look at it. Can you provide a codesandbox or repo where the issue can be reproduced? Hard for us to guess what could be wrong rather than inspecting the error itself.
Hi @rossPatton. I have some insight here that might help you after dealing with this (or a similar) issue.
We were getting this error because we weren’t including our node_modules into our webpack process, meaning they weren’t getting aliased imports.
In our webpack config we had something like:
aliases: [ react: 'preact/compat', 'react-dom': 'preact/compat', ] But our webpack config was using webpack-node-externals to skip the node_modules folder.
This was causing some of our node_modules to still have imports from React, which are not compatible with preact. In our case, it was using React.createContext which preact-render-to-string doesn’t know how to serialize.
When bundling, make sure that you are also running react-router through your aliases. My bet is you are not aliasing in preact/compat , or your webpack config is skipping node_modules altogether.
Additionally, you could check out preact-router. The README says that it is not a complete replacement for react-router , but you can still use react-router «as long as you alias in preact/compat».
How to validate HTML tag using Regular Expression
Given string str, the task is to check whether it is a valid HTML tag or not by using Regular Expression.
The valid HTML tag must satisfy the following conditions:
- It should start with an opening tag ( <).
- It should be followed by a double quotes string or single quotes string.
- It should not allow one double quotes string, one single quotes string or a closing tag (>) without single or double quotes enclosed.
- It should end with a closing tag (>).
Input: str = “’>”;
Output: true
Explanation: The given string satisfies all the above mentioned conditions.
Input: str = “
”;
Output: true
Explanation: The given string satisfies all the above mentioned conditions.
Input: str = “br/>”;
Output: false
Explanation: The given string doesn’t starts with an opening tag “Input: str = “”;
Output: false
Explanation: The given string has one single quotes string that is not allowed. Therefore, it is not a valid HTML tag.
Input: str = “ >”;
Output: false
Explanation: The given string has a closing tag (>) without single or double quotes enclosed that is not allowed. Therefore, it is not a valid HTML tag.
Approach: The idea is to use Regular Expression to solve this problem. The following steps can be followed to compute the answer.
- Get the String.
- Create a regular expression to check valid HTML tag as mentioned below:
- Where:
- represents the string should start with an opening tag ( <).
- ( represents the starting of the group.
- “[^”]*” represents the string should allow double quotes enclosed string.
- | represents or.
- ‘[^’]*‘ represents the string should allow single quotes enclosed string.
- | represents or.
- [^’”>] represents the string should not contain one single quote, double quotes, and “>”.
- ) represents the ending of the group.
- * represents 0 or more.
- > represents the string should end with a closing tag (>).
Below is the implementation of the above approach:
Not valid html tags
Utility functions to escape custom tags in a string or check if any string contains valid or custom tags.
1. Method to escape custom tags
The method will return the changed string in which all the custom HTML tags will be replaced with lt and gt
validateHTMLTags.escapeCustomTags('Send a and a valid tag here to test!')2. Method to check if string contains any valid html tag or not
This method will return a boolean stating whether the given string contains any valid html tag or not
validateHTMLTags.isValidTag('Send a and a valid tag here to test!')3. Method to check if string contains any custom html tag or not
This method will return a boolean stating whether the given string contains any custom html tag or not
validateHTMLTags.isCustomTag('Send a and a valid tag here to test!')Considered Valid HTML tags list
We are considering W3Schools valid HTML elements, ref here.
If you have any suggestions on what more can be added to this library, write to me at — piyush@whisperingbox.com