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>
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/
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.
The following code shows a list of links to recent posts on an experimental blog site I am playing with. The problem is that this fails Google's Structured Data Testing Tool because it is missing required items such as author and publisher.
But I don't want to show these for recent posts and I don't want to show them for every blog post either. What should I do? Get rid of the structured data?
Put the required stuff in and hide it with CSS? Or leave as is?
<section>
<header>
<h4 class="h4-padding">Recent Posts</h4>
</header>
<ul>
<li>
<article itemprop="blogPost" itemscope itemtype="http://schema.org/BlogPosting">
<header itemprop="name headline">
<h5>A very interesting thing</h5>
</header>
</article>
</li>
<li>
<article itemprop="blogPost" itemscope itemtype="http://schema.org/BlogPosting">
<header itemprop="name headline">
<h5>Something event more interesting</h5>
</header>
</article>
</li>
<li>
<article itemprop="blogPost" itemscope itemtype="http://schema.org/BlogPosting">
<header itemprop="name headline">
<h5>Something very dull</h5>
</header>
</article>
</li>
</ul>
It’s perfectly fine not to provide these properties. Schema.org doesn’t require any property.
If Google’s Structured Data Testing Tool says that certain properties are missing, what it really means is:
"If you don’t provide these properties, we won’t show the corresponding Rich Snippet or Knowledge Graph feature in Google Search"
There’s no need to get rid of your structured data just because Google (as one of many consumers) currently doesn’t do something with it. It can be useful for other consumers, and Google may change/introduce features in the future that work with your current set of properties.
I'm the webmaster for smctheatre.com. We're a community theatre that puts on a handful of plays each year. I'm adding to my toolbox with learning structured data. Microformat, microdata, or RDFa, I don't have any strong preference for one over another. I do like the syntax of RDFa Lite and microfomat over microdata and full-blown RDFa.
The only thing I haven't been able to get an answer to is how to mark up an event that occurs on multiple dates, and sometimes at different times.
Here's a trimmed down snippet from the site:
<article>
<header>
<h1>Play Name</h1>
<div class="addthis_toolbox">...</div>
</header>
<aside>
<h2>Dates</h2>
<ul>
<li>May</li>
<li>Fridays 17 & 24</li>
<li>Saturdays 18 & 25</li>
<li>Sundays 19 & 26</li>
<li>Monday 27</li>
<li>All shows start at 7:30 PM</li>
</ul>
<h2>Tickets</h2>
<ul>
<li>Adult $8.00</li>
<li>Child (5-17) $5.00</li>
</ul>
<h2>Directed By</h2>
<ul>
<li>Director Name</li>
</ul>
</aside>
<div>
<p>Summary of a theatre play....</p>
</div>
</article>
Duration of plays are typically two hours, but given that these are live performances, there's no hard and fast ending time.
How do I mark up the content to indicate the dates and times?
Seriously doubt there's an example of exactly what you want, but microformats are flexible and I think I've found enough to get you started:
<div class="vevent">
<a class="url" href="http://conferences.oreillynet.com/pub/w/40/program.html">
http://conferences.oreillynet.com/pub/w/40/program.html
</a>
<span class="summary">Web 2.0 Conference</span>:
<abbr class="dtstart" title="2005-10-05">October 5</abbr>-
<abbr class="dtend" title="2005-10-07">7</abbr>,
at the <span class="location">Argent Hotel, San Francisco, CA</span>
</div>
The example below uses multiple dates at the same venue; swap out the div for your article and looks like you're in business. easily make your header the summary, and put the description class on your p for summary...even though that sounds backwards, it's what you want.
How much further you want to take it is really up to you. I see where you could work start times, possibly a url....and also more microformats, to get even more goodness out of them. You should check out the wiki, it's full of great info, and examples from which you can and should pilfer.
http://microformats.org/wiki/hcalendar
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>