I have a general query regarding name of html elements.
I have seen in the past developers placing an prefixes before the id of their html elements eg for a div element -> dvMyDiv
I have seen a mix of casing when naming elements. Similar to that of assigning name to element classes.
So I am wondering is there any standard or convention to what html elements should be named? What casing? Should they have prefixes etc?
I am working with asp.net web forms, html5, css3 and jquery so would like some form of standard for naming conventions that I can share with other developers.
I agree with consistency - if you already have a convention, then stick to it.
However, if your making a new convention, this kind of Hungarian notation can be a really bad idea because it's not at all DRY. For example, the name of the tag is <div> and then the name of your class again says that it's a div. If you change from using <div>s to <section>s, either your code will be out of date or you'll have to change all the class names as well (possibly in HTML, CSS and JavaScript). Since you can target classes using code like div.classname, it adds absolutely no value.
A better idea is to name things after the type of content they include. For example, in a blog, you might use HTML like this:
<section class="posts">
<article id="post-1" class="post">
<h1>Post Title</h1>
<div class="post-content">
<p>Blah blah blah</p>
<p>Blah blah blah</p>
</div>
<time class="timestamp">17th January 2012</time>
</article>
<article id="post-2" class="post">
<h1>Post Title</h1>
<div class="post-content">
<p>Blah blah blah</p>
<p>Blah blah blah</p>
</div>
<time class="timestamp">18th January 2012</time>
</article>
</section>
<aside class="top-posts block"></aside>
<aside class="contact-form block"></aside>
There is no standard you and your colleagues should decide what format you want to use and stick with it. The prefixes thing is kind of Hungarian notation. But I don't really like it. Just make sure the names are clear and descriptive.
REVISED:
After reading the Wiki article it appears a lot of very well-known developers and Microsoft no longer recommend Hungarian Notation.
I am led to believe that Hungarian notation is a very popular naming convention. Also, I believe that it is the recommended and used convention from Microsoft.
I suppose the most important thing is consistency. You should choose a convention and stick with it.
Definitely not Hungarian notation.
I would recommend using semantic HTML http://en.wikipedia.org/wiki/Semantic_HTML as it makes your HTML code easier to read.
Related
I jus got the following PSD design:
(sorry about the grid line in between , that blue line really is not needed.).
Now i was wondering with all there html5 tags , what would be a great and semantic markup to code the above design , iám usually a guy who goes old school and uses div and spans , but this time i used cite , when i read the MDN doc's there seems to still be no clarity weather a name/designation can be used in cite , basically the way look at cite is , it a tag to be used only when you have a definitive resource to be added to you markup. Even though neither name nor designation is a definitive resource, i came up with the following markup.
<div class="testimonia-details">
<img src="img/res/p1.png" alt="testimonial giver">
<p>
<span>Brian</span>-May 2015
<span>Managing Partner.<cite>Tammy Lenski LLC</cite></span>
</p>
</div>
can anybody tell me what would be a more semantic way to code the testimonial details ? Thank you , i would greatly appreciate any help or guidance, i have always wonder what would be a semantic markup especially for a scenario like above.
Using schema.org metadata
<div class="testimonia-details" itemscope itemtype="http://schema.org/Person">
<img src="img/res/p1.png" alt="testimonial giver" itemprop="image">
<p>
<span itemprop="name">Brian</span>-May 2015
<span itemprop="jobTitle">Managing Partner.<span itemprop="worksFor">Tammy Lenski LLC</span></span>
</p>
</div>
I'm currently building a WebApp with the following structure :
However, I'm not often developping for Web, and I would like to know what HTML tags I should use to enclose the different sections of the app.
Should I use <header> tags for the header bar, <nav> for the menu, <aside> for the notifications and <article> for the body, or something else? (I'd appreciate it too if you can give me some kind of skeleton for this)
I don't think anyone actually does it any standard way, but I really recommend looking into smacss -- scalable and modular architecture for css. https://smacss.com/book/type-layout It's a great philosophy on how to organize and name css/html.
Following smacss, you will divide your content based on header, footer, and article. whereas navigation is a child element of either header or article, so you can either choose to use the tag (if the navigation will remain constant throughout your entire web structure), or if it'll be flexible and changing, you should stick to labeling the navigation a class or id, and not use the tag itself (this is to ensure you can reuse as much css as possible... read the entire smacss article for more on reusing css and further reading on oocss -- object oriented css)
Yes, I believe you are on the right track.
Personally, I'd use
<header id="site-header">
<nav id="menu">
<section id="main">
<aside id="notifications">
While your use of article is not wrong for sectioning, I like to think of layout as the division of a page into sections. And then, within the main section, there may be many articles - possibly with their own headers, footers, sections etc.
I also like to use ids for each important part of the page - on top of making the content semantics even clearer, id also makes it much easier (and faster) to find and select them using JavaScript.
Just a minor note: I'd avoid calling the main content section "body" simply for the reason that it can be confused with the <body> tag.
Just use them like you have listed above. It's worth just referring to this handy guide to ensure your chosen tags work cross browser (See and for an example).
There is no wrong or right answer.
The use of the HTML5 tags such as header,nav,footer,aside,section can help you and other developers better understand your structure .Here is sample . you can go to the link to see how it is used !
<!DOCTYPE html>
<html>
<head>
<title>Title of the page</title>
</head>
<body>
<header>
<h1>Here is <span>HTML5</span> Page</h1>
</header>
<nav>
<header>
Navigation menu
</header>
<ul>
<li><span>Blog</span></li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<section>
<header>
<h1>Blog posts for April 2012</h1>
</header>
<article>
<header>
<h1>Information about this example</h1>
This example is a modified version of http://netstream.ru/htmlsamples/html5-blog/index.html
</header>
<p>Try to move the mouse on different elements. The structure will be highlighted and you will be able to see the different inclusions of elements one in each other. If you move the cursor to this sentence, it will be highlighted in dark grey, showing the presence of an <article> element, surrounded by a <section> element (light grey), etc. So we have some articles in a single section element. The page title at the top is a <header> element, while the tag cloud on the right is a <aside> element. The main menu on top (with Blog, About, Contact) is a <nav> element.</p>
<figure>
<img src="http://www.fredcavazza.net/files/2009/09/html5_structure.png" alt="Example of HTML5 structuring tags" />
<figcaption>
Fig. 1 : an example of how new structuring elements could be used. This page put a <nav> on top, and does not have headers and footer for each article, like in this figure, but it could... By the way, this is a <figcaption> inside a <figure> element...
</figcaption>
</figure>
</article>
<article>
<header>
<h1>History</h1>
</header>
<p>Work on HTML 5 originally started in late 2003, as a proof of concept to show that it was possible to extend HTML 4's forms to provide many of the features that XForms 1.0 introduced, without requiring browsers to implement rendering engines that were incompatible with existing HTML Web pages. At this early stage, while the draft was already publicly available, and input was already being solicited from all sources, the specification was only under Opera Software's copyright.</p>
<p>In early 2004, some of the principles that underlie this effort, as well as an early draft proposal covering just forms-related features, were presented to the W3C jointly by Mozilla and Opera at a workshop discussing the future of Web Applications on the Web. The proposal was rejected on the grounds that the proposal conflicted with the previously chosen direction for the Web's evolution.</p>
<p>Shortly thereafter, Apple, Mozilla, and Opera jointly announced their intent to continue working on the effort. A public mailing list was created, and the drafts were moved to the WHATWG site. The copyright was subsequently amended to be jointly owned by all three vendors, and to allow reuse of the specifications.</p>
<p>In 2006, the W3C expressed interest in the specification, and created a working group chartered to work with the WHATWG on the development of the HTML 5 specifications. The working group opened in 2007. Apple, Mozilla, and Opera allowed the W3C to publish the specifications under the W3C copyright, while keeping versions with the less restrictive license on the WHATWG site.</p>
<p>Since then, both groups have been working together.</p>
</article>
<article>
<header>
<h1>HTML vs XHTML</h1>
</header>
<p>This specification defines an abstract language for describing documents and applications, and some APIs for interacting with in-memory representations of resources that use this language.</p>
<p>The in-memory representation is known as DOM5 HTML , or the DOM for short.</p>
<p>There are various concrete syntaxes that can be used to transmit resources that use this abstract language, two of which are defined in this specification.</p>
<p>The first such concrete syntax is HTML5 . This is the format recommended for most authors. It is compatible with most legacy Web browsers. If a document is transmitted with the MIME type text/html, then it will be processed as an HTML5 document by Web browsers.</p>
<p>The second concrete syntax uses XML, and is known as XHTML5 . When a document is transmitted with an XML MIME type, such as application/xhtml+xml, then it is processed by an XML processor by Web browsers, and treated as an XHTML5 document. Authors are reminded that the processing for XML and HTML differs; in particular, even minor syntax errors will prevent an XML document from being rendered fully, whereas they would be ignored in the HTML5 syntax.</p>
<p>The DOM5 HTML , HTML5 , and XHTML5 representations cannot all represent the same content. For example, namespaces cannot be represented using HTML5 , but they are supported in DOM5 HTML and XHTML5 . Similarly, documents that use the noscript feature can be represented using HTML5 , but cannot be represented with XHTML5 and DOM5 HTML . Comments that contain the string -> can be represented in DOM5 HTML but not in HTML5 and XHTML5 . And so forth.</p>
</article>
</section>
<aside>
<h1>Tag cloud</h1>
<ul class="tag-cloud">
<li>ajax</li>
<li>apple</li>
<li>css</li>
<li>firefox</li>
<li>google</li>
<li>html</li>
<li>internet explorer</li>
<li>iphone</li>
<li>css3</li>
<li>ipod</li>
<li>javascript</li>
<li>jquery</li>
<li>mac</li>
<li>opera</li>
<li>rss</li>
<li>html5</li>
<li>web</li>
<li>web 2.0</li>
<li>web-??????????</li>
<li>windows</li>
<li>yahoo</li>
<li>youtube</li>
</ul>
</aside>
<footer>
<p>© 2009 Some blog</p>
</footer>
</body>
</html>
Having seen the source of one of the Bootstrap Expo sites Tsaa Tea Shop I wonder if what they have done, adding semantic HTML5 tags in between BS classes, would give the site a better semantic value?
Considering they use the section element quite a bit, can this be seen as an accepted and good use of HTML5 tags/elements alongside BS?
Here a short excerpt:
<section class="about-us block">
<div class="container">
<div class="row">
<div class="col-md-8 text-center">
<h2 class="section-title">Welcome</h2>
<span class="fa fa-leaf"></span>
</div>
</div>
</div>
</section>
<section class="quote block">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>"We loved our relaxing time with great food and beverages..."</h2>
</div>
</div>
</div>
</section>
At the moment I am starting work on a smaller project and have something along the line of a simple one-page layout in mind.
Would it do any good in consideration of semantics to follow this approach?
The Bootstrap is unsemantic by default
Twitter Bootstrap is one of the most unsemantic frameworks on the market. If you put to your code classes like container, form-control or col-sm-2 you just can't be semantic.
But sometimes you don't want to be. You want to be readable, practical and maintainable — and that's why it is made for and it's great in it.
HTML5 tags
Yes, yes. We have all these new, sexy, useful, years-needed HTML5 tags like: article, section, nav, main, header, footer or details… But let's face truth — the section sucks almost as much as usuall div.
Semantic of the section is almost zero. God - it's a tag with display:block that is called "section". The biggest (and maybe only) advantage of it is improving of readability, not the semantics. And that's enough.
Why to still use the new HTML tags
Because:
It's more readable.
It's easier to debug.
It's more modern.
It's a bit more meaningful and consequential.
So, if you face the decision — to use or not to use HTML5 tags, do anything, but do not continue in this div-cancer-that-is-the-web-built-on.
… even minified version of new tags is more readable:
<article><section></section><section></section><aside></aside></article>
<div><div></div><div></div><div></div></div>
In my page i need to list last news with title only. I have two methods:
One:
<div>
<p>Title One</p>
<p>Title Two</p>
<p>Title Three</p>
<p>Title .....</p>
<p>Title .....</p>
<p>Title .....</p>
</div>
Two:
<div>
<ul>
<li>TTILE ONE </li>
<li>TTILE Two </li>
<li>TTILE THree</li>
<li>TTILE .....</li>
</ul>
</div>
In HTML5 which way is better and readable?! with <p></p> Or <ul><li>?!
Neither is better in terms of how html can be read. However it is considered a list, and so your question can be answered by means of using <li>
You have there a list of news, so the correct one is UL.
The first option, using paragraphs is bad, because... Do you thing titles are paragraphs? I think title != paragraph, so uou can't use <p> tag.
Using an unordered list, <ul>, would be more semantically correct than using a paragraph, <p>.
Obviously either one could be used, so semantics may feel like a 6 vs half dozen sort of thing, but in the long run using the correct tags will make your job easier.
The <p> will come with native styles, i.e. margins and so on, that will need to be removed in your css if you intend you use them this way. While <ul> and <li> will probably only need to have bullet points accounted for.
Also not everyone experiences the web in the same way, try to keep in mind that screen readers will take markup into account when reading pages to the visually impaired.
In more extreme cases semantics can even effect your search engine optimization (SEO). Google, for instance, may grab your first paragraph and use it as a part of your site description.
Since I couldn't find anything on yui3 documentation, I kindly ask your opinion on below. What is the best practice and why?
<div class="yui3-u-1-3" id="logo">
... content
</div>
or
<div class="yui3-u-1-3">
<div id="logo">
..... content
</div>
</div>
Regards,
Castle
I consider best practice to use ID's on the purely layout specific HTML.
eg.
#outer-container
#wrapper
#sidebar
Having said that if there is any chance, even a remote one that you may have multiple instances of these in your page, then play safe and use classes.
There are some performance benefits (although it's almost negligible now, with faster browser rendering engines and speeds):
ID selectors are slightly faster in your CSS
ID selectors are more efficient as hooks using JS
Read this great section from Jonathan Snook's SMACSS e-book: https://smacss.com/book/type-layout
I would rather use CLASS over ID until something explicit, have been using yui3 grid since last 2 years for now. so far going great..
<div class="yui3-u-1-3 logo">
content
</div>
or
<div class="yui3-u-1-3">
<h5 class="logo">logo goes here</h5>
</div>