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.
Related
I am developing a kind of HTML+JS control which can be embedded into various web pages. I know nothing about those pages (well, I could, but I don't want to). The control consists of one root element (e.g. DIV) which contains a subtree of child elements. In my script, I need to access the child elements. The question is: how can I mark those child elements to distinguish them?
The straightforward solution is using id-s. The problem here is that the id must be unique in the scope of the entire document, and I know nothing about the document my control will be embedded into. So I can't guarantee the uniqueness of my id-s. If the id-s are not unique, it will work (if used with care), but this does not conform with the standard, so I can meet problems with some new versions of the browsers, for example.
Another solution is to use the "name" attribute. It's not required to be unique -- that's good. But again, the standard allows the presence of "name" attribute only for a restricted set of element types. For example, the "name" attribute is invalid for DIV elements.
I could use, for example, the "class" attribute. It seems to be OK with the standards, but it's not OK with the meaning. "class" should be used for other purposes, and this may be confusing.
Can anybody suggest some other options to implement local id-s for HTLM elements?
You could use the HTML5 data-* attributes so you can give them a custom name with the right meaning:
https://html.spec.whatwg.org/multipage/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes
Do something like:
<div id="element-id" data-local-id="id-value">
...
</div>
and get the value in JavaScript with:
const el = document.getElementById('element-id');
const { localId } = el.dataset;
If you use a prefix to all of your ID's and or classes such as myWidgetName_98345699- the likelihood of collisions is highly improbable.
<div id="myWidgetName_98345699-container" class="myWidgetName_98345699-container">
jQuery does have selectors that will search for part of an ID, so using common names like container would be smart to stay away from as well. Using a longish alphanumeric mix for the specific part of the ID would be smart also
Typically, including hidden information within the web page required creative approaches. For example:
Storing information within HTML element attributes such as id, class, rel, and title, thus overriding the attributes original intent.
Using <span> or <div> blocks that contain the information, while making such blocks invisible to the user through styling (style="display: none;").
Adding JavaScript code to the web page to define data structures that map to HTML ID elements.
Adding your own attributes to existing HTML elements (breaking the HTML standard itself, and relying on the HTML browser to ignore any syntax errors).
The approaches above are not elegant and are not good coding practice, but the good news is that jQuery has a facility that simplifies associating data to DOM elements in a clean, cross-browser manner.
Use the custom data attributes:
Any attribute that starts with "data-" will be treated as a storage area for private data (private in the sense that the end user can't see it - it doesn't affect layout or presentation.
Defining custom data via html:
<div class="bar" id="baz" data-id="foo">
...
</div>
Associating data-id to specific DOM elements (jQuery):
$('#foo').data('id', 'baz');
Retrieving an element with specific data-id:
var $item = $('*[data-id="baz"]');
I am a user of the content management system (TYPO3) that does not allow me to add something to the head of the html document. Is it possible to define a css style sheet and script in the body so that I do not duplicate corresponding styles and javascript everywhere in the html code that I add?
Technically, it's not valid to place a style tag inside the body, but most, if not all browsers will actually implement it.
I've always been under the impression that a link tag should be inside the head according to the specs, but given a quick test, it looks like using a link tag inside the body validates as HTML 5, so that might be an option. See Alohci's comment about this below.
And yes, you can place a script tag inside your body.
You can add a script in the <body>, but css should be in the <head>.
Major browsers recognize <style> in the <body>, but it's not valid.
Use Content Element of HTML type to do that with TYPO3 backend if there is no other possibility.
Of course as suggested in other answers you should not add CSS in the body, so maybe it will be just better to use inline styles for required elements?
<div style="color: red">title</div>
I understand that using custom html tags is improper for a variety of reasons, but I wanted to run a specific situation by you that might warrant a custom html tag and hopefully get told otherwise or possibly a better way of achieving my goal.
Throughout my code I have what I term as templates that are made up of a div tag with a template and a hidden class attached to it. This is not visible on the screen, but basically these "template" tags contains html that I use in Javascript to create a variety of different items. I do this so that I can style my templates in html rather than have to worry about mixing CSS in with my Javascript.
<!-- TEMPLATE -->
<div class="template hidden">
<span>Random Container</span>
Random Button
</div>
In javascript I would do something like
var template = document.getElementById("template");
var clone = template.cloneNode(true);
clone.removeClass("template hidden");
I would rather be able to do something like this
<template class="hidden">
<span>Random Container</span>
Random Button
</template>
So that if I have multiple templates in a single div I can grab them all rather than having to give them unique class names. Of course my reasoning for needing an implementation goes a lot deeper than this, but its not necessary to waste your time with the details. Let's just say that it will help clean up my Javascript ALOT.
Because the custom template tag is hidden and really is nothing more than a container that is convenient to call within javascript with document.getElementsByTagName("template"); Is this ok to do? I would probably prefix the tag with a custom name in case template ever gets implemented into html.
Modern browsers generally “support” custom tags in the sense of parsing them and constructing DOM nodes, so that the elements can be styled and processed in scripting.
The main problem is IE prior to IE 9, but it can be handled using document.createElement('...') once for each custom tag name.
Another problem is that validators will report the tags as errors, and if there are loads of such errors, you might not notice some real errors in markup. In principle you can create your own DTD to deal with this (I have an HTML DTD generator under construction, but it is trickier than I expected...).
With these reservations, use custom tags if they essentially simplify your job as compared with using classes.
Why not use one of HTML5's data attributes? They are for storing private data or custom info.
For your case, you could add data-type="template" or data-name="template" and then search and remove based on that. One simple function just like you would write to remove your <template> tag, but without breaking rules.
So, using your example, <div data-type="template" class="hidden"></div>
I am looking for a tag that i can use to mark out a position in the html, which i can then find later using JQuery. However, I need the tag to be as useless as possible: even empty divs and spans can cause the layout to change depending on the CSS rules you set. For that matter, even rubbish tags that html doesn't understand seem to acquire styles from css, and I don't think there is any way to find comments via DOM traversal?
This tag will be used to mark out the start and end of a chunk of HTML to be Ajaxed. I do not want to wrap the whole chunk in a div or span (which i what i'm doing now), because this can affect how the CSS cascades and i want the fact that the html is marked out as a chunk to be completely transparent to the programmer (me).
Any ideas?
edit: I just thought of using empty script tags. Those should be completely inert and invisible. I shall look into it
edit: How could i forget about display: none? stupid stupid stupid
Script tags
Anchor tags <a name...>
Can you use comment tags: <!-- whatever -->? Parser would allow you to distinguish it.
Given that you're talking about trying to use comments or <script> tags it seems that you don't want the content of your "chunk" to be visible to the user? If so, why can't you just wrap it like this:
<div style="display:none;" id="myChunk1">...your content...</div>
That won't interfere with the layout. If you have multiple "chunks" on the page use class="chunkClass" instead of setting the style inline.
Using jQuery you can easily get access to the content, delete the whole chunk, replace it, make it visible, etc.
If one extra <div> or <span> is screwing up your layout there's probably something else going on with your CSS.
[Responding to the title, not the actual scenario] If PHP is involved, <?php ?> makes a dandy no-op tag; e.g.,
<p>No space between this<?php
?>that.</p>
will render as
No space between thisthat.
(except this facility does not do the Right Thing for embedded PHP multi-line tags, so the preceding was coded without any embedded newlines).
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