Is this correction correct semantically talking? I've written my doubts inside the HTML comments to explain my thoughts.
<article>
<h2>Movies</h2>
<h4>Genres</h4>
<p>Below you can see the <b>available genres</b>:</p>
<p>1. Action</p>
<p>2. War</p>
<p>3. Comedy</p>
<p>4. Horror</p>
</article>
VS
<section> <!-- Section instead of article? -->
<header>
<h2>Movies</h2>
<h4>Genres</h4><!-- Should i use to h tags inside the same header? http://www.w3.org/TR/html5/sections.html#headings-and-sections. There sais: "h1–h6 elements must not be used to markup subheadings, subtitles, alternative titles and taglines unless intended to be the heading for a new section or subsection. Instead use the markup patterns in the Common idioms without dedicated elements section of the specification."-->
<p>Below you can see the <b>available genres</b>:</p> <!-- <b> or <strong>?-->
</header>
<ol><!-- ol or ul and place the numbers? -->
<li>Action</li>
<li>War</li>
<li>Comedy</li>
<li>Horror</li>
</ol>
</section>
Section and header are fine. What is the function/interaction of the genres? If they will be menu options I would wrap in , otherwise I would use UL since they are not in a specific sequence which needs to be maintained.
<b> - "Represents a span of text to be stylistically offset from the normal prose without conveying any extra importance".
<strong> - "Represents strong importance for its contents." source
Other tags are dependent on their context.
Article is wrong - this doesn't make sense to be in a RSS feed for instance. section would be OK, div might be better.
The Bold is just for formatting, not for emphasis so b would be OK.
If you stick with section, header it should have an H1 and H2, not H3 and 4.
If the order matters, ol, if not ul.
In HTML5, you can write comments wherever you want.
<section>
<p> <!--new P tag -->
<span>new <!--this new paragraph-->paragraph</span>
</p>
</section>
Related
I'm trying to create a description by using <small> tag,
and I also have a large title with <h2> tag, and they are all inside a <header> tag,
this is what it looks like now:
<header>
<h2>User settings</h2>
<small>Yep, here's the settings for you.</small>
</header>
But I'm not sure if the following usage would be better to make those tags meaningful?
<header>
<h2>
User settings
<small>Yep, here's the settings for you.</small>
</h2>
</header>
Should I put <small> in <h2> instead of putting <small> in <header>?
well, it depends
if you put your <small> tag inside <h2> it will be more important (note that using <small> also affects importance)
on the other hand, some tools like html outliners will also list <small> content, which might not be desired behaviour
These options are not semantically equivalent. Putting small inside h2 means that the whole content of h2, including small content, is the heading that identifies the current section (or the whole page). For example, screen readers may read this whole long text as a document navigation option. With small outside h2, the section (or page) is identified with the short text that is the content of h2 element only.
Also, I doubt that the small element is the right choice for such sub-description. Wouldn't just p element (as suggested in W3C HTML spec for sub-headings) be more appropriate here?
Mozilla says: https://developer.mozilla.org/tr/docs/Web/HTML/Element/header
<header>
<hx></hx>
</header>
prefer <small> in <hx>
twitter bootstrap docs prefer small in hx
http://getbootstrap.com/css/#type-headings
Here is my code:
<html>
<head>
<style>
div p h1 {
background-color: red;
}
</style>
</head>
<body>
<div>
<p><h1>hello2</h1></p>
</div>
</body>
</html>
I think thats why:
The <p> tag can only contain inline elements. The header tags are block-level elements, and cannot go inside <p> tags even when you style them to display inline.
This is basic HTML (or any other markup language). You should separate the paragraph, <p></p> from the heading, <h1></h1> element.
If you want to put a sub heading below your main heading, I suggest you do something like
<div>
<h1>Main heading</h1>
<h2>Smaller heading</h2>
<p>Some information or a quote</p>
</div>
It's important to CLOSE the html elements before creating new ones. Unless it's a div, span or section which is meant for gathering topically similar elements.
A lot more could be said, but I suggest you get ahead and read more about HTML and markup language. A good place to start is http://www.w3schools.com/html/html_basic.asp and http://www.w3schools.com/html/html_elements.asp …
If you specifically wonder what elements can be nested inside a paragraph check out the answer on this question: List of HTML5 elements that can be nested inside P element?
Having a H1 element inside a p element is invalid mark-up. When the browser encounters this mark-up, it tries to fix it automatically by moving the H1 outside of the p. Once this has occurred, the selector no longer matches anything.
Use the W3C markup validator to ensure the validity of your document
<div>
<h1>hello2</h1>
<p>im the best</p>
</div>
Because your header is like the title of an article - you don't put the title in a paragraph. Using the <p> tags, you're just writing the content for the article, so you wont be able to style a header tag in a p tag as you will most likely be styling your header and content differently
If you are having issue with HTML Structure See the Lynda HTML5 course really worth Your Time It Clarifies how to structure your document. Along with reasons why. You will have a better understanding of What is Style and what is structure which most people struggle with I would include myself.
Also has links to the official web standards "World Wide Web Consortium", Yes I know it's a paid for service but it help me avoid or understand why HTML and CSS react the way it does when you move element in to invalid place.
Understand that h1-h6 Tag are not meant for styling as I previously thought from my earlier days in HTML. Yes we used them because it seemed to make since or easyer to target with CSS. But the h1-h6 are more to structure of importance off the section or content on the page. I would use a div if it's or a span or Bold tag.
Great resource is developer.mozilla.org
https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure
Here is a good example: Of structure from the link above!
<body>
<!-- Main header used across all the pages website -->
<header>
<h1>Header</h1>
</header>
<nav>
<ul>
<li>Home</li>
</ul>
<form>
<input type="search" name="q" placeholder="Search query">
<input type="submit" value="Go!">
</form>
</nav>
<!-- Here is our page's main content -->
<main>
<!-- It contains an article -->
<article>
<!-----------***** As you can see the h1-h6 is for structure not style****** -->
<h2>Article heading Rank2</h2>
<p>This is Paragraph</p>
<h3>subsection Rank3</h3>
<p>This is Paragraph </p>
<p>This is Paragraph </p>
<h4>Another subsection Ranked</h4>
<p>This is Paragraph </p>
<h3>Another subsection Ranked</h3>
<p>This is Paragraph </p>
<p>This is Paragraph </p>
</article>
<aside>
<h2>Related</h2>
<ul>
<li>beside the seaside</li>
<li>beside the sea</li>
</ul>
</aside>
</main>
<!-- main footer that is used across all the pages of site -->
<footer>
<p>©Copyright 2050 by nobody. All rights reversed.</p>
</footer>
But really Check out the Lynda HTML 5 Essentials Tutorials!
When a document it's structured correctly it's readable and more applications and devices. Like Readers.
I'm trying to find the best way to code a search result page in HTML5.
Here's how I've done it.
<section>
<header>
<h2>Results for <kbd>this terms</kbd></h2>
</header>
<!-- list of results -->
<ol>
<!-- First result -->
<li>
<article>
<header>
<h3>
<cite>
This is a result
</cite>
</h3>
</header>
<blockquote cite="http://addressofthepage.ch/">
<p>So, setting about it as methodically as men might smoke out a wasps' nest, the Martians spread this strange stifling vapour over the Londonward country. The horns of the crescent slowly moved apart, until at last they formed a line from Hanwell to Coombe and Malden. All night through their destructive tubes advanced.</p>
<footer>
<p>Published <time datetime="2010-07-15T13:15:05-02:00">MMMM DDth, YYYY</time> at the <abbr title="Uniform Resource Locator">URL</abbr> http://addressofthepage.ch/</p>
</footer>
</blockquote>
</article>
</li>
<!-- Second result ... and so on -->
<li>...</li>
</ol>
</section>
The main questions are
<header> mentions the search terms. What is the best tag to use? <kbd>?
Is the <cite> tag related to the <blockquote> if it is positioned in the <header>?
Is not better to put the <cite> in blockquote > footer like <p>[...] at the URL <cite>http://addressofthepage.ch/</cite></p>
All this is also available on a Gist
is meant as a way to show keys. That's why many sites style that tag as a keyboard key. You're not showing keys, you're showing a search term. A <span> should be fine. Maybe add a class like <span class="search-term">.
Semantically speaking, no, it wouldn't be related as it's not a child.
The "correct" HTML for using cite and blockquote would be:
A quote here...
— Foo Bar
gist here of the HTML: https://gist.github.com/OscarGodson/5a3e87ce895b3af952de (stackoverflow appears to have issues rendering HTML when in code tags?!)
Notice the cite and footer tags. As per spec:
The blockquote element represents content that is quoted from another
source, optionally with a citation which must be within a footer or
cite element, and optionally with in-line changes such as annotations
and abbreviations. Content inside a blockquote other than citations
and in-line changes must be quoted from another source, whose address,
if it has one, may be cited in the cite attribute.
Source: http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-blockquote-element
The main thing to remember, and coming from someone who's been doing this for a long, long time, semantics matter, but don't overthink it. Sure, the blockquote has some strict rules about how to properly use it, but browsers will handle whatever you give it fine. Do what makes sense for your app and that should be semantic enough 90% of the time as long as everything isn't a span and div. If you over analyze this stuff you'll spend more time deciding which tag to use instead of just getting stuff done ;)
I was just reading the HTML5 spec again to find out if I can nest a nav element inside a header. The paragraph for the header element is a bit strange if you ask me, but probably only because I don't understand it.
In this example, the page has a page heading given by the h1 element,
and two subsections whose headings are given by h2 elements. The
content after the header element is still part of the last subsection
started in the header element, because the header element doesn't take
part in the outline algorithm.
<body>
<header>
<h1>Little Green Guys With Guns</h1>
<nav>
<ul>
<li>Games
<li>Forum
<li>Download
</ul>
</nav>
<h2>Important News</h2> <!-- this starts a second subsection -->
<!-- this is part of the subsection entitled "Important News" -->
<p>To play today's games you will need to update your client.</p>
<h2>Games</h2> <!-- this starts a third subsection -->
</header>
<p>You have three active games:</p>
<!-- this is still part of the subsection entitled "Games" -->
...
Source: http://www.w3.org/TR/html5/sections.html#the-header-element
So, according to the comment, <p>You have three active games:</p> is still part of the subsection that started inside the header because the header by itself does not introduce a new section.
But doesn't this break with the nesting structure that HTML is build on? For example, this is invalid markup because the nesting is wrong:
<div>
<p>
</div>
</p>
But If I would define - theoretically - that the div does not do anything, then it would be fine?
Please don't get me wrong, this is not a rant or anything, I just try to understand whats the sense behind this? Also, why is the header element listed under sections, if its not a sectioning element?
By the way, is HTML5 outlining still as broken as it was about a year ago? Or is there a tool or something that handles it correct by now?
So, according to the comment, You have three active games: is
still part of the subsection.
Keyword here is according to the comment, which is not the code. Technically the paragraph is a child of the body. I'ld agree the coding and comments do not match, but the code is technically not incorrect. And there are no restrictions that comments or content can only exist in one block.
This
<div>
<p>
</div>
</p>
is technically incorrect which you can see more clearly if I add some CSS.
div { height:100px; width:auto; }
p {display:block; height:50px; width:300px}
Given that CSS what is the above code suppose to look like?
What compatible browsers may do is rewrite the above code into
<div>
<p></p>
</div>
<p></p>
After the browser engine rewrite the HTML and CSS can be rendered.
using HTML5, would it be semantically correct to place an <article> element within a <li> element. A situation where this would prove useful is a list of recent or popular articles on a blog. Consider the following:
<section id="popular">
<div class="blurb">
<h2>Popular Articles</h2>
<p>The most popular posts from my blog.</p>
</div>
<ul>
<li>
<article>
<h3>Article</h3>
<p>An excerpt from the article.</p>
</article>
</li>
<li>
<article>
<h3>Article</h3>
<p>An excerpt from the article.</p>
</article>
</li>
<li>
<article>
<h3>Article</h3>
<p>An excerpt from the article.</p>
</article>
</li>
</ul>
</section>
Which would appear as follows:
Popular Articles
The most popular posts from my blog.
Article
An excerpt from the article.
Article
An excerpt from the article.
Article
An excerpt from the article.
To me, this seems an excellent way of marking up the information. My only question is if it is correct to nest the <article> element inside the <li> element in this way.
There is nothing semantically incorrect about it, but it is not really necessary. The <ul> and <li> elements aren't really adding anything here, unless you are taking advantage of their default styling. Simply putting the <article> tags directly within the <section id="popular"> should be sufficient, and it reduces the complexity of your page as well as its size.
To determine whether something is semantically correct and useful in HTML, ask yourself a few questions. Are you using each element for its intended purpose? For instance, it's not semantically correct if you use an <a> element for a button, as <a> is for hyperlinks, <button> is for buttons. Do you need each element you are using in order to convey all of the semantic information about your content (sections, headings, links, etc)? Is there anything meaningful that you intend to convey that isn't expressed by use of appropriate elements? Having lots of extra meaningless elements usually isn't harmful, but it adds clutter, and it may mean that there are semantic distinctions you are conveying visually but not encoding in a way that a screen reader or automated bot or browser that presented the information in a different format could make sense of.
If it displays correctly in all implementations, I don't have any idea why it would be incorrect... HTML5 is meant to be flexible. Also, the documentation states:
Contexts in which this element can be
used:
Where flow content is expected.
Which looks to be the context of most elements available.