Using things like help to define a clear outline of your page and enables tools and apps to exclude content inside elements like and, which are not vital to convey the main purpose of the document. HTML has a range of sectioning elements use to help create a document outline. These apps or tools will evaluate your site based on the context you have provided.įor this reason using semantic HTML allows tools and apps to assign their own CSS and JavaScript to your elements relevant to their new context and environment.Ī few additional key things to consider with Semantic HTML. Not everything that consumes your page is going to have access, or use, your CSS and JavaScript. These tools and apps take the structured content of a page and display it with custom styles. It’s always good to remind ourselves why semantic HTML is important and reading modes and apps are an excellent example why.
#READ AN ARTICLE ON READER MODE FOR MAC HOW TO#
These issues were a result of a number of things which are also key for making sure your content display correctly in apps like Instapaper and Pocket so before I get into how to get bylines and dates at the top of your content let’s look at some simple things you need to do to make sure everything renders correctly. You can read thread here it’s pretty interesting. Coincidentally I happened to spot a couple of tweets about Reader mode by Ricky Mondello who kindly answered a few of my questions.
I was really confused and spent a lot of time inspecting other people’s websites and trying things to see what was going on. I found that some of my content was being ignored, my headings, byline, dates, these were all being excluded from the page, even worse some of my actual page content, like lists and quotes were also being excluded. If the button isn’t there, you might need to go and re-look at the structure of your site.įirst thing to note is that I could not access the only version in Safari Reader mode, the option was not available.īut what was most interesting is that my first attempt at Reader Mode resulted in some problems. You can access reading mode by clicking the little button that looks like lines of text in the corner of safari. Last but not least of my tests was Safari’s Reader Mode which is by far my favourite. Guess which one is which! As an interesting untested but observed aside the only version actually took longer to process and save than the semantic one. This displays my version and my semantic HTML version. When you save an article into Pocket on the Desktop web view it looks a bit like this. I will add that it took a bit of investigation for me to get this information to display correctly at the top of the page, but don’t worry i’ll explain later on in this post how to unlock this achievement. Especially if, like me, you have hundreds of webpages saved to “read later”. Knowing who wrote the document and when is really valuable for both users and publishers when the websites original branding, or context is no longer available. In Figure 2 you can see the version is missing information around the page url, who wrote the document and the date the document was published. Left Image is made with and is missing byline and date information, Right Image with Semantic HTML and displays byline and date information.
If you compare the two you will see that the top part of the page is different.įigure 2: Top section of Instapaper. This is also the case for other elements further down the page such as quotes, lists, links etc. As Instapaper didn’t know that “Why are dogs good” is actually a heading of the page it just treated it like any other text within the document. When you compare the two examples you can see that “Why dogs are good” is styled nicely in the semantic version but not in the version. These were marked up as divs so Instapaper had no idea they were navigation items or that they were links and just put them in the page as text. The version has what looks like links? When you compare the two versions you can see there are what look like links at the top of the page.Whereas when I use Semantic HTML is uses my documents to represent my page. As there is no in the div only page the title is taken from the element. The left image is using just the element and the right image is using semantic HTML. Figure 1 demonstrates my webpage using divs and semantic html. Left Image: only, Right Image Semantic HTML How it looks in Instapaperįirst up we have Instapaper.
0 kommentar(er)
