So I'm trying to build a nice page for a blog, but the challenge is I want it to be the most proper HTML5 compliant and mobile/seo friendly.
I have made what I believe to be a proper HTML5 page that looks like this :
<!-- Header -->
<header>
<h1>Title of the page</h1>
<h2>Subtitle of the page</h2>
<!-- nav -->
<nav>
<ul>
<li>Page one</li>
<li>Page two 2</li>
<li>Page three 3</li>
<li>Page four 4</li>
</ul>
</nav>
</header>
<!-- last articles -->
<section>
<article>
<header>
<h2>Article title</h2>
</header>
Content of the article.
<aside>
Related post or other links.
</aside>
<footer>
Read the full article.
<ul>
<li>Share on Facebook</li>
<li>Tweet it</li>
</ul>
</footer>
</article>
<article>
<header>
<h2>Article title</h2>
</header>
Content of the article.
<aside>
Related post or other links.
</aside>
<footer>
Read the full article.
<ul>
<li>Share on Facebook</li>
<li>Tweet it</li>
</ul>
</footer>
</article>
</section>
<!-- sidebar -->
<aside>
<h2>Sidebar</h2>
<h3>Social media</h3>
<ul>
<li>Facebook account</li>
<li>Twitter account</li>
<li>Github account</li>
</ul>
<h3>Last comments</h3>
<nav>
<ul>
<li>Comment 1</li>
<li>Comment 2</li>
<li>Comment 3</li>
</ul>
</nav>
</aside>
<!-- footer -->
<footer>
© 1264-2016 - Handsome coder (me) industry
</footer>
I don't know about you but I think it looks like a proper semantic use of HTML5 tags.
Now I want it to be responsive and two options are presented.
I do all the css by myself (maybe using normalize.css to prevent weird stuff from happening on some browsers.)
I use a lightweight framework, for example Skeleton.
Both would mean the use of classes but also of probably the use of div tags to wrap certain parts of the pages and I'm not sure it is how I should do it...
I'm trying to avoid the over use of div tags, especially the nested div that look like ol' of ten years ago.
I tried to use the HTML5 Boilerplate, but I just looked at the source code of their main page which is quite simple in appearance and I found div in div in div in div in div. I mean, what the hell ?
So what do you think I should do to build responsive proper and semantic HTML5 pages ? Do you have any example ?
Thank you for reading me.
Have a nice day.
As far as I understood, you want a way to build simple, semantic, lightweight pages (which should be the aim of us all).
Adding / nesting divs is not a crime. A div by itself is just a blank container which holds very little relevance to the overall HTML document structure, you can use as much divs as you like. Focus on learning HTML/5 Semantics and learning how to combine the new tags so that your page can be easy to read and describe (by the bots).
Example of a well structured simple page. (Google images)
Concerning grid systems - My advice is to learn SASS and combine it with Bourbon.io's grid system called Neat. It is pretty straightforward and easy to understand/implement. The grid alignment is sorted in a super-simple manner which gets your code down to something like:
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.
My bootstrap subnav does not look the same as the one on the demo site. Here's my markup:
<div class="subnav">
<ul class="nav nav-pills">
<li>Modal</li>
<li>Tabs</li>
<li>Accordion</li>
<li>Other</li>
</ul>
</div>
and an image of what I am seeing:
and here is what I am trying to replicate:
I tried copying the markup exactly, but to no avail. I wondered if maybe it had something to do with the parent elements being different.. so I moved mine into a "container-fluid" classed div, but that didn't help. Maybe someone here can spot something my eye missed..
This is because the style is not included in bootstrap. You can grab the docs.css from their markup and reference that. That seems to be the CSS that is giving the sub-nav the styling you are looking for.
i.e.
In Drupal6, I basically have a block (a hierarchical menu structure) that turns out like this in HTML:
<div class="block block-menu_block" id="block-menu_block-1">
<div class="content">
<div class="menu-block-1 menu-name-menu-navigation parent-mlid-0 menu-level-1">
<ul class="menu">
<li class="leaf first menu-mlid-248 active active-trail"><a class="active-trail active" title="" href="/">Start</a></li>
<li class="expanded menu-mlid-249 active"><a class="active" title="" href="/">Aktuell</a>
<ul class="menu">
<li class="leaf first menu-mlid-259">
<a title="News und Presse" href="/news-und-presse">News and Press</a>
</li>...
What I would like to get is actually a lot simpler:
<div id="topmenu">
<ul class="one">
<li>some main entry
<ul>
<li>
some sub entry ...
or maybe:
<div id="topmenu">
<h2>some main entry</h2>
<h3>some sub entry</h3>
<h3>another sub entry</h3>
<h2>another main entry</h2>
So, keeping the structure, but being able to use simpler, even completely different tags, if and when needed. I think I understand from the drupal docs, that I am (maybe) looking at
<div class="block block-menu_block"
id="block-menu_block-1"
==> module := menu_block
delta := 1 (?)
regrettably, none of the suggested
block-[module]-[delta].tpl.php
block-[module].tpl.php
block-[region].tpl.php
placed next to page.tpl.php (yes, I did clear the cache), has any impact. Even with just a big, shiny HELLO WORLD inside... no luck...
What do I need to override and how? (ideally some sort of recursive function?)
Thank you!
You can control all html output by overriding theme functions and templates in your own custom theme. Read the documentation to learn how: http://drupal.org/node/341628.
That said: if this really bothers you about Drupal, you may want to save yourself a headache and choose a different CMS/framework. Drupal is designed to produce generic html with enough divs and classes for 95% of the use cases. Clean and minimal html can be accomplished, but it can take a lot of time.
you can install the devel and the theme developer module. then you cativate theme developer and in the bottom left corner you can switch it on. after pointing on your block you get much information which templates are userd or if it's functions who generate the code, which functions to use for naming the overwrite.
In my head, I've always known to use classes over inline styles for any project. But are there any effective differences between the two?
First of all:
If the HTML is built or generated independent of the overall site design (e.g. shared template code), then add reasonably-named classes and IDs, linked exclusively to external stylesheet(s). Use sufficient elements to allow for arbitrary CSS manipulation. For example, see the CSS Zen Garden. This applies to ALL CMSes, programs, scripts, and other dynamically-generated site content. The HTML output must contain absolutely no styling or layout of any sort at all. No exceptions.
Assuming you're dealing with static content, then:
If there's any way you can reuse the style, make it a class and link to a stylesheet.
If there's no way would ever reuse the style (it's a one-off thing that doesn't make sense anywhere else) then use a <style> block that references the element's #id.
If the CSS attribute only makes sense in the context of the surrounding HTML (e.g. some usages of clear:) then I inline the style into the element.
A lot of people call this heresy, just like a lot of people denounce any use of goto in modern programming languages.
However, rather than subscribing to stylistic dogma, my view is you should choose the method based on your circumstances that decreases your overall workload the most. Stylesheets add a level of indirection that makes site-level changes easy and helps build consistency. But if you have several dozen classes on each page that are only used in one place, then you're actually increasing your workload, not decreasing it.
In other words, don't do something dumb and confusing just because people tell you it's the right way to do it.
There is a simple reason. The point of CSS is to separate the content (HTML) from the presentation (CSS). It's all about accessibility and code reuse.
If the choice was there, my first preference will be classes/other selectors. However, there are situations where inline styles are the only way to go. In other situations, just a CSS class by itself requires too much work, and other types of CSS selectors make more sense there.
Suppose you had to zebra stripe a given list or table. Instead of applying a particular class to each alternate element or row, you could simply use selectors to do the job. That will keep the code simple, but it won't be using CSS classes. To illustrate the three ways:
Using only class
.alternate {
background-color: #CCC;
}
<ul>
<li>first</li>
<li class="alternate">second</li>
<li>third</li>
<li class="alternate">fourth</li>
</ul>
Using class + structural selectors
.striped :nth-child(2n) {
background-color: #CCC;
}
<ul class="striped">
<li>first</li>
<li>second</li>
<li>third</li>
<li>fourth</li>
</ul>
Using inline styles
<ul>
<li>first</li>
<li style="background-color: #CCC">second</li>
<li>third</li>
<li style="background-color: #CCC">fourth</li>
</ul>
The second way looks the most portable and encapsulated to me. To add or remove stripes from any given container element, simply add or remove the striped class.
However, there are cases where inline styles not only make sense, but are the only way to go. When the set of possible values is huge, it will be stupid to try to make classes in advance for each possible state. For example, a UI that allows the user to dynamically place certain items anywhere on the screen by dragging. The item will have to be positioned absolutely or relatively with actual coordinates such as:
<div style="position: absolute; top: 20px; left: 49px;">..</div>
Surely, we could use classes for each possible position the div can take, but that's not recommended. And one can easily see why:
.pos_20_49 {
top: 20px;
left: 49px;
}
.pos_20_50 {
top: 20px;
left: 50px;
}
// keep going for a million such classes if the container size is 1000x1000 px
<div class="pos_20_49">..</div>
Use common sense.
Everyone knows that presentation and content should, in an ideal world, be separated. Everyone also knows that this doesn't work very well a lot of the time. We all know that you're supposed to use divs rather than tables for layout, but we also know that for any circumstance where you don't have full control over the content it just doesn't work properly.
Downloading a 500k style sheet to style one element because you've taken every possible style and stuck it in a style sheet will kill your page, downloading 500 smaller style sheets to style your page because you need them all will also kill your page.
Reuse is great in concept, but the reality is that it's only useful in certain contexts. This applies equally to pretty much anywhere the concept exists. If your project does what you want it to do, does so in every reasonable browser, does so in an efficient way, and does so reliably, then you're good to go, it's not dramatically harder to refactor css than is is code.
I can't think of any pros for inline styles.
CSS is all about Progressive Enhancement, and not repeating yourself (DRY).
With stylesheets, Changing the look becomes as easy as changing one line in the HTML code. Make a mistake or the client doesn't like the change? revert to the old stylesheet.
Other advantages:
Your site can automagically adjust to different media, such as for printout and for hand-held devices.
Conditionally-included CSS fixes, for that gawd-awful browser-that-shall-not-be-named, become a snap.
Your users can easily customize the site with plugins like Stylish.
You can more easily reuse or share code from site to site.
I can think of only two situations where inline styles are appropriate and/or reasonable.
If inline styles are programmatically applied. For example, showing and hiding elements with JavaScript, or applying content specific styles when rendering a page (see #2).
If inline styles complete a class definition for a single element in cases where id's are neither appropriate or reasonable. For example, setting the background-image of a element for a single image in a gallery:
HTML
<div id="gallery">
<div class="image" style="background-image:url(...)">...</div>
<div class="image" style="background-image:url(...)">...</div>
<div class="image" style="background-image:url(...)">...</div>
</div>
CSS
#gallery .image {
background: none center center;
}
With the addition of Custom properties to CSS, now there's another use case. One might want to use inline style to set custom properties.
For e.g. below i am using CSS grid to align HTML Lists and Div blocks and i wish to have flexibility in the HTML (Just the way BootStrap or any other framework provides) as this HTML is dynamically generated by application.
CSS :
:root{
--grid-col : 12;
--grid-col-gap:1em;
--grid-row-gap:1em;
--grid-col-span:1;
--grid-row-span:1;
--grid-cell-bg:lightgray;
}
.grid{
display: grid;
grid-template-columns: repeat(var(--grid-col), 1fr);
column-gap: var(--grid-col-gap);
row-gap: var(--grid-row-gap);
}
.grid-item{
grid-column-end: span var(--grid-col-span);
grid-row-end: span var(--grid-row-span);
background: var(--grid-cell-bg);
}
HTML :
<ul class="grid" style="--grid-col:4">
<li class="grid-item">Item 1</li>
<li class="grid-item">Item 2</li>
<li class="grid-item">Item 3</li>
<li class="grid-item">Item 4</li>
<li class="grid-item">Item 5</li>
<li class="grid-item">Item 6</li>
<li class="grid-item">Item 7</li>
<li class="grid-item">Item 8</li>
</ul>
In the above HTML to change the four columns to 3 i change the custom property using style attribute :
<ul class="grid" style="--grid-col:3">
<li class="grid-item">Item 1</li>
<li class="grid-item">Item 2</li>
<li class="grid-item">Item 3</li>
<li class="grid-item">Item 4</li>
<li class="grid-item">Item 5</li>
<li class="grid-item">Item 6</li>
<li class="grid-item">Item 7</li>
<li class="grid-item">Item 8</li>
</ul>
You can check the extended live example at https://codepen.io/anon/pen/KJWoqw
Assuming that you are using external stylesheets, an additional benefit on top of those previously mentioned is caching. The browser will download and cache your stylesheet once, and then use the local copy each additional time it is referenced. This allows your markup to be more compact. Less markup to transfer and parse means a more responsive feel and better experience for your users.
Classes are the re-usable styles that can be added to HTML elements. e.g-
<style>
.blue-text{color:Blue;}
</style>
you can use and re-use this blue-text class to any HTML element
Note that in your CSS style element, classes should start with a period. In your HTML elements' class declarations, classes shouldn't start with a period.
whereas inline style are like e.g-
<p style="color:Blue;">---</p>
So the difference between both is you can re-use classes whereas you can't re-use inline styles.
Inline Styles are definitely the way to go. Just look at http://www.csszengarden.com/ - that would never have been possible with classes and external style sheets...
or wait...