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.
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.
I'm trying to write a semantic HTML and also trying to use class names based on BEM methodology.
Before I start the project with completely wrong structure, I just wanted to double check with you if this is right, what I'm doing:
<main>
<article class="card card--light">
<section class="card__wrapper">
<div class="card__image">
an image
</div>
<div class="card__name">
a name
</div>
<div class="card__button">
<button>Click Me</button>
</div>
</section>
</article>
</main>
Is it ok that all sections go inside an article?
Am I doing maybe too many divs?
It's often a good choice to use an <article> tag for card.
There is one error, the HTML5 tag <article> is already creating a section of the page. So there is no meaning of having a <section> as only child. This <section> means "I'm a section of the article", but that's not really the case here. So you should use a simple <div> instead of a <section>.
Globally, be careful with too much HTML5 semantic elements. Using an extra <div> has no bad consequences, this is not true for "sectioning content" tags (<article>, <section>, <nav> and <aside>). For example screen reader will notifiy the visitor for each new section.
With HTML5, there were many additional elements added for structuring documents like blog posts or long texts. But what I have problems coming up with is a semantic way of structuring UI components.
On a typical webapp, you have many different components such as modals, button elements, interacitve forms, containers, and so on. Often, I see those things being constructed using div and span only or by misusing header, footerand nav elements and I get the feeling I missed something out.
Is it really semantic to create all structural, not content-related elements using the div element only? Will there be a more diverse element choice in the future?
EDIT: Here's a short example of what I mean:
<div class="modal foo">
<div class="inner wrapper">
<div class="upper bar">
<div class="inner">
<div class="window-name">
<span class="upper heading">
<h1>Foo</h1>
</span>
<span class="lower heading">
<h3>Extra Baz</h3>
</span>
</div>
<div class="buttons">
<div class="button close"><span class="icon"><i>×<i></span></div>
<div class="button maximize"><span class="icon"><i class="fa fa-maximize"><i></span></div>
</div>
</div>
</div>
<div class="content well">
<!--
Whatever happens inside the modal window named foo.
Pretty sure it needs many divs as well, though.
-->
</div>
<div class="lower bar">
<div class="buttons">
<div class="button help"><span class="icon"><i>?<i></span></div>
</div>
<span class="info">
<p>Enter your barbaz.</p>
</span>
</div>
</div>
</div>
The last W3C working draft for HTML 5.1 was released two days ago, on April, 13, and it is "semantic-centered": see
http://www.w3.org/TR/html51/Overview.html
It is an interesting reading, while waiting to have all those fancy things implemented by the most common browsers.
Is it really semantic to create all structural, not content-related elements using the div element only?
Not in my opinion. Even without to cite "the media is the message", everything has something to do with the content, even "open" and "close" buttons allowing users to see the content.
Will there be a more diverse element choice in the future?
Of course! And with a lot of proprietary prefixes, as usual, just to keep our life busier.
Ignoring div and span elements (which are meaningless, except for the case of specifying some meaningful attributes), your snippet consists of this:
<h1>Foo</h1>
<h3>Extra Baz</h3>
<i>×</i>
<i></i>
<!-- content -->
<i>?</i>
<p>Enter your barbaz.</p>
This is what your content looks like from the semantic perspective. Not very clear what gets represented here.
Using a heading element for a subtitle (h3 in your case) is not appropriate. (Or, if it’s not a subheading but really a new/own section, don’t skip a heading level; but I’m assuming the former.) Use one heading element, and use p for the subheading, and group them in header.
Using i elements for adding icons via CSS is not appropriate. Either use CSS only (with the help of existing elements), or, if you have to add an empty element, use span.
Using span/div elements for buttons is not appropriate. Use button instead.
As you are already using a heading element, it’s recommended to explicitly specify a sectioning content element. Depending on the context of this content, it may be article or aside (or nav if it’s for navigation), but in all other cases section.
Following this, you’d get:
<section>
<header>
<h1>Foo</h1>
<p>Extra Baz</p>
</header>
<button>Close</button>
<button>Maximize</button>
<!-- content -->
<button>Help</button>
<p>Enter your barbaz.</p>
</section>
Now you may add header/footer elements for those parts that are not part of this section’s (not this document’s, it’s only about this section!) main content.
You may, for example, enclose the maximize/close buttons in a header (however, opinions if this would be appropriate differ).
HTML 5.1 will probably have a menu element and a dialog element, which might be useful in this case.
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."
Is this a correct way to use the <section> tag?
<section id="container">
<section id="outer">
<section id="inner">
</section>
</section>
</section>
I'm trying to work out whether or not I should use only one section id, and leave the other two sections as just divs?
If you are just using these elements to place things in some position / style things, then you should probably be using divs.
Section is really for grouping content that belongs together - you shouldn't really have a section without a title (H1 or similar) element describing what the section contains... a few people have made similar mistakes in the past I think:
http://html5doctor.com/the-section-element/
From the spec:
NOTE: The section element is not a generic container element. When an
element is needed for styling purposes or as a convenience for
scripting, authors are encouraged to use the div element instead. A
general rule is that the section element is appropriate only if the
element's contents would be listed explicitly in the document's
outline.
Having said that, it's perfectly acceptable to nest section elements. Maybe something like:
<section>
<h1>Portishead</h1>
<p>Portishead are a cool band from Bristol</p>
<section>
<h1>Dummy (album)</h1>
<p>some info....</p>
<img src="..." />
</section>
<section>
<h1>Portishead (album)</h1>
<p>some other info info....</p>
<img src="..." />
</section>
</section>
Note:
My answer is severely out-of-date, and no longer contains sound advice given the changes to HTML that have happened in the last decade. I will be leaving this answer as-is for historical context, but please be aware that the structure suggested is not best practice—particularly around the use of the obsolete document outline.
Short answer: The code as you've provided is not semantically valid.
Long answer:
section elements are meant to mark up sections of content. Each section of content (i.e. Introduction, Abstract, content, conclusion) could have subsections.
If you're using those elements for structural purpose, you should be using div elements instead. They are semantically meaningless.
This would be more semantic:
<section id="introduction">
<div id="outer">
<div id="inner">
Some content
</div>
</div>
</section>
This would be a semantic way of marking up nested sections:
<section id="content">
<h1>Fizz Buzz</h1>
<section id="chapter-1">
<h1>Foo bar baz</h1>
...
</section>
<section id="chapter-2">
<h1>Lorem ipsum dolor</h1>
...
</section>
....
</section>
My personal recommendation would be to utilize semantic structure as much as possible when you create HTML5 layouts. As other posters have indicated, nesting section elements is totally acceptable, however you need to just make sure it makes sense to do so.
I personally use a few patterns that I've put together based on some research I've done over the course of the last year or so. The most common situation for using nested section elements is to provide ARIA roles for the main content of the document (see "site layout" example below)
Note: assumes body/html elements are present, etc
Site Layout
<header class="header" role="banner">
....
</header>
<!-- used once per page, implies role="main" -->
<main>
<!-- declares page content to be a document and not a web app -->
<section id="wrapper" role="document">
<section class="hero">
....
</section>
....
<section class="content">
</section>
</section>
</main>
<footer class="footer" role="footer">
....
</footer>
Single-Page Content Layout
Note: This layout applies to a page with a singular/topic/object and isn't suitable for all use cases
<article>
<header>
<h1>Page Headline/Title</h1>
</header>
<section class="page-content">
....
</section>
<!-- if this is a post or something with metadata/authorship info... -->
<footer>
....
</footer>
</article>
I use the tag for the class name on the shell header/footer elements as well as landmark roles to insure I can always distinguish them from other header/footer elements within the page (e.g. easy CSS scoping).
References
role="document" https://www.w3.org/TR/wai-aria/roles#document
A region containing related information that is declared as document content, as opposed to a web application.
"Why the <main> element doesn't need a role attribute": https://www.w3.org/TR/2012/WD-html-main-element-20121217/
The main element formalises the common practice of identification of the main content section of a document using the id values such as 'content' and 'main'. It also defines an HTML element that embodies the semantics and function of the WAI-ARIA landmark role=main.
"W3.org/Wiki explanation of nesting <section> elements" - https://www.w3.org/WAI/GL/wiki/Using_HTML5_section_element
The section element is a container for document content that has a related theme, and represents the section of a document that is grouped around a general concept. Everything within a section element is related. Also section elements may be nested if necessary. The section element is a generic semantic element, that can be used to combine portions of a document together into discrete units that are related in some way. For example, the section element may create items inside an outline of a document, or divide page content into related pieces (like an Introduction) followed by some background information on the topic.
A useful way to think through this is to consider how a screen reader would see your site. Imagine (and in fact you should test this for yourself) the screenreader announcing the word 'section' before reading the content inside your <section> tag.
If that doesn't make logical sense then maybe you've got your items ordered wrong.
Check out aria region role.
I don't know exactly how screen readers read nested sections but if the logical
sections on your page don't have a hierarchy then your HTML shouldn't either.
eg. (this is meant to represent HTML structure)
GOOD
section aria-label="dogs"
section aria-label="labradors"
section aria-labels="terriers"
section aria-label="cats"
section aria-label="sphynx"
section aria-label="persian"
BAD
Section used solely to group two other sections, but without a real meaning of its own as a 'section'.
section style="display: flex; flex-direction: row"
section aria-label="news"
section aria-labels="sport"
HTML5 also allows for setups such as:
<section>
<header>Header of section</header>
<aside><ul><li></li></ul></aside><!-- previously known as sidebar -->
<footer>Footer of section</footer>
</section>
multiple times on the same page, so you don't have just the one header, it goes a lot deeper than this, but it's worth checking out.
Check out the http://gsnedders.html5.org/outliner/
An updated method (as far as I understand it) could be something like this:
<main id="content">
<div id="inner-wrapper">
<section>
<h1>Section Title</h1>
...
</section>
<section>
<h1>Section Title</h1>
...
</section>
</div>
</main>
main {
width: 100%;
...
...
}
#inner_wrapper {
max-width: 80%;
margin: 0 auto;
}
See: http://www.w3.org/TR/html-main-element/, http://www.sitepoint.com/html5-main-element/ or http://html5doctor.com/the-main-element/ for more info.