Related
How can I add accessibility to this
Text:
Buttons and Images and anchors:
<div class="btn-group" role="group">
<button class="btn btn-default">
<img class="profile-img">
<span id="user-name">john</span>
</button>
<button class="btn btn-default">
Log out
<i class="fa fa-sign-out fa-lg"></i>
</button>
</div>
<div>
Change recipient
</div>
Too little information provided. Context needed. That being said:
Add an alt attribute to the <img>,
make sure the link has a valid href,
don't rely on FontAwesome icons to convey critical information,
maybe dump the role attribute as it may not be needed (context necessary to know if needed).
Only you are suited to properly add semantics to your code and content, so we really can't do this for you. But, here are some important things to remember/do/follow:
Your HTML is not event valid, so start by correcting that.
Don't ever use an HTML element because of the way it makes the
visible page look (i.e. using a heading like <h4> to make text
small and bold). CSS should be used for all layout and presentation.
Use the most appropriate HTML elements to convey the semantics of the content you have. For
example, go ahead and use the <table> element if you actually are
trying to display tabular data and use <ul> and <li> to make menus.
Despite the (many) myths, the HTML5 sectioning elements (section,
article, nav, aside) are not recognized by most screen readers. Their use actually makes creating a valid document outline much more difficult.
The proper use of heading (<h1>...<h6>) elements is the best
thing you can do to convey a proper document structure.
Use WAI-ARIA landmark roles where applicable as that has been a
standard for many years and all the major screen readers understand
it.
For images, provide the alt attribute to the <img> tag, which is a description of the image. For example, <img class="profile-img" alt="profile picture">.
For semantics, use <em> instead of <i> and <strong> instead of <b>.
Also, look into ARIA (Accessible Rich Internet Applications). A useful ARIA attribute is the role attribute. It provides extra content about the element's purpose and functionality.
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.
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've tried to search for a subject on this, but I haven't found any, so I thought I'd go ahead.
My question is when it is correct, if anytime, to just put your style directly in your HTML file, instead of using a .css file.
I mean, I get that it is very useful to use your .css file when you have alot of things that needs to be repeated, or is used on several pages.
But in my case, I have one page where I'm about to style something, that I'm pretty sure only will be on that page. This being the width, height, and small stuff for a div.
To show you what I mean, here's the code:
<div style="margin:0px auto; width:600px;">
<div style="float:left">
<p class="InputFieldsText">Brugernavn</p>
<div class="InputFields"><input name="Text1" type="text" class="Medium" placeholder="Din e-mail adresse" /></div>
<p class="InputFieldsUnderText">Glemt dit brugernavn?</p>
<p class="InputFieldsText">Password</p>
<div class="InputFields"><input name="Text1" type="password" class="Medium" /></div>
<p class="InputFieldsUnderText">Glemt dit password?</p>
<input onclick="window.location='user_page.html'" class="LargeIndent" name="Submit1" type="button" value="Log ind" />
</div>
<div style="float:left; width:172px; text-align:center">
<img alt="" height="128" src="images/lock.png" width="128">
</div>
</div>
So, as you can see, in some divs I styled it directly, instead of coming up with a name for my class and put on there.
I know it isn't wrong to do, since it will come out the same if I used it in my .css file and called a class, but is there a "guideline" or something that this and this is not recommended etc. etc.
Hope you understood my question. Really not that big of a deal, I've just always wondered :)
Regards
The answer is pretty simple, IMO: never. :)
You should always use a style sheet, because it allows you to quickly and easily change the entire appearance and layout of your site. If you embed the style information in the HTML directly, you have to work a lot harder if something needs to change; with a style sheet, you simply change the CSS file in a single location, and the change becomes global everywhere that style sheet is used.
It's best not to mix presentation with content. To simplify your CSS there is nothing wrong with using smarter selectors and IDs for elements for which you know there will always be one and only one. You don't have to define classes for every little thing.
In my opinion, inline styles make markup so cluttered, especially with large style declarations which cause line wrapping.
A small block of style inside the HTML page (instead of an external file) might be acceptable in some cases as it reduces the number of requests sent to the server. Server-side processing can be used to accomplish this by reading a separate stylesheet file and injecting the style directly into the page. With this approach, there is a trade-off between page size and the number of HTTP requests.
During development of a page I bung eveything into the same file.
just being lazy - have the stylesheet in the head part.
Then when in production seperate the HTML from the CSS. actually I do that during development when they share common features - a cut and paste job is required.
Never have your style information inline
When working with hierarchical template systems, I sometimes find it convenient to place style definitions in a stylesheet in that template, which ends up being part of the page. If these need to be reused, they can be migrated to a separate stylesheet.
Well, first things first. Styling takes some order of precedence :
inline styling
CSS in HEAD
imported CSS files
That is, if a specific element has some attributes defined in the .css file, then you can definitely override them by using inline CSS (<div style='...'></div>), for example.
Apart from that, I suppose it's merely a matter of taste and of how 'cluttered' (vs 'compartmentalized') you want your code to end up. Don't forget that CSS's main purpose is to separate : LOOK from STRUCTURE.
My GENERAL STRATEGY is :
Use CSS files, for better organization is bigger sites, that may be used an re-used in various files (portability)
Use CSS in HEAD in some "quite" big, but not too big chunks of CSS code, that are page-specific.
Use inline CSS for local modifications only (in REALLY small pages, or for existing specifications that I want to alter on location)...
CONCLUSION :
Anyway, as your main issue is about inline CSS, here's my 2 cents : inline CSS makes the code easily unreadable (at least for my taste), so why do it unless necessary?
You should always use a external .css files, because external style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file!
If you will use inline css rather than external css in HTML pages that will take of much time to edit the changes so should use the external css files for smoother process.
I have been looking at a couple html/css form frameworks like Uni-Form and Formy. They provide easier management of html forms. I was wondering if anyone knows similar ones. I am not looking for css grid frameworks nor Yahoo's YUI.
blueprintCSS has a form plugin (I don't know if it can be used alone, I haven't tried to do that). http://www.blueprintcss.org/
http://www.blueprintcss.org/tests/parts/forms.html
Baseline CSS also has a form system. I haven't personally used it.
just tried formy and uniform..
i want something styled a bit simpler, just to look clean so i can do the rest..
Formalize is another one, quite simple, worth a look.. looked at uniform and jformer and they're both too comprehensive, if that could be used as a reason to ignore them
Formalize
Uniform (different from Uni-Form)
There is also Tacit.
It's a "class-less" CSS framework were you only need a single <link> statement in your HTML and the web page will have a complete look. In particular, for forms, you get a more finished appearance out of the box, just by including the CSS file, and you don't need to attribute specific classes to your form elements. It also guarantees your form will work visually fine both in Desktop and in Mobile.
You can get an overall idea from the demo page.
Here are also a few examples of pages that use Tacit, and the only work put into was including the CSS file: http://filfreire.com/, http://www.jare.io/, https://socatar.com/,
I think uniform is the best solution for forms.
Html is good and understandable, it has a bunch of tricky form examples solved very nicely ad it pays attention to usability much more than other frameworks.
Other seem to insist more on a vertical typographic rythm than common sense and usability. :)
There is also: Formy http://code.google.com/p/formy-css-framework/
I have developer a single class CSS framework just for forms. The class "form" can be added to any form input to style it properly. You can see the examples on the documentation: https://form.js.org
Here an example of mailing list form:
form {
margin: 1rem;
}
<link href="https://cdn.jsdelivr.net/npm/#codolog/form#1.0.0/dist/form.min.css" rel="stylesheet"/>
<form>
<div>
<div>
<input type="email" class="form" placeholder="Enter your email">
</div>
<div>
<button type="button" class="form full">Subscribe</button>
</div>
</div>
<form>