I am trying to add RDFa tags to videos so they can be indexed by Google and Yahoo. However the object and embed code for the videos are inserted by javascript, so they aren't actually in html. Can I put a duplicate object in a noscript tag? Is there another solution?
http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=162163
RDFa markup generated by Javascript is invisible to Google and Yahoo, just like other markup.
The good news is that in RDFa, the element actually doesn't matter at all; it's all about the attributes. So you can just put all the RDFa markup on <div> or <span> elements without visible content, you don't need to use <object>. You can use RDFa's resource="" attribute instead of href="" on elements that don't support href.
At least that's what the RDFa spec says; I haven't verified wether Google and Yahoo actually process it that way.
This might provide some help for the more general problem (HTML code inserted by JavaScript): A proposal for making AJAX crawlable
Related
If I want to accept HTML built by a user of an extension, and not from a web source, and display it within an existing extension document, is there an alternative to using an iframe?
For example, if a user provides mathematical expresions using MathML and they are to be displayed in the current web page, and the user may add a <div> or <p> tag inaccurately and have incomplete HTML, how can it be added to the page without corrupting the layout of the page, apart from an iframe?
Does insertAdjacentHTML really accomplish this? This MDN article seems to imply so, where it reads, "It does not reparse the element it is being used on, and thus it does not corrupt the existing elements inside that element."
Or, is there a way to validate the HTML string before inserting into the DOM, such as DOMParser?
Also, for users that are knowledgeable in HTML, CSS, JS and can construct a small interactive document rather than just an expression, to be dislayed within the page, is an iframe the only option? The user provided code will be stored in indexedDB and rendered only on the user's machine and within this extension tool. So, something similar to a snippet on stackoverflow. I have this working in an iframe now but the user could add about a dozen of these to the page at any one time and I wondered if there is a better way of accomplishing this, regarding memory usage and in general.
Thank you.
I'm implementing a system for my customer along the lines of attaching a tracking element to the DOM whenever specific errors are thrown (it simply has to have a certain value in a data-trkError attribute). My first thought was to use a
<span data-trkError="BLAH" style="display: none;"></span>
But then it occurred to me that this feels intuitively like what the meta tag should be usable for. However, this pretty much needs to be appended to a specific div in the DOM, ie within the body. Is this a problem? Is there anything standard-breaking or not-best-practises about a meta tag in the body tree?
Cheers
I agree that meta would fit better than an empty span. However (even if you could use them in body), note that you can’t just use custom meta keywords. In HTML5, only defined/registered values are valid.
But you can have meta elements in body, if they are used for Microdata or RDFa. For example, RDFa extends HTML5:
If the #property RDFa attribute is present on the link or meta elements, they MUST be viewed as conforming if used in the body of the document. More specifically, when link or meta elements contain the RDFa #property attribute and are used in the body of an HTML5 document, they MUST be considered flow content.
So you could create (or reuse an existing) vocabulary for your metadata. But, depending on your use case, this might be overkill.
As an alternative to span I’d use the script element as data block:
The script element allows authors to include dynamic script and data blocks in their documents. The element does not represent content for the user.
For example:
<script type="text/plain"> <!-- or whichever MIME type suits your need -->
<!-- your data -->
<!-- you could of course use data-* attributs on this script element, too -->
</script>
The <meta>-tag is part of the 4.2 Document metadata. Therefor it can only appear in the <head>-section of a document. Your solution using a <span> or a <div> or even a list for multiple errors is just fine for your purpose.
This question already has answers here:
Is there a way to create your own html tag in HTML5?
(18 answers)
Closed 10 years ago.
I want to create my own html tag. I use it on more than one page.
<myTag>
text
</myTag>
Attribute could be added. A javascript function should be run. The function must run whenever the tag is used. Any idea?
For example:
<body>
<myTag id="" class="" newAttribute="value" --blah blah blah-- >text</myTag>
</body>
<script>
function myTagFunction(){
blah blah.....
}
<script>
My purpose is not to break the HTML standard. I just want to learn how to create a custom HTML tag.
Just use a normal HTML button that calls the JavaScript function. Creating your own HTML element would make your website non-compliant.
How do you want to tell browsers to treat your html tag in way defined by you? Browsers cannot interpret non-standard tags. HTML is a standard, so you can't use non-standard tags in that way.
I want to create my own html tag
You really don't.
HTML is a language that allows us to add meaning to text.
This is just some text.
<p>But this is a paragraph, because it has a <p> tag around it.</p>
<input type="submit" value="And this is a form submission button">
This lets computer programs (including traditional web browsers, screen readers for the visually impaired, mobile phones and search engines) interact usefully with HTML, because the tags indicate what each element is.
This only works because everyone in the world has agreed on the meaning of these tags (via the HTML spec).
What you should do is use whatever existing HTML tag best matches the control you have in mind. In the case of a "back button" (which, please note, every web browser in the world already provides), that might be a <button> tag, or perhaps a link (<a>). You could also have a look at the Accessible Rich Internet Applications (ARIA) spec to see if any of the control types there fit what you've got in mind.
I'm a bit confused about your explanation for wanting to make a custom HTML tag though:
Because, i want to use it on more than one page
Maybe you don't want to repeat the JavaScript function that should run when the button is clicked? If so, you can put the function into its own file and include it on the pages where you want to use it:
<script src="/myFunction.js"></script>
Then your button can use it like this (very simplified example):
<button onclick="myFunction();"></button>
You can read up more on this here: DOM event handlers.
Instead, use a <span> or <div> with a CSS class, then attach an event handler to it. JQuery makes this kind of thing easy:
$(".myCSSClass").on("click", backButton);
Thats not possible to create our own customized tags in html
better to give class name for unique identification ..like
<span id="" class="backButton" newAttribute="value" >BACK</span>
and use this class 'backButton' for your operations..
You could have an own namespace in the html header. But you have to set that on every page.
it looks similar to:
<html
xmlns = "http://www.w3.org/1999/xhtml"
xmlns:og = "http://ogp.me/ns#"
xmlns:fb="http://ogp.me/ns/fb#">
But you dont want that, because its a really heavy process.
You can technically leverage the XML Element Declaration, which is part of the core DTD spec for XML, but I don't know that HTML 5 plays well with base XML, versus XHTML.
<!DOCTYPE html[
<!ELEMENT backButton ANY >
]>
FYI, I have no idea if the above works, it's just how it would work if it did.
However, it's not worth it at all and as Eric has advised, it would be much more compliant and reliable to simply use a class attribute (which can be space delimited to allow more than one) or, if you are still feeling feisty, use the data- attribute, like:
<div data-button_type="back">[back]</div>
There is a way to create your own elements, but I am not sure if you can assign JS so easily.
First derive from an existing element
<element name="backButton" extends="button"> ... </element>
Then use it
<backButton> ... </backButton>
See here for more information.
Apart from that, the other guys are right! Your site would not be compliant to HTML-standards.
I believe that Google displays the DOM also modified by Javascript.
Look I used the tool Fetch as Google/Bing/Baidu
Look at the results:
Without my jquery-plugin and noscript (ie pure HTML):
With javascript and noscript:
note: The javascript that showcased images and manipulated the DOM.
LIB Javascript
Download and test-case: https://github.com/brcontainer/defer-images/
Question:
Use <noscript> to help indexing of images is a good?
If it's a bad idea, give me an example of an HTML good for indexing images and I can use LazyLoad.
If the javascript displays images and Fetch as Google/Bing/Baidu displays the content normally (like the browser) so Google/Bing/Baidu indexes the DOM manipulated by javascript?
The search-engine will index the image grey.gif. It will never know about example.jpg.
data-* attributes are valid in HTML5 (only).
PS: Don't forget the alt attribute.
Out of curiosity, what, if any, impact will it have on a site or page if instead of using IDs or classes for elements, you simply create custom elements w/ JS and stylize them with CSS?
For example, if I create an element "container" and use it as <container> instead of <div class="container">, is there a performance difference or something?
I don't see this being used often and am wondering why?
That's like saying "What if I respect the syntax and grammar of English, but make up all the words?" While this thinking makes for good poetry, it doesn't lend itself well to technical fields ;)
HTML has a defined set of tags which are valid. If you use any tags which are made up, it will be invalid.
Now, that doesn't mean you can't get away with it; on the World Wide Web forgiveness is the default so if you used tags which you made up it wouldn't be the end of the world... but it would still be a bad idea because you'd have no guarantee how browsers handle those tags.
So the only real answer to "what impact will it have on a page if instead of using IDs or classes for elements, you simply create custom elements w/ JS and stylize them with CSS?" is anything could happen. Since you'd be using non-standard HTML elements, you'd end up with non-standard results, which none of us should try and predict.
If you really want to (and/or need to) use custom elements, look into XML. In XML you can "make up" your tags, but can still apply CSS and open the documents in a browser.
For example, save the following two files, and then open the XML file in a browser:
index.xml
<?xml-stylesheet href="style.xml.css"?>
<example>
<summary>
This is an example of making up tags in XML, and applying a stylesheet so you can open the file in a browser.
</summary>
<main>
<container>This is the stuff in the container</container>
</main>
</example>
style.xml.css
summary {
display:none;
}
main container {
border:2px solid blue;
background:yellow;
color:blue;
}
HTML is standardized, you can't simply invent new elements. Some browsers will render the text content of an element they don't recognize, but not all will, and your HTML will not be valid HTML in such a case.
HTML is a defined language, the elements and tags have certain meaning within the format. You cannot invent a new element not only because browsers may render those elements inconsistently, but also because the meaning and structure of the document becomes invalid.
You are best using the element that has the correct meaning for the content you wish to deliver. If you require a generic container for styling, the correct element is a div. There are similar elements that also provide some semantic meaning. I would recommend checking out a HTML tag index and HTML5 doctor for assistance in picking the correct element.
It sounds as though <div class="container">...</div> is the closest to what you need from your brief description.
If custom elements make your HTML easier to read and manage, go ahead and use them.
Since this question has been asked, custom elements have since been added to the WHATWG HTML Living Standard, along with an associated JavaScript API. Some web component frameworks are already implementing some of these specifications. It's no longer taboo like it was back in 2011. (I remember having some unpleasant issues dealing with the DOM in Internet Explorer when trying to use newly-announced HTML5 elements.)
As of writing this (November 2018), custom elements have been implemented into several major browsers. However, the MDN lists Microsoft Edge as having not yet implemented custom elements, although a blog post from 2015 says that the Edge team is "excited to continue to support and contribute to this journey."