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.
Related
I have this code in my page. I find it very long to write all of these tags in order to write a few words. Is there any other way to shorten it to a simple tag, while keeping the div, ul, and li activated?
<div class="code">
<ul class="codeline">
<li>print(a)</li>
</ul>
</div>
Much thanks!
HTML provides no such functionality. You need to find or write a tool.
There are many editors which will expand shortcodes into larger snippets of HTML. There are many template libraries you could use with many programming languages.
I've noticed that the webpage for html/css has this ... and id=menu / content / footer.
I am wondering if there are any others? Also, if there are, which ones do they have?
Can i create some on my own? if possible, how?
You can create any id name you like.
These
<div id="name"></div>
<div id="menu"></div>
<div id='content'></div>
<div id='this-is-a-div'></div>
are all possible id names.
ids are used to uniquely identify a tag/element. An example might be a boy named Tom. The div in this case would be that he's human, the id "Tom", and a possible class "boy". A class is used to describe multiple properties of an object (much like ids are), however you can apply them to multiple tags/elements.
As suggested by others, you can use data-* (where * is anything you like) to also identify multiple elements at once. You can read more on the data-* feature here
If you're looking to create different div elements (or tags), its strongly recommended not to. You can see a full list of all HTML5 tags/elements on Mozilla's Developer website.
You can use any name id. Then if you want to design, the assignment of names to id's, you can use it in css.
The id attribute is like a name for that element. Instead of using id, use class for styling purposes, and html5 data-somevalue attribute for javascript hooks.
You can create of your own by calling them data-*, * being what you want.
If you are using jQuery, you can get what is in this parameter using .data() : http://api.jquery.com/data/
You can find the paremeters you can set by tag in http://www.w3schools.com/tags/. As you can see there is a lot, but you probalby won't have to use them all.
The id attribute specifies a unique identifier for an element, and it is something that the author of an HTML document chooses. No value has any predefined meaning. The formal rules vary by HTML version, but the only real restriction in browsers is that the id attribute value must be nonempty and must not contain space characters. Otherwise, it’s all up to you.
If you have noticed that values like menu, content, footer are frequently used, it’s just because authors have made similar decisions, reflecting some common constituents of web pages.
You can use any id you'd like, on any tag element. The attribute id is a GLOBAL attribute. This means that all HTML tags supports the attribute id.
For HTML, ID's are case insensitive. That might not be the case for JavaScript or other languages.
ID's have some limitations as far as what characters you can use:
Must contain at least one character
Must not contain any space characters
Documentation:
http://www.w3schools.com/tags/ref_standardattributes.asp
http://www.w3schools.com/tags/att_global_id.asp
On a quick note, it is best to use the new HTML5 tags (<header>, <nav>, <main>, <section>, <article>, <aside>, <footer>) to divide/organize your web page, instead of just <div>:
<!DOCTYPE html>
<html>
<head>
...head content
</head>
<body>
<header>
...header content
</header>
<nav>
...nav menu
</nav>
<main>
<section id="news">
<article id="who-let-the-dog-out">
...article content
</article>
<article id="LottoSurprice">
...article content
</article>
</section>
<section id="blog">
...section content
</section>
<aside id="advertisement">
...aside content
</aside>
</main> <!-- end of page content -->
<footer>
...footer content
</footer>
</body>
</html>
As you can see with this example, it makes much more sense. It's easier to read and debug. It's the new HTML5 goodness. Much better than <div id="menu">, <div id="content">, <div id="footer">
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 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'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.