A few months ago I wrote about why good markup matters. As a front-end developer, I interact with Drupal’s markup on a daily basis and I experience first-hand the benefits of good markup and the frustration of poor markup. A lot of the content on a Drupal website is produced by views. Whether they are out of the box or custom views, they are powerful and present us with great opportunities to manipulate the content and markup. Today I will walk you through a simple example on producing cleaner and semantic markup using views.
Creating a new view
We will create a simple block listing the top ten articles in our website. For this example we will be working with a vanilla installation of Drupal 7. If you haven't already, download and enable the Views and CTools modules.
- Go to the Views page (/admin/structure/views)
- Click Add new view
- Name your view Top Ten Articles
- Show: Content of type All sorted by Newest first
- Skip creating a page and instead create a block
- To start we are going to use Drupal's Unformatted display format
- Select titles (linked) as the items we will be displaying
- For this example display 10 items and do not use a pager
- Click Save & Exit. Your settings shoudl look like the image below:
Display the top ten articles block on homepage
Now that our view and block are done we can can display it on the right sidebar of our homepage.
- Go to the block administration page (/admin/structure/block)
- In the block administration page, locate the newly created top ten block (should be under the disabled section), and click on Configure next to the block
- Block title should be Top Ten Articles or Latest Articles
- Under Region Settings, choose Sidebar Second. Be sure you do this for your site’s default theme (in this example, Bartik).
- Scroll down to the visibility Settings and under the Pages tab select Only the listed pages
- Type <front> in the textarea field to display the block on the homepage only
- Click Save Block. Your Block settings should look like the image below:
Navigate to the homepage and you should see your new block. Your homepage should look similar to the image below:
Inspecting the code in our top ten articles list
The list looks nice, our articles are nicely organized. Let’s take a look at how things look under the hood.
In Chrome, right-click on your block and select Inspect Element. Here’s is an example of the markup:
<h2>Top Ten Articles</h2> <div class="view view-top-ten-articles view-id-top_ten_articles view-display-id-block view-dom-id-3ece7eaa1f62b5054cafa1b4431a52"> <div class="view-content"> <div class="views-row views-row-1 views-row-odd views-row-first"> <div class="views-field views-field-title"> <span class="field-content"> <a href="/node/3">First article title here</a></span> </div> </div> <div class="views-row views-row-2 views-row-even"></div> <div class="views-row views-row-3 views-row-odd"></div> <div class="views-row views-row-4 views-row-even"></div> <div class="views-row views-row-5 views-row-odd"></div>
As you can see from the example above, something as simple as a list of items produces additional markup that frankly it is not necessary. In addition, the default CSS classes applied by Drupal could also be improved. Ideally we would like the list to be formatted as an unordered list with only the necessary markup.
Let’s clean up our view and apply semantic CSS classes
Let’s take a look at how we can clean up our list and also provide semantic CSS classes that will make our theming process much easier.
- First let’s go back to our view (/admin/structure/views) and edit the Top Ten Articles view
- Under Format change from Unformatted List to HTML List and apply your changes
- Next to “HTML List”, click Settings
- Under Row Class, type top-ten-article (lowercase and hyphen separated). This will be the class applied to each list item on the list.
- Be sure Add view row classes and Add stripping (odd/even), first/last classes checkboxes are NOT checked. By doing this we are removing the default classes added by Drupal.
- List type should be Unordered list
- Under Wrapper class, type top-ten-articles-wrapper (lowercase as well). This will be the class added to the wrapper of our entire list
- Under List class type top-ten-list. This class will be applied to the list itself (<ul class=”top-ten-list”>..</ul>)
- Click on Apply (All Display). Your list settings screens should look like image below:
<insert screenshot list-classes.png here>
Notice I have opted to not add views row and odd/even classes. This is completely optional and in some instances these classes could be helpful. I added my own custom/semantic CSS classes to rows, list wrapper and the list itself.
We are halfway there, let’s make one additional change. - Still within the Format section, next to Fields, click Settings
- Clear the Provide default field wrapper elements and hide empty fields checkboxes. Not adding default field wrappers will remove unnecessary div wrappers from our fields resulting in cleaner markup. Your field settings screen should look like the image below:
Giving our view a unique identity
A couple of other changes I usually make to views are assigning the view a unique CSS class and custom machine name.
- While still in the view, expand the Advanced settings fieldset and make the following changes:
- For Machine Name, type top_ten_articles_block: This gives your block a friendly machine name. Be sure to use lowercase and underscores.
- For CSS Class, type top-ten-articles-view: This gives our view a semantic and unique CSS class which can be targeted in our stylesheet for easier theming. Use lowercase and hyphen-separated. Your screen should look like the image below:
<insert screenshot advanced-settings.png here>
A custom CSS class to the entire view can be very handy when theming as this could help you remove unnecessary nesting in your rules.
Note: Notice the machine name string uses underscores(_) as this is only for machine purposes. The machine name settings is purely optional but it may come in handy when writing custom code. - Save your changes to the view.
Looking at our final result
After saving all your view changes, navigate back to the homepage and take a look at your new Top Ten Articles block.
Visually the list doesn’t look much different than the original with the exception of the bullets on each item. Personally I think lists should be formatted as <ul> or <ol>. It’s a good practice for visual reason as well as SEO and even accessibility.
One final code inspection
In Chrome, right-click on your block and select Inspect Element. Here’s is an example of the markup:
<h2>Top Ten Articles</h2> <div class="view view-top-ten-articles view-id-top_ten_articles view-display-id-block view-dom-id-3b8e4cdb3ad24c3b33120b45e62a533a"> <div class="view-content"> <div class="top-ten-articles-wrapper"> <ul class="top-ten-list"> <li class="top-ten-article"> <a href="/node/3">First article title here</a> <li> <li class="top-ten-article">...</li> <li class="top-ten-article">...</li> <li class="top-ten-article">...</li> <li class="top-ten-article">...</li>
We were able to eliminate the extra wrappers on each article title as well as wrappers around the entire list. In addition, we now have quite a few custom/unique CSS classes we can use to better target our view when theming. We could actually take this further by editing the view’s tpl.php template being used, but we can do that in a future post.
By using semantic CSS classes we can theme our view without specificity of selectors inheritance, this means we can write more modular CSS to make components reusable if needed.
Other benefits as I indicated below are SEO, content that is better formatted based on the type of content is well received by search engines. and last but not least, accessibility. Screen readers will be able to easily read through a list that is perfectly formatted with only the necessary amount of markup than a river of divs with absolutely no meaning.
Stay tuned for the next article of this series where we will bend views to our will by writing our own custom markup.