What wrapper should I use, <header>? I'm used to <div>, but I want a modern markup if reasonable. Based on the spec quote below, it seems like a good choice. Is it?
The header element represents a group of introductory or navigational aids.
Yes, you can use a header element for these parts.
The spec notes that it can be used for "any relevant logos" and the last examples shows that the header contains the navigation (which a language switcher and a hamburger button typically are).
You could also use multiple header elements, e.g., if there’s something between these parts that should not be part of the header.
Related
Currently my code looks like this:
<div class="carouselTypo">
<p class="carouselTypo__p" data-target="#active1">A</p>
<p class="carouselTypo__p" data-target="#active2">B</p>
<p class="carouselTypo__p" data-target="#active3">C</p>
</div>
The same code could also be written like this:
<ul class="carouselTypo">
<li class="carouselTypo__p" data-target="#active1">A</li>
<li class="carouselTypo__p" data-target="#active2">B</li>
<li class="carouselTypo__p" data-target="#active3">C</li>
</ul>
Now I'm wondering, which one is better or correct? Or does it not matter?
Actually if you remove the default css I don't think it does matter in this case.
but you should always prefer to use the element that represents your elements prototype,
because sometimes the browser has different behavior for different elements.
for example lets take the the anchor tag.
you can make it in tow ways:
create a button which opens the href
create an anchor tag with href
if you remove the default css the look the same but they don't,
because the browser has other way to deal with anchor tag, for example with anchor tag if you hover the anchor you will see in the bottom the url address:, or you will be able to shift-click which opens the link in a new tab.
<button onclick="document.location.href = 'https://stackoverflow.com';">
hover / shift-click doesn't work
</button>
hover / shift-click works
maybe you can make the shift-click yourself for example, but there are more different can't be done by you, for example accessibility service / extensions will probably react different with other tags.
So if you are making a list of something I recommend you to use the ul Although I don't see any different in non style behavior. (but again, for example maybe there is an extension which collects lists data and it won't work on the div method.)
The functional advantage is that divs mean little on their own, whereas ul lis explicitly mean "this is an un/ordered list of items."
The term "semantics" refers to the way that you use the inherent meaning of existing structures to create explicit meaning. HTML is comprised of tags that mean certain things by themselves. And there are established rules/guidelines/ways to use them so that your published HTML document conveys what you want it to mean.
If you list something in your document, then add an ordered list (UL) or an unordered list (OL). On the other hand, the page division (DIV) element is used to create a specific & separate piece of content.
The div element "divides." When you look at a page, there are specific parts like a content body, the footer, a header, navigation, menus, forms, etc. And you can use div tags to create these divisions. Often, the page parts correspond with a visual layout, so using explicit page divisions (DIVs) to cut up your layout in CSS is a natural fit. This way the div tags become structural.
If you misuse or overuse the div tag, it can create unintended meaning & code bloat.
To confuse matters: Google uses h3 and div to "divide" their listed search results. ul > li > h3 + div
So when you turn off all styles (Shift+Cmd/Crtl+S in Firefox w/ WebDeveloper toolbar), the divs should go away, and stack naturally. Your naked HTML should still render a nice page with a clear hierarchy: top to bottom, most important content first, and lists with bullets & numbers for listed items. And it's a good idea to add a link near the top (for non-visual users) that allows you to skip down to main content, important forms, or the main headings (like a table of contents).
Finally, keep in mind that you are building a document. Without all the visual effects, it should still be a cogent document.
It will affect your code readability. If you use ul and li, your code is more readable.
On my web page, I present mathematical theorems and the page design is very close to the style used in academic math papers (LaTeX).
The heading structure might be as follows:
Geometry
Plane geometry
Theorem.
We have that a²+b²=c².
Question: Should I use the <h3> tag to enclose Theorem,
or should I style it with <span>, or <b>?
In some sense, it acts as a small heading for a section, but there might be several headings with the exact same title (Theorem) on the page, which might be considered strange for a SEO perspective.
You may use multiple <h3> tags. Go with makes the most sense semantically. If "Theorem" is being used as a section header, then use the <h3> (make sure you're not skipping one or more section header elements) as many times as you need to.
See the examples used at MDN - The HTML Section Heading elements, it's not a stretch to see your desired use in their examples.
The spec says the following about the <nav> element (emphasis mine):
The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.
It never specifically says that <button> is disallowed, and nowhere it says that only <a> elements should be used for navigation (yet it mentions "links"), but all the examples seem to be a bunch of anchors in lists. The one example (11) that isn't a list still has only anchor elements for navigation inside.
The next example (12) shows an example of navigation within application, but uses anchors again.
So, are button elements allowed inside <nav>?
In HTML 5.2, section 4.8. is about links:
Links are a conceptual construct, created by a, area, and link elements, that represent a connection between two resources […]
As one would expect, the definitions of a ("a hyperlink"), area ("a hyperlink"), and link ("the link(s)" etc.), all refer to links, while the definitions of button and input don’t.
So:
A nav element should contain elements with href attribute (a/area/link). Otherwise it wouldn’t be warranted to use nav in the first place (exceptions aside).
A nav element may also contain buttons. For example, a button that is used to toggle between showing all levels of the navigation, and showing only the top-level. (However, if the buttons are used for navigation, they should be links instead of buttons anyway.)
The HTML5 Standards allows any kind of flow content inside of <nav>-tags and <button> tags are considered being flow content, but you should consider to avoid them for semantical reasons. Buttons based on <button> are UI elements which are exclusively javascript driven (or in some tricky scenarios by the default behavior of the browser when using forms) without any functionality or semantical reference towards an 3rd party reference. Therefor using <button>-tags inside of <nav>-tags makes no sense for clients/robots who do operate without considering javascript.
Modern UI-Frameworks like Bootstrap, Semantic-UI or others do provide the ability to implement buttons in multiple ways (as <button>-tags as well as <a>-tags). Taking such abilities into account, you should prefer to rely on <a>-tag based buttons for semanatic reasons.
Depends how you define "allowed".
It is valid HTML, but you may want to read up on accessibility and the difference between a button (that should signal clickable actions) and a link (that should navigate somewhere).
http://web-accessibility.carnegiemuseums.org/content/buttons/
Is having a single section within the main tag acceptable or is redundant?
<main>
<section>
<section>
...
</section>
<section>
...
</section>
</section>
</main>
Or should I just put the two section tags within the main... even though all the content within it is relatable.
Also, is having a <header> within every single section acceptable? It is classified as “a group of introductory or navigational aids”. But seems like if I were to use it as I've described, it'd be just like using <h1>-<h6>.
The <section> element is used to represent a group of related content. There shouldn't be any issue in nesting these tags. You could also make use of other tags like <article>, <aside> etc.. The idea behind using these elements is to give more semantic meaning to your pages, allowing computer browser to understand your content better.
There are no restrictions on how to nest them and what tags to use in them. You can have the whole set of html tags with in them (you can use h1-h6, or other elements).
You might want to have a look at these articles:
How to Use The HTML5 Sectioning Elements
http://html5doctor.com/the-section-element/
Question: is the single section inside main redundant?
It depends on the semantic meaning of your page. Describe your
desired page layout in natural language. If you say "the main area
has a section that contains many sub-sections", then your HTML is
right on the money. If you say "the main area is broken down into a
few sections", then your single section sounds like an evolved form
of the div-itis virus - the one that left a lot trash behind: wrappers,
containers, container-wrappers, content-wrappers, main-content-wrappers,
wrapping-containers, containing-wrappers...
Question: is header within every section acceptable?
Yes. But again, do the above natural language litmus test to
determine if it is suitable.
There's also some confusion between <h1>-<h6> vs <header>. Think of header as an "introductory part" within a section. It may or may not be necessary in your markup. If your introductory part of the section consists of, say, only a <h1>, you should probably omit use of the <header>; but if your introductory part includes a few items, e.g. a heading, a logo, a nav bar, then it's probably a good idea to wrap them in a <header> tag.
I see the <p> tag used a lot in the code of others but have never used it in my own work.
I'm wondering what advantage this gives over using a <div> tag?
Are there any benefits I could get
from incorporating the <p> tag
into my pages?
Is there any disadvantage in only
using <div> tags without <p>?
DIV indicates a separate section on a page, which is not semantically connected to the others. With P tags you indicate that this piece of text is broken into paragraphs but it still stays a single entity.
ADDED: With "semantics" people usually refer to the possibility to extract information from HTML as to what various elements of a page represent and how they are related to each other, as opposed to treating the whole HTML as just a markup to be rendered. For example, when you do menus it is recommended that you use ULs (unordered list) for that purpose, because it will be possible to learn from the markup that all LIs (list items) contained within a particular list probably mean choice options of the same level. I know it is helpful for screen readers for impaired people that you try to make your markup as semantic-rich as possible.
If you're not concerned with this, then it is virtually no difference for the rendered result whether you use DIVs or Ps. You can style both with CSS to achieve the same look and feel.
Semantic HTML is still not "the absolute good" to be strived for. For many people semantics does not add any value as they wish just that their pages are rendered correctly. That's why the ever-lasting discussion on whether to use tables for markup (and add semantics where it does not belong) or stick to CSS is not going to end any soon.
p means 'paragraph', div means 'division'. That's as complicated as it gets. It's a way of telling search-engines, scrapers, tools, etc that this is a paragraph of text.
div is undesirable when you're actually marking up a 'paragraph' of text.
Both tags have a different purpose.
p indicates a paragraph, usually for
organising content (text and
images,mostly)
div on the other hand is a
rectangular space on the canvas,
usually for layout purposes.
Example: You would put your navigation panel in a div, making it easy to move it from the left to the right of the page, or switching to a 3 column layout. The different sections in your navigation (first the general site navigation, next specific hotlinks to the most recent blog post or whatever) could be seperated by putting them in defferent paragraphs.
(I know, bad example, because the navigation is better represented by unordered lists, but what the hey).
In direct answer to your question, they give you the advantage of differentiating between organising your layout and organising your content, in a way that becomes clear in the HTML source.
If you are tagging content so you can lay it out with CSS, you probably want <div>; <p> should be used to indicate a paragraph of text and that's it.
Beyond just the semantics of it (which are important), you will also want to consider validation problems. According to the HTML4 spec, you are not allowed to nest other block-level elements (<div>, <ul>, other <p>, etc) inside a <p> without invalidating your HTML.
I've seen a number of instances where parsers will choose to prematurely close the <p> to allow the other nested block element to begin.
Are there any benefits I could get
from incorporating the tag into my
pages?
Yes, provided that you use it correctly -- because the use of semantic HTML is always a benefit.
There are a range of reasons why this is so, but the primary one for people who need a quick explanation is SEO. Search engines will understand your page better if you use semantic HTML.
p tags are for paragraphs. p tags often contain additional CSS styling regarding the textual content that goes into them, and this styling can be defined in various places in the css documentation. for example, a p usually has a bit of extra space below it. if you try laying something out with p tags, you'll end up with uneven padding.
It is better to use divs if you want to have more control over the content in your page from a programmatic perspective. sticking to divs for all layout concerns will also allow you to use p tags exclusively for paragraphs.