Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Jason Miller
Jason Miller
11,311 Points

Advice On HTML Markup

I am creating a small HTML5 web application for uni and I am having conflicting views on the way in which I should mark up this content. The app is a small to do list that allows you to organise your week. It is a single page application which relies on JavaScript in order for the application to function.

Organise App

As you can see from the interface I have created, there are seven boxes. Each of these contain the start letter for each of the days of the week. Since this acts as a navigation sort of, I have marked it up as follows:

<header>
         <h1>Organise</h1>
              <p>Organise is a small to-do list application designed <br>to help you organise &amp; prioritise your week.</p>
              <nav>
                   <ul>
                        <li><a href="#" title="Monday">M</a></li>
                        <li><a href="#" title="Tuesday">T</a></li>
                        <li><a href="#" title="Wednesday">W</a></li>
                        <li><a href="#" title="Thursday">T</a></li>
                        <li><a href="#" title="Friday">F</a></li>
                        <li><a href="#" title="Saturday">S</a></li>
                        <li><a href="#" title="Sunday">S</a></li>
               </ul>
           </nav>
</header>

But these anchor elements merely act as a way to hide and show an unordered list for the tasks pertaining to that particular day. Not as a way to link to another page or to a particular section of a page. So I also think that the following mark up may be more semantic:

<header>
         <h1>Organise</h1>
              <p>Organise is a small to-do list application designed <br>to help you organise &amp; prioritise your week.</p>
              <ul>
                   <li><button title="Monday">M</button></li>
                   <li><button title="Tuesday">T</button></li>
                   <li><button title="Wednesday">W</button></li>
                   <li><button title="Thursday">T</button></li>
                   <li><button title="Friday">F</button></li>
                   <li><button title="Saturday">S</button></li>
                   <li><button title="Sunday">S</button></li>
              </ul>
</header>

Any feedback would be highly appreciated.

6 Answers

Abdillah Hasny
Abdillah Hasny
10,633 Points
Abdillah Hasny
Abdillah Hasny
10,633 Points

what the the better :/ i not know too :D waiting other

Herbert Rosales
Herbert Rosales
5,141 Points
Herbert Rosales
Herbert Rosales
5,141 Points

What do you think about doing it this way, it's just an anchor tag within the same page. I hope this help...

<header> <li><a href="#monday" title="Monday">M</a></li> </header>

<div id="days">

<div id="monday"> <p>To do list for Monday</p> </div>

</div>

james lennon
james lennon
1,792 Points
james lennon
james lennon
1,792 Points

I may be wrong but I think 'button' is mainly used in forms. But with that said you could say your to-do list is a form of sorts.

Mostafa M.
Mostafa M.
4,862 Points
Mostafa M.
Mostafa M.
4,862 Points

You better stick with anchor tags, buttons are mainly used in forms. But at the end it's up to you.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

I'm going to have to disagree with buttons used on of forms idea here.

http://css-tricks.com/when-and-when-not-to-use-an-anchor-tag/

Jason Miller
Jason Miller
11,311 Points

Hi James, I was having a read at this earlier today and it seems there is a lot of conflicting views on the subject in the comments. I think an unordered list of buttons or just divs may be more suitable for this situation. What would you say?

James Nelson
James Nelson
23,956 Points
James Nelson
James Nelson
23,956 Points

Hey Jason Miller ( hope I have tagged the right Jason). Just out of curiosity, what did you end up going with? I think I would of went with the div approach, the button approach would be the least semantic as the button is a form control!

If you are worried about accessibility you could of looked into ARIA to help explain its role to users of screen readers