While messing around with Twitter markup i just found out that they placed HTML Markup within the data-expanded-footer and it looks something like this:
data-expanded-footer="<div class="js-tweet-details-fixer tweet-details-fixer">
<div class="js-tweet-media-container "></div>
<div class="entities-media-container " style="min-height:0px">
</div>
<div class="js-machine-translated-tweet-container"></div>
<div class="js-tweet-stats-container tweet-stats-container ">
</div>
<div class="client-and-actions">
<span class="metadata">
<span title="12:11 PM - 10 Apr 13">12:11 PM - 10 Apr 13</span>
· <a class="permalink-link js-permalink js-nav" href="/****/status/****" >Details</a>
</span>
</div>
</div>"
Is this a valid html element (this attribute is child of a div element with class tweet)
If this is valid, is this a good idea, if not why?
Is this so bad for SEO ?
EDIT
Just tried to parse HTML from data attribute and it worked but there should be a single quotation if you want to make it work like :
http://jsfiddle.net/burimshala/crEXU/
And if you leave like twitter using double quotes within the markup and if you open the data-markup attribute with double quotes it does not work :
http://jsfiddle.net/burimshala/crEXU/1/
How does Twitter parse this ?
data-* attributes are valid HTML5, see:
http://ejohn.org/blog/html-5-data-attributes/
and http://www.w3.org/TR/2010/WD-html5-20101019/elements.html
It's main use is for data storage (in this case of HTML code). It all depends on your situation if this is a good idea, but it definitely serves a purpose. I use it often when I want to 'clone' dynamic content.
It's an 'invisible' element, so SEO should not really be affected, I am however, no expert on this.
It's good declared, I would not say its bad for SEO because others SEO factors like Microformats for SEO (hCard, vCard or schema) all use HTML attributes.
As long your site is valid to W3C, and dont have any markup error (Check here): http://validator.w3.org/, than you are good with SEO.
The only small problem for SEO friendly this will be if your HTML markup code will always beat the website TEXT.
Remmeber for SEO always is better that minimum 51% of website to be Text, and others HTML atributes.
Related
I want to set the color of individual words within a <pre> block (roughly speaking, for displaying code with syntax highlighting). The <font> tag is deprecated in favor of using CSS, fair enough; what's the required syntax? In particular, in what element should the words be wrapped? I've previously used <div> to mark chunks of text for CSS styling, but that would seem only suitable for marking full paragraphs.
You should use the simplest, most generic inline element: <span>. For each type of token, give one or more appropriate classes to the span. For example:
<span class="type">int</span>
<span class="name">foo</span>
<span class="op">=</span>
<span class="number literal">42</span>
See it in action.
Update: StackOverflow also does code highlighting -- the code just above is highlighted! What does the HTML for that look like? Viewing the source HTML shows that the first line is highlighted using
<span class="tag"><span</span>
<span class="pln"> </span>
<span class="atn">class</span>
<span class="pun">=</span>
<span class="atv">"type"</span>
<span class="tag">></span>
<span class="pln">int</span>
<span class="tag"></span></span>
// and it goes on
Use span with a style attribute on it. Like:
This is a <span style="color:#f00;">sentence</span>.
<span>
This HTML element is a generic inline container for phrasing content,
which does not inherently represent anything. It can be used to group
elements for styling purposes (using the class or id attributes), or
because they share attribute values, such as lang. It should be used
only when no other semantic element is appropriate. <span> is very
much like a <div> element, but <div> is a block-level element whereas
a <span> is an inline element.
Use <span class="red">text</span> and some basic CSS like .red { color: red; }
Edit : notice class name "red" isn't a good practice
There’s no markup magic here: you can use any inline markup, and you do the magic (coloring or other formatting) in CSS. Technically, not all inline markup is valid inside pre, but browsers don’t really care. It’s more important that some inline markup has some default rendering or functionality.
If you don’t want any default rendering, you can use a or font or span markup, which have no impact on anything when they don’t have attributes and they are not styled. If you want some default rendering, you can use corresponding markup, if it exists, such as b for bold, or u for underline. This means that some special presentation is applied even if your stylesheet is not used.
Most people decide to use just span, as suggested in other answers. It’s simple, and nobody can claim that it has “wrong semantics”, because it has none. But the magic is really in CSS, and you use markup just to distinguish some sequence of characters as an element, so that it can be styled as a unit.
Contrary to what you probably hear most people saying, there is nothing inherently wrong with using font when you are really doing some font settings. But there is a practical problem in the old-style usage like <font color=red>. If you have gazillion tags like that and your boss or customer or wife tells you to use a different shade of red, you will have to change myriads of tags, perhaps in dozens of files. But if you have written <font class=keyword> or <a class=keyword> or, if you prefer, <span class=keyword>, and you use a CSS file referred to in all of your HTML files, you will need to change just one value in that CSS file.
I had a very hard time trying to word what I wish to know how to do, nor could I locate any post or website from Google that had my answer probably due to not being able to word this correctly, but I will explain in fullest detail.
<br />
<hr />
<br />
Break, horizontal, break is my way of separating parts of the post from another. How can I group the three into one simple tag that can replace the three, thus saving me time and hassle .
It would be also helpful to know if there are ways to define tag groupings with more than just empty tags like a tag identified by the string title1 would be a tag containing all the format, text, and all sub-elements of the template that was coded somewhere else.
If this question has already been posted then I am sorry. Thanks!
You don't need the <br> tags because <hr> is a block level element and automatically creates a line break. If you're doing that to get some vertical space above and below thw <hr> why not just use CSS to give the <hr> some margin?
hr
{
margin-bottom: 20px;
margin-top: 20px;
}
Neither <br> nor the proposed alternative <hr> are particularly well-suited here.
You need to learn about CSS. All you need to do is apply appropriate styles (i.e. a margin) to the elements that wrap your posts.
<div class="post">
<h1>Post #1</h1>
<p>something</p>
</div>
<div class="post">
<h1>Post #2</h1>
<p>something else</p>
</div>
div.post {
margin-bottom: 3em;
}
If you are using HTML5 then use <article> instead of <div class="post"> to denote individual posts.
As for grouping tags, this is currently not possible in plain HTML, you need to apply some preprocessing for that. The usual solution is to use a content management system which creates the final HTML based on your content and an HTML template.
Whilst this specific problem can be solved with a little bit of CSS, it sounds like you need a layout or templating engine of some sort in the long run. I'm a rubyist by trade so my go-to solution for doing this is Jekyll.
What Jekyll does is generate static html files from layouts and content that you write. You can abstract a lot of the repetitive layout markup into separate files and then just reference them when you need them.
The following guide is a good place to get started: http://net.tutsplus.com/tutorials/other/building-static-sites-with-jekyll/
If you're already working with another framework then do some reading around it first to see if there's something there you can use. If you're just writing straight-up HTML/CSS though, then definitely give Jekyll a try.
I'm trying to use the <a> tag in HTML5 more as a container as this tag can now have block elements as children, example:
before (valid XHTML 1.1)
<div>
<h3>
article title
</h3>
<p>
text
</p>
<a href="page.html" title="article title" >
<img alt="image">
</a>
<a href="page.html" title="article title" >
read more
</a>
</div>
after (valid HTML5)
<a href="page.html" title="article title" >
<h3>
article title
</h3>
<p>
text
</p>
<img alt="image">
<div>
read more
</div>
</a>
Does this new way of markup have any effects for SEO?
OK, removing pure semantics from your question (which, in my mind, does have a material impact on deciding on implementing your chosen method) and concentrating on pure "SEO" value and impact:
The first example needs to be qualified more, as if we take your example as literal, then you are linking to the same page.html 3 times. Google (specifically) only takes the link anchor value from the 1st link to any page that it comes across, so - the value for the first example is only extracted from that first link. The 2nd link (using an IMG tag with an ALT attribute as the anchor value), and the 3rd link using read more as the anchor value are effectively "ignored". It's important that other signals are used to supplement the first link's true intended value, such as surrounding text, images etc.
The 2nd example (HTML5), wraps all of that semantic/surrounding content up to make the effective 'anchor' value from which search engines will derive the link's intended meaning, and then as a consequence, the meaning of the destination page of the link.
Using an anchor tag as a containing wrapper for content that contains additional emphasis (the H tag), an image and an additional div only increases the difficulty that a search engine has to decipher the intended meaning of the link so it can associate it with the destination page.
Search engines (and Google predominantly) are constantly improving their crawling ability to enable better algorithmic parsing and processing of the HTML. Apart from emphasis signals (which are very low), Google mostly ignores the mark-up. The exception is of course links - so making an effort to simplify the parsing/processing by providing clear signals as to a link's anchor text is the safest way forward. Expecting them to understand all of the differences of HTML3, vs HTML4, vs HTML5 and all of the transitional, strict and other variations of each, is probably expecting too much.
TL;DR
Possibly, but only in terms of true link value.
As far as i know in the second way is not bad in anyway in term of seo But first may be slightly better as the titles,images are more closely linked to link.
Q. But better by how much?
A. May be not too much
There are many people that mark closing tags like this to help identify the closing tag that goes with an HTML tag:
<div id="header">
<div id="logo">
<a href="index.php">
<img id="logoimg" src="images/as_logo.png" alt="Logo" border="0" />
</a>
</div> <!-- logo -->
</div> <!-- header -->
I was wondering if it is syntactically ok to do this:
<div id="header">
<div id="logo">
<a href="index.php">
<img id="logoimg" src="images/as_logo.png" alt="Logo" border="0" />
</a>
</div id="logo">
</div id="header">
UPDATE: Here is the text from the spec on HTML5.3:
8.1.2.2. End tags
End tags must have the following format:
The first character of an end tag must be a U+003C LESS-THAN SIGN
character (<).
The second character of an end tag must be a U+002F
SOLIDUS character (/).
The next few characters of an end tag must be
the element’s tag name.
After the tag name, there may be one or more
space characters.
Finally, end tags must be closed by a U+003E
GREATER-THAN SIGN character (>).
8.1.2.3. Attributes
Attributes for an element are expressed inside the element’s start tag.
Note that attributes are only allowed on START TAGS.
using #jbyrds idea; using the HR tag allows you to see if you forgot the z attribute:
<div id="header">
<div id="logo">
<a href="index.php" id=link">
<img id="logoimg" src="images/as_logo.png" alt="Logo" border="0" />
</a><hr z="link">
</div><hr z="logo">
</div><hr z="header">
Although this adds more text, 32 extra characters vs. the original or the tags having a hidden class, you can use CSS to hide them.
[z] {
display: none;
}
Short answer, No.
Use the comments instead.
The answer is no for most tags. However, you could argue that tags like "img" that can be self-closing, are able to have attributes in them. But these self-closing tags are taking the place of an opening tag and a closing tag, so it's not the same as having an attribute in a closing tag. To be honest, there is really no need for this, it would just create more for the browser to have to read and make the page size bigger.
Sorry, but it doesn't work and doesn't validate.
If you try other attributes in closing tags, then the browser skips the attribute. I tried it in several ways, tested it with ids and classes, and the css and the javascript didn't recognized them in the ending tag.
Your best bet is the commenting.
EDITED
Or you could make your own html tags.
You must use hyphenation, and you should avoid
document.createElement('foo-bar');
no, not possible. some browser will ignore it, but maybe some other browsers will complain and won't display HTML correctly.
The original question describes a specific scenario of four parts:
improving html code readability, and specifically: matching opening and closing <div> … <\div> tags;
while reading (debugging) the rendered html page source grabbed from the browser;
when the rendered source has been dynamically generated (server-side generated/processed) and also stripped of all comments before sending the webpage to the requesting client;
and in this case the question is specific to WordPress (the well known php CMS platform for creating websites, blogs, etc.).
The specific complexity here is that there is no one source file to look at on the server as the webpage was dynamically generated by code with input from many files, databases, APIs, etc.
AND
That as previously noted, a common technique of placing a comment at the end of each closing <\div> is not helpful here because Wordpress, has stripped all comments prior to serving the page, presumably to make the page size smaller.
A Javascript Solution:
Forget about trying to hack the html in an effort to circumvent WordPress and the browser and the standards. Instead simply re-insert the comments back into the rendered source like this.
When matching opening <div id="myDivID"> and
closing </div> tags this javascript may help.
This function will comment every closing div tag
and label it with the div’s ID attribute, producing
a result like this:
<div id="myDivID">
<p>
Lorem ipsum dolor sit amet, consectetur
...
anim id est laborum.
</p>
</div><!-- end #myDivID -->
This will work even when the rendered page is
stripped of comments (by WordPress as in the
original question). Just trigger or inject the
function at any point you like, then view or save
the source. As others noted previously, using
comments doesn't violate the spec as some other
suggestions may.
This short function should be easy to understand and
to modify for similar purposes. (Note the insertBefore
workaround, as there is no JS insertAfter method.)
var d = window.document;
insertCommentAtDivCloseTag(d);
function insertCommentAtDivCloseTag(document) {
var d = document;
var divList = d.getElementsByTagName('div');
var div = {};
for (div of divList) {
var parent = div.parentNode;
var newNode = new Comment(' end #' + div.id + ' ');
parent.insertBefore(newNode, div.nextSibling);
}
}
This is the quick and easy one-off solution. If that’s all you need skip the rest...
If WordPress/web development is something you do everyday you may wish to consider exploring some of the following:
Hack WordPress
Again forget about hacking the HtML standard and hack wordpress instead. In fact WordPress is designed to be hacked. Virtually every function WordPress uses in creating a webpage has a hook that you can use to override or alter what it does.
Codex, The Rosetta Stone of WordPress
Find the one stripping out your comments and add a function to turn it off and on.
If it’s been thought of before, there’s already a plugin for it.
WordPress Plugins Home Page
WordPress plugins come and go, some are maintained others not, some are very good, and some are poorly designed, some are just bad. So caveat emptor. With that proviso, I was able find such a plug-in in ten seconds, with one search, on the first try.
Beyond WordPress
For so many reasons, it is beneficial to serve the smallest possible version of your webpage and WordPress may not be the only actor dynamically altering your code or caching older versions.
Your WordPress Installation and Blog Post (database)
↓
WordPress Theme
↓
WordPress Plugins
↓
The HTTP Server, such as Apache and it’s Modules
↓
A Proxy Server such as Nginx
↓
A Hosting Provider
↓
A CDN, Content Delivery Network
↓
(More Network)
↓
Finally My Browser the Client
↑
Also any Caches Maintained by Any of the Above
Finally, if this sort of thing is or is becoming your job, you’ll eventually want to explore specialized IDEs and separate production and development servers.
Accepting that the simple answer is No, my entire HTML life, I've identified closing tags by following with a comment. But long ago, it became impossible to nest comments. So when debugging, it is a royal pain to comment out a <DIV>...</DIV>, because of that identifying comment. Closing the DIV comment this way makes the comment closure hard to spot.
<!--
</DIV>--><!-- END DIV NAMEOFDIV -->
It is better placed on its own line, but this both hard to read and involves too much temporary manipulation...
<!--
</DIV>
-->
<!-- END DIV NAMEOFDIV -->
I'm no expert in such issues, but from this HTML end-user's view it seems absolutely absurd that a closing DIV can't be easily identified.
I will experiment with other kludges, such as adding a useless <i CLOSES NAMEOFDIV></i> tag. Or maybe a fake, meaningless tag? (e.g., <ENDDIV NAMEOFDIV>) (The nondisplayed HR z= trick is neat, but yet another visual confusion.)
We really shouldn't have to. What were the powers that be thinking?
It's a subjective question but don't you think the following HTML syntax would make more sense?
<div #id .class1 .class2><!-- content --></div>
Instead of:
<div id="id" class="class1 class2"><!-- content --></div>
Might be that it makes more sense to someone who authors only HTML and CSS. However, bear in mind that
CSS was invented much later than HTML
HTML is largely backwards-compatible; you can still view current web pages with ancient browsers and there is no need to change that
Your proposed syntax is incompatible with XML. Therefore you're throwing out all XHTML folks
Furthermore, do you want to change other languages too that rely on CSS for styling, e.g. SVG (again, XML, therefore incompatible)?
I agree, for a very narrow purpose, it might be a beneficial change, but when viewing at this from a broader angle, I doubt you'll see much improvement, only pain. You can of course use a preprocessor to write your HTML this way and convert it to the actual thing.
You may also want to take a look at other languages who convert into HTML, such as Haml.
If you are content with just typing something similar to what you have proposed, then Zen-Coding might be an option for you. Quoting:
Zen Coding is an editor plugin for high-speed HTML, XML, XSL (or any other structured code format) coding and editing. The core of this plugin is a powerful abbreviation engine which allows you to expand expressions—similar to CSS selectors—into HTML code. For example:
div#page>div.logo+ul#navigation>li*5>a
... can be expanded into:
<div id="page">
<div class="logo"></div>
<ul id="navigation">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
Not really. Attributes in HTML are general, CSS only builds on top of them. HTML itself has no notion of "ids" or "classes", only attributes.
You might enjoy using HAML (with any of these implementations):
%body
#header
%h1 BoBlog
%h2 Bob's Blog
That might work for the example you provide, but how would you notate the following?
<a id="my-link" href="http://example.com" rel="external" target="_parent" class="complex" title="click here for no good reason">My Link</a>
HTML has specific attribute names so that you can work with key/value pairs (with the possible exception of boolean attributes such as checked). If you take away the keys, the values become ambiguous and it is too hard to see what property should adopt which value.