Hello I am a web design student, looking to add micro data onto my website in order to keep up with the trends (doing a major over haul), however I am having no luck with it, for instance I have the itemscore for web pages on the body, however what is for "URL" as the "isBasedOnUrl" description makes it seam like you don't use that for the main navigation and cant I cant see another alternative, also what would this code be like in a schema, i really jsut cant wrap my head around it just yet, Thanks for any help this is much appreciated.
<body>
<img src="logo">
<div id="nav">
Home
</div>
<div id="maincont">
<p>Some "about" text</p>
</div>
<div id="footer">
<p>copyright at name</p>
</div>
</body>
You’ll want to use http://schema.org/WebPage, a more specific CreativeWork.
This schema doesn’t define a property for the site/page navigation (apart from breadcrumbs). And why should it in the first place? Simply use HTML5’s nav element. But if you need to set some properties about the navigation, you can use http://schema.org/SiteNavigationElement: "A navigation element of the page."
For isBasedOnUrl, did you read the description? "A resource that was used in the creation of this resource."
Related
After reading What are the implications of using custom tags in HTML? I have decided to not use custom tags the way I was planning to use them so that I follow standards, and bots may read my code properly. Although, I wanted to know if rather than using custom tags for divs, if incasing these divs within custom tags would still cause any negative effect to my source.
I wouldn't be using: <SomeDiv> rather than <div class="SomeDiv">
Something more along the lines of:
<header>
<nav>
<div class="navWrap">
<div class="navGutz">
NAVBAR
</div>
</div>
</nav>
<logo>
<div class="logo">
LOGO
</div>
</logo>
</header>
<content>
<left>
<div class="myContent">
<topContent>
Main content and more divs
</topContent>
</div>
</left>
<right>
<div class="sidebar">
<news>
News
</news>
</div>
</right>
</content>
<footer>
<div class="social">
Social Links
</div>
<div class="copyright">
Copyright
</div>
</footer>
I ask because rather than using comments to label sections, I wanted to use tags. That way if for any reason I wanted to add style to the section in a whole, I would be able. Visually looking at it it seems a little redundant, but there would be more to it rather than what is just in the example.
So to restate the question, would incasing my content (that is up to standards) with custom tags cause any sort of negative effects against my site? Whether it be indexing, crawling, score, etc.
You should check this article on DEV. The article is about Custom HTML tags, Web Components, the Custom Elements spec and the few js libs.
For example, if I want to put h1 in a left column and content in a right column:
<div class="left-column">
<main>
<h1>Document Title</h1>
</main>
</div>
<div class="right-column">
<main>
<p>Text content<p>
</main>
</div>
Is it correct? Thanks!
The short answer is yes, you can. However, the W3C spec forbids it while the WHATWG spec allows it. As the author of the main element wrote the W3C version and is at odds with WHATWG's interpretation, I would defer there. There is also an open bug to have the WHATWG spec align with the W3C spec.
However, you SHOULD NOT as the best use of main involves supporting assistive technology (AT) (screen readers, for example). It also maps to the ARIA role of main, so it has a direct mapping expectation.
AT users have a quick way to navigate to the main element, which represents the main content of the page. If you use more than one, then those users may never see it as they do not expect there to be more than one block of main content (the WHATWG bug report bears this out as stated by AT users).
Also the HTML validator will throw an error, which may or may not be a concern.
In most cases, multiple article elements can be nested within a main to achieve the desired effect for styling hooks.
I don't have enough rep points to post more than 2 links, else I'd offer some more material.
I think not - There must not be more than one <main> element in a document. The <main> element must NOT be a descendant of an <article>, <aside>, <footer>, <header>, or <nav> element.
it can only be use once per page. see this link here
http://html5doctor.com/the-main-element/
For more info about why. Take a look at this one
http://lists.w3.org/Archives/Public/public-html/2013Jan/0230.html
Here is the Alignment
<div class="left-column">
<main>
<h1 align="left">Document Title</h1>
</main>
</div>
<div class="right-column">
<main>
<p align="right">Text content<p>
</main>
</div>
Plot: When building a coupons website I realize that their can be content that is not unique to the page but should be used inside the <main><article> ..here..</article></main>.
Problem: Just because w3schools state :
The content inside the element should be unique to the
document. It should not contain any content that is repeated across
documents.
But i have content which will be inside article. Like every time for example A coupon can be used by entering its code but a deal can only be activated by going to landing page.
This will be repeated in every 'coupon' post I will publish.
So now what I tried to use was.
<main><article><main>Unique content</main>
<aside>A coupon can be used by entering its code but a deal can only be activated by going to landing page</aside></article></main>
But again :
Note: There must not be more than one <main> element in a document.
The <main> element must NOT be a descendent of an <article>, <aside>,
<footer>, <header>, or <nav> element.
So what is the best way to format the UN-UNIQUE content inside <main> and/or <article>.
The main tag should be used to group those article and aside elements.
<main>
<article>
The unique document content.
</article>
<aside>
Related content for that document.
</aside>
</main>
tl;dr - use your common sense :)
This article on the actual w3 site has a good overview of what should go where. The overall structure is:
<body>
<header>
<!-- header content goes in here -->
</header>
<nav>
<!-- navigation menu goes in here -->
</nav>
<section id="sidebar1">
<!-- sidebar content goes in here -->
</section>
<main>
<!-- main page content goes in here -->
</main>
<aside>
<!-- aside content goes in here -->
</aside>
<footer>
<!-- footer content goes in here -->
</footer>
</body>
Option 1 - <section>s
They go on to say that <section>s, fairly obviously, can contain multiple <articles>, but that it is also possible to put <section>s inside an <article>, for example to define the introduction or summary:
<article>
<section id="introduction">
</section>
<section id="content">
</section>
<section id="summary">
</section>
</article>
So one option is to put a <section id="content"> and <section id="terms"> inside your article.
Option 2 - <footer>s
It does appear valid to use a <footer> for this sort of content. You said it is just for author, date, category, but w3 states in its spec for <footer>:
A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.
Your text is terms and conditions of a coupon, which could be considered as semantically similar to copyright data. It's a judgement call I think.
Option 3 - <div>s et al...
As a get-out, in the first link they do also say about <div>s:
You should use [a div] when there is no other more suitable element available for grouping an area of content...
So if it really isn't clear what to use, another possibility could be:
<article>
Blah blah
<div class="terms"></div>
</article>
Summary
To be honest, after all this, it seems there is no definitive answer and sites are unlikely to become super-strict in how they semantically parse documents for a while yet, because they know there are legions of people out there who will do it completely wrong. If you just stick a <p> with the same terms in at the end of each article, it probably won't make any real difference because the main text is unique.
I personally think as long as you use your common sense and choose something which doesn't completely go against the recommendations, you can't go too wrong.
According to the WHATWG (the informal group behind the HTML Living Document Standard), there is no problem in using a main element inside an article. The HTML Living Document says:
There is no restriction as to the number of main elements in a document. Indeed, there are many cases where it would make sense to have multiple main elements. For example, a page with multiple article elements might need to indicate the dominant contents of each such element.
Consequently, you can write
<body>
<header>My Page Header</header>
<main>
<article><h1>My First Article</h1>
<main>My first article's content...</main>
<aside>A sidebar</aside>
</article>
<article><h1>My Second Article</h1>
<main>My second article's content...</main>
<aside>Another sidebar</aside>
</article>
</main>
</body>
However, the W3C HTML 5.3 Draft disallows this and states that "There must not be more than one visible main element in a document."
This is an interesting case of a disagreement about a central element of HTML. Amazing! It seems that there is again a schism between W3C authors and the web/browser developer professionals behind the WHATWG. In such a case, I would go with the WHATWG.
I would go with something like this :
<main>
<div class='article'>
<article>Unique content</article>
<footer>This coupon can be used only once..</footer>
</div>
<div class='article'>
<article>Unique content</article>
<footer>This coupon can be used only once..</footer>
</div>
</main>
Anyway I think having multiple <main> tags is worse than having non-unique content in an <article> tag.
You can also take into consideration Schema.org for proper mapping your content with additional attributes ( itemprop ... )
My website has a profile page. I have something like:
<h1>Foo bar profile</h1>
<div>
<h2>Address</h2>
<p>Foo bar street, 55</p>
<p>Foo city</p>
</div>
<div>
<h2>Contact information</h2>
<p>foo#bar.com</p>
<p>55-5555-5555</p>
</div>
Should I use divs or sections to wrap this kind of content? With sections, should i change h2 to h1? I don't know what is right.
Thank you.
Why not make use of the <address> tag?
<h2>Contact information</h2>
<address>
foo#bar.com<br />
55-5555-5555
</address>
its just fine..
still if u want to learn html5 i will recommend
Tutorials:
http://slides.html5rocks.com/#slide1
(built using HTML5)
http://diveintohtml5.ep.io/
http://html5tutorial.net/
Demos: http://html5demos.com/
I wouldn't call that a <section> although that all might be contained in a <section class="contact">
I recommend the hCard microformat or the HTML5 vCard microdata definition derived from it. It's a set of well defined class names to use to define the pieces of your contact information.
You can use what tag types you want, set the appropriate classes, then style them with CSS - for example is "Address" is not really a 2nd level heading just style it to look like one (if that's the look you want) based on it being within a <div class="vcard">
You might start out like...
<section class="userprofile">
<div class="vcard">
<div class="adr">
... etc. ...
</div>
</div>
</section>
The HTML5 way uses itemprop instead of class - see http://www.html-5.com/microdata/rich-snippets/addresses/ for some more explanation and samples.
Take these two pieces of markup:
<div id="header">
<img src="/img/logo.png" alt="MyLogo" />
<ul id="misc-nav">
<li>..</li>
</ul>
<header>
<h1>Welcome to Bob's Website of Fantastical Conbobulations</h1>
<p>The smell of invention awaits you...</p>
</header>
</div>
and
<header>
<img src="/img/logo.png" alt="MyLogo" />
<ul id="misc-nav">
<li>..</li>
</ul>
<h1>Welcome to Bob's Website of Fantastical Conbobulations</h1>
<p>The smell of invention awaits you...</p>
</header>
My example may not be perfect, but I'd like to know if the purpose of the tag is for semantic definition of the content, or is it block level structural definition with CSS?
It is my understanding from the spec itself, that the first example is the correct interpretation, yet I see the second being touted as the right way.
Can you offer any clarity on it?
Both are fine. But what exactly do you mean by "structural" vs "semantic"?
It's your first method (semantically).
The < header> tag defines an
introduction to the document.
<header>
<h1>Welcome to my homepage</h1>
<p>My name is Donald Duck</p>
</header>
<p>The rest of my home page...</p>
http://www.w3schools.com/html5/tag_header.asp
Spec: http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-header-element
The header tag purely semantic.
However, in fact all HTML tags are to provide a context to the content (= semantics).
Use CSS to style your content approperiately.
I would advocate the following combination of markup and CSS:
In your CSS:
header {
background: #fff url(/img/logo.png) top left no-repeat;
padding-left: 64px; /* or whatever required to display margin correctly */
}
/* if you REALLY want your navigation to appear as a bulleted list */
nav a {
display: list-item;
}
In your page markup:
<nav>
<a>...</a>
<a>...</a>
</nav>
<header>
<h1>Welcome to Bob's Website of Fantastical Conbobulations</h1>
<p>The smell of invention awaits you...</p>
</header>
This way you're using the semantic <header /> and <nav /> tags to mark up text content, and then using CSS to enhance the presentation with display formatting, logo images, etc.
I recall - although alas I can't find the sources now - that the proposed new elements in HTML5 (header, nav, footer, aside, article, etc.) were chosen based on analysis of Google's database of websites to identify the most commonly-used ID attributes assigned to DIV elements, figuring that those represented the most common scenarios where developers were using DIVs to wrap meaningful elements of their page structure.
HTML5 actually does away with block/inline distinction in favour of a more nuanced content model. The header element is flow content, which is like the default state for HTML5 elements. Semantically it should be considered as introductory information for its nearest section content or sectioning root ancestor.
I think both your examples are valid uses of the element, though I personally would probably markup your first one this way:
<header>
<img src="/img/logo.png" alt="MyLogo" />
<nav>
<ul>
<li>..</li>
</ul>
</nav>
<hgroup>
<h1>Welcome to Bob's Website of Fantastical Conbobulations</h1>
<h2>The smell of invention awaits you...</h2>
</hgroup>
</header>
I used to think that the first method is the proper way to use the element, as it is intended to provide relevant information for a given section it is included in, not being a section itself, besides we already have elements for structuring the content, but for what i've seen in some pages, the reason many people includes also a header element at root level is to provide that same information considering the whole page as a big section, so i've changed my mind to think both of the examples can be considered correct.
If you read the W3C HTML5 specification you will find that every html page should have only one H1 tag, so if you use h1 then h2 then h3 you might see some weird styling. That is because the browser expect one h1 on every html page when it parses it.
So you can instead use h1 h2 h3 tags and style them any way you want.
The point of using semantic html elements is because your website will be 'read' not only by web browsers but also by web crawlers, tools that read the page with voice, braile tools and many more applications and physical tools.
So when those applications read your website they don't read css, only html and might read some javascript. So when they see lang="en" they know to read the contents in the element in english etc. When they see "section" they know it's section element and when they see "aside" they know it is some aside element etc.
We can easy see the page and know what is what, but visually impaired and other people can't do that so for them this will be of great help. Think about that when you make your websites, think about all the people that will access it and how easy will be for them to do that.
That is the whole point of the new awesome html5 elements. You can make the same webpage just with one element - "div" for example, and with a whole range of new html5 semantic elements - article, section, header, footer, aside etc. The webpage will look the same in web browsers, but smart applications like search engine robots will crawl the page better and some applications that read web pages will parse the page more easily.
The point of web is to be open to all people and free, and I agree to that.
In the future, the web will evolve without doubt, new tools will be made that will parse web pages, and using new html5 semantic elements will make your webpages future proof, so these new tools will read our pages in smart way.
Hope this helped someone :)