I have an Events page on my site that simply lists a bunch of upcoming events. The button would just link out to an external website. The design/content will look something like this:
How would I go about making this semantic?
Currently, I'm doing something like this:
<ul class="events__list">
<li class="event">
<h3 class="event__name">Event Title</h3>
<time class="event__date">April 21-23, 2017</time>
<p class="event__venue">Venue Location Name</p>
<p class="event__address">123 Fourth St
<br>City, STATE 01234
</p>
Visit Website
</li>
<li>
...
</li>
...
</ul>
Would this be a case where using <address> makes sense if I were to replace the <li>s with <article>s. So something like this:
<div class="events__list">
<article class="event">
<h3 class="event__name">Event Title</h3>
<time class="event__date">April 21-23, 2017</time>
<address class="event__address">
Venue Location Name<br>
123 Fourth St<br>
City, STATE 01234
</address>
Visit Website
</article>
<article>
...
</article>
...
</div>
I'm trying to become more familiar with writing appropriate, semantic markup. How would you go about this?
Whether or not address gets used, using the article element for each event is appropriate. While you could use a ul in addition, it’s typically not needed.
If the address is the relevant contact for this event, using the address element is appropriate. If it’s just the location of the event, but there is e.g. a different address for a contact person, the address element should be used for the latter.
If the external link goes to an event-specific page, you could use the bookmark link type. But don’t use it if it’s just a link to e.g. the event location’s homepage.
Related
I just recently started learning semantic HTML tags and I'm a bit confused about when to use section or article when I want to make an overview of the whole website or just a list of contents.
For example, how would you structure something like this with semantic tags. Each item of this list would have their own page and a link in the main nav bar. And each of these pages would contain couple of blog posts inside.
<main>
<section>
<h2>Contents of this site:</h2>
<p>Here is a quick summary of what you can see on this website.</p>
<ul>
<li>
<h3>About me</h3>
<p>Learn more about the author of this site.</p>
</li>
<li>
<h3>Favorite music</h3>
<p>Here I will tell you about some of my favorite musicians.</p>
</li>
<li>
<h3>Favorite games</h3>
<p>Here I will tell you about some of my favorite games.</p>
</li>
<li>
<h3>Favorite books</h3>
<p>Here I will tell you about some of my favorite books.</p>
</li>
<li>
<h3>Favorite movies</h3>
<p>Here I will tell you about some of my favorite movies.</p>
</li>
<li>
<h3>Favorite recipes</h3>
<p>Here I will tell you about some of my favorite recipes.</p>
</li>
</ul>
</section>
</main>
Would this be the best practice or should I wrap each <li> inside of an article? Or should I just leave out the unordered list and just use articles only instead?
Thank you in advance for help explaining this.
If you want to make use of semantic <article> tag in this code, you can wrap your <h3> & <p> tag with <article> tag instead of wrapping <li> with <article> tag, and it won't work as you expected.
That all looks pretty good to me.
<section> is best used to divide up a page when you have different topics or different things to highlight. Say for example you have a Home page with a general summary at the top and a contact form lower down then a call to action lower down. You might want to use three sections for that. But, for semantics... sections are generic and there may be a tag which suits better and is more specific for the info you're displaying (see the link below).
<article> would be really good to use as a wrapper around the actual text for each blog post. Think of this one as highlighting the individually composed or unique info. News articles, reviews etc.
Info : https://css-tricks.com/how-to-section-your-html/
Prior to HTML5, I always used <h1> for the title of my page. Then used subsequent <h2> <h3> <h4>... for the rest of my page.
With HTML5, I've read that I can use <h1> multiple times in a document. Such uses would be for a blog with multiple posts and using the element for the blog title.
However, I never found which element is best used for the footer of a document. Let's say you want to put a copyright with the name of your website. Would you use <h1> <div> <p> for the layout below?
Copyright 2015 My Web Site Title
ie:
<footer>
<h1>Copyright....</h1>
</footer>
For the footer of your document, use <footer>
Semantically, you can use<h1> tags multiple times in the same document as long as each has a separate <article> parent, denoting each article's primary heading
<article>
<h1> this article </h1>
</article>
<article>
<h1> that article </h1>
</article>
<article>
<h1> some other article </h1>
</article>
inside a footer, there's no reason I can think of to add a heading. This should all be sufficient:
<footer>
<div> short line here </div>
<ul>
<li><a href=".......... link to something
<li><a href=".......... link to something
<li><a href=".......... link to something
</ul>
<p> significat parting message, thatnks for using our site, we would
like to hear from you again </p>
</footer>
side-note: stack overflow uses divs for almost everything in their footer
<div id="copyright">
site design / logo © 2015 Stack Exchange Inc;
user contributions licensed under
<a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">cc by-sa 3.0</a>
with <a rel="license" href="http://blog.stackoverflow.com/2009/06/attribution-required/">
attribution required
</a>
</div>
which HTML5 tags and microdata schema should I use to describe a list of apartments to rent?
They have the following properties:
Name
Image
Unique number
Location
Description
Price
My HTML structure is currently like this:
<section id="featured">
<h2>Featured appartaments</h2>
<ul>
<li>
<article>
<h3>House #1</h3>
<img src="http://placehold.it/250x150/" alt="House #1" />
<p>Ref. 40</p>
<p>My location</p>
<p>My description.</p>
<p>Price: € 500.000,00</p>
</article>
</li>
<li>
<article>
<h3>House #2</h3>
<img src="http://placehold.it/250x150/" alt="House #2" />
<p>Ref. 41</p>
<p>My location</p>
<p>My description.</p>
<p>Price: € 500.000,00</p>
</article>
</li>
</ul>
</section>
Update (2016): Schema.org now has new types/properties for accommodations, including an Apartment type. See the update in my related answer. I’ll leave the old answer below unchanged for now.
If you want to use the Schema.org vocabulary:
Each apartment could be represented by a Product (bold emphasis mine):
Any offered product or service. For example: a pair of shoes; a concert ticket; the rental of a car; a haircut; or an episode of a TV show streamed online.
The offer to rent such an apartment could be represented by an Offer:
An offer to transfer some rights to an item or to provide a service—for example, an offer to sell tickets to an event, to rent the DVD of a movie, to stream a TV show over the internet, to repair a motorcycle, or to loan a book.
For linking from the Product to the Offer, use the offers property (resp. the itemOffered property for the other direction).
It’s also possible to use Offer on its own (without using Product at all), and judging from your example, this might make sense here. (Using Offer and Product makes sense when you have different offers for the same apartment, i.e., you can give the metadata for the apartment in the Product and use separate Offer items for different dates etc.).
So using your example, it could look like:
<article itemscope itemtype="http://schema.org/Offer">
<h3 itemprop="name"><a itemprop="url" href="">House #1</a></h3>
<img itemprop="image" src="http://placehold.it/250x150/" alt="House #1" />
<p itemprop="serialNumber">Ref. 40</p>
<p>My location</p>
<p itemprop="description">My description.</p>
<p>Price: € <span itemprop="price">500.000,00</span> <meta itemprop="priceCurrency" content="EUR" /></p>
</article>
There is no property for specifying the address of the offered apartment. Offer only allows for giving the address/place where you can obtain the offer (availableAtOrFrom). You could just use the PostalAddress type, but as there is no appropriate property to link it to Offer, there would be no machine-readable connection between the offer and the address.
Additionally, you might want to use
businessFunction → BusinessFunction for specifying that it’s about renting,
category for specifying that it’s about an apartment (i.e., Residence),
etc.
I would like to put a table of contents at the top of an internal email newsletter that will allow readers to 'jump' down to the part of the newsletter that interests them. Something like:
<ul>
<li>Funding Opportunities</li>
<li>Professional Development</li>
<li>Best Practices</li>
</ul>
Then 'further down' in the email newsletter have:
<h2><a id="FUNDING">Funding</a></h2>
<!--- news items about funding -->
<h2><a id="DEVELOPMENT">Professional Development</a></h2>
<!--- news items about professional development -->
<h2><a id="BEST">Best Practices</a></h2>
<!--- news items about Best Practices -->
This works fine in browser based HTML, but I have not had success getting it to work in various email clients (gmail, groupwise, outlook). I have however, received emails that appear to use a technique like above and I am able to 'scroll' the email. I understand that support in various clients will vary and that this is not necessarily a 'good' practice but this is an internal system and almost all recipients will be using GroupWise.
Any experienced insight into the specific additional markup that is needed (e.g. what would the base ref be?) would be greatly appreciated.
Try adding the 'name' attribute to the anchor as well as the 'id'.
<a id="FUNDING" name="FUNDING">
I found this post when trying to accomplish the same thing, and I followed instructions here to get it to work: http://blog.mailermailer.com/tips-resources/anchor-tags-html-emails
This is the code I ended up with in the first successful test:
<html>
<a name="BACKTOTOP">Index</a>
<ul>
<li>Compliance Courses</li>
<li>Dealer Training</li>
<li>Functional Training Courses</li>
<br>
<h1>
<a name="COMPLIANCE">Compliance</a>
</h1>
<br>
This will be the message for Compliance courses.
<br>
Return to top index
<br>
<h1>
<a name="DEALERTRAINING">Dealer Training</a>
</h1>
<br>
This will be the message for Dealer Training.
<br>
Return to top index
<br>
<h1>
<a name="FUNCTIONALAREA">Functional Training Courses</a>
</h1>
<br>
This will be the message for courses by Functional Area.
<br>
Return to top index
</html>
I would like to put a table of contents at the top of an internal email newsletter that will allow readers to 'jump' down to the part of the newsletter that interests them. Something like:
<ul>
<li>Funding Opportunities</li>
<li>Professional Development</li>
<li>Best Practices</li>
</ul>
Then 'further down' in the email newsletter have:
<h2><a id="FUNDING">Funding</a></h2>
<!--- news items about funding -->
<h2><a id="DEVELOPMENT">Professional Development</a></h2>
<!--- news items about professional development -->
<h2><a id="BEST">Best Practices</a></h2>
<!--- news items about Best Practices -->
This works fine in browser based HTML, but I have not had success getting it to work in various email clients (gmail, groupwise, outlook). I have however, received emails that appear to use a technique like above and I am able to 'scroll' the email. I understand that support in various clients will vary and that this is not necessarily a 'good' practice but this is an internal system and almost all recipients will be using GroupWise.
Any experienced insight into the specific additional markup that is needed (e.g. what would the base ref be?) would be greatly appreciated.
Try adding the 'name' attribute to the anchor as well as the 'id'.
<a id="FUNDING" name="FUNDING">
I found this post when trying to accomplish the same thing, and I followed instructions here to get it to work: http://blog.mailermailer.com/tips-resources/anchor-tags-html-emails
This is the code I ended up with in the first successful test:
<html>
<a name="BACKTOTOP">Index</a>
<ul>
<li>Compliance Courses</li>
<li>Dealer Training</li>
<li>Functional Training Courses</li>
<br>
<h1>
<a name="COMPLIANCE">Compliance</a>
</h1>
<br>
This will be the message for Compliance courses.
<br>
Return to top index
<br>
<h1>
<a name="DEALERTRAINING">Dealer Training</a>
</h1>
<br>
This will be the message for Dealer Training.
<br>
Return to top index
<br>
<h1>
<a name="FUNCTIONALAREA">Functional Training Courses</a>
</h1>
<br>
This will be the message for courses by Functional Area.
<br>
Return to top index
</html>