I am coding up a landing page with the classical setup :
A fixed header
Several sections (product description, testimonials, google map, etc.)
A footer
My semantics look like this :
<header>
<!-- Responsive navigation bar -->
</header>
<section class="section-first">
<!-- First section -->
</section>
<section>
</section>
...
<footer>
</footer>
As the header is fixed, I need a specific CSS treatment on the first section, as such :
.section-first {
margin-top: 200px;
}
so that the header and the first section do not overlap. So eventually my first section needs to be treated differently than others. My current approach seems like a tweak to me, there should be either a semantical way to approach this or a clean CSS market practice in such common situation. Any ideas ?
You could use the :first-of-type pseudo element!
section:first-of-type{
margin-top:200px;
}
This finds the first section tag in your HTML without having to add an extra class to it and only applies the written styles to that one.
Related
Is there a way to set the height of a div using only CSS so it will fill out the reminder of the page height?
I have very limited control over the webpage (a client's custom framework), and it's not possible to change any html or use javascript.
Basically I have a textbox where I can write CSS, and that's it.
Also, I can't make fundamental changes(like introducing flex or anything like that) since it would break the page/site.
The site don't use any media queries or define viewports or anything like that. Basically they use HTML 3.2. It's an ASP.NET WebForms site where the core parts were built around 2002 - 2005.
...
<body>
...
<div id="rowContainer"> <!-- This is the div that needs to go all the way down to the very end
of the entire page.
(NOTE: NOT the end of the visible part of the page) -->
<!-- child elements consist of hierarchy of divs
(but are row based, the content of a "row" is undefined),
which use a mixture of relative, absolute and fixed positioning.
They are dynamically generated and they are "undefined",
so no assumptions can be made about the child nodes -->
<div css="row" > ... </div> <!-- These child divs might all be
absolutely positioned -->
<div css="row" > ... </div>
<div css="row" > <!-- row content is undefined and can change at any time --> </div>
<div css="row" > ... </div>
</div> <!-- There are no other visible elements after the "rowContainer" -->
</body>
use
#rowContainer{
height:100vh;
}
I understand from reading similar posts that the <section> tag in html is meant for semantic and organizational purposes. I was wondering, however, why using the <div> tag with a class attribute wouldn't have a similar effect.
(e.g. <div class = "SectionOne">)
Given these two methods, I could refer to each of them in CSS by using their respective names:
Section
{
color = white;
}
or
.SectionOne
{
color = white;
}
Personally, I think the second method allows for greater versatility in webpage design and I don't see many advantages to the new HTML5 feature. Would anyone care to clear this up for me?
section is usually used for having article like contents whereas div are meant to combine various block elements in order to style them differently. The main difference is just semantics.
Refer https://www.thoughtco.com/difference-between-div-and-section-3468001 for derails
Let me know if you require any further help
The <section> tag defines sections in a document, such as chapters, headers, footers, or any other sections of the document.
Whereas: The <div> tag defines a division or a section in an HTML document. The tag is used to group block-elements to format them with CSS.
Maybe you mean section and not Section. Anyway, the semantics is a thing and the selectors another. In CSS it is better to select using classes than tag selectors, because you gain a lot in terms of versatility. So you are right from this point of view. Semantics is another matter: is not given by a class. Even if you give a "section" class to a div, you are not giving semantic meaning to a div.
<div> is simply a generic block-level element which predates the later, semantically-named, document-related elements which arrived with HTML5, such as:
<header>
<nav>
<main>
<section>
<aside>
<footer>
When dividing up a document into its anatomical parts, you could still use:
<div class="header">
<div class="section">
etc.
But... you don't need to anymore.
Of course, even if you still use all of the above in your document you might still want to add other block-level elements and when you do... <div> is general purpose.
Let's say that I have a website with a header, two columns under it (one as a wrapper for articles and the other as a sidebar). Now, can I use main as a wrapper for those articles:
<main>
(articles here)
</main>
<aside class="sidebar">
(sidebar here)
</aside>
Or should I wrap this <main> with <div>?
<div id="left-column">
<main>
(articles here)
</main>
</div>
<aside class="sidebar">
(sidebar here)
</aside>
In general: can we use semantic tags also for styling/display purposes with CSS (which is normally the domain of div elements)?
You should not add those semantic elements just because you need CSS hooks, but if your use of the elements is appropriate, it is perfectly fine, and a good practice, to use them also as hooks for CSS.
If you need more than your existing elements for styling reasons, add span/div elements (as they are the only "non-semantic"/meaningless elements).
Adding span/div around every semantic element you want to style would bloat your markup, and make it harder to understand/maintain. There can be one reason for doing it for the elements introduced with HTML5 (like main), though: If you need to achieve a certain styling in old browsers which don’t support these new elements.
"New" HTML5 elements are elements like any other (OK not input[type="hidden"] or head ^^ but div or span or p or h6). They bring semantics but when it comes to styling, in browsers supporting them which is IE9+ (except maybe for main), you can display: flex them or float or position: relative or even display: inline.
IE8 needed a polyfill named htmlshiv but that's oooold. Don't support IE8 (because MS doesn't even support the OS where it could run!)
I'd include aside as an aside to main and preceding sibling could be an article or section.
<main role="main">
<article><!-- or section? -->
(articles here)
</article>
<aside class="sidebar">
(sidebar here)
</aside>
</main>
My question is probably based on a bad design. However, I can't change that and need to work with it. This is the visual draft I'm talking about, it's just a part of a full website:
As you can see there's a title of an article with a background image, then a breadcrumb toolbar and finally, the articles content. Now, usually, if there wouldn't be the breadcrumb toolbar you could simply wrap it into an <article>. But the breadcrumb divides the article in a "pre" article and a main article part. The only "clean" HTML5 way would be to wrap the article including the header with background image into an <article> and position the breadcrumb into the target visual position. However, I'm classifying this as "hack" and I'm searching a better way.
What would be the preferred markup for this scenario?
There won't be any perfect the solution for the current requirement.
As pointed out by comments to the previous answer, the nav is not related to the article.
Also, WCAG instructs that :
1.3.2 Meaningful Sequence: When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined. (Level A)
EDIT : If changing the order of the element can preserve a meaningful sequence (G57), when the elements does not match visually the DOM order (see C27) the visual focus indicator of the screen reader will not match the standard reading order which will result in bad UX for people with low vision using a screenreader.
So it's impossible to try a CSS visual hack to invert the order between the elements visually without breaking another rule.
You may think of a third technique :
set aria-hidden on the visible title,
use aria-labelledby on the article tag to point to the h1 outside the article element :
For instance:
<header>
<h1 aria-hidden="true" id="title">Your title</h1>
<nav><!-- nav here --></nav>
</header>
<article aria-labelledby="title">
// article here
</article>
Another way to do is to duplicate the title element, one visible, one for assistive technology
<header>
<div aria-hidden="true">Your title</div>
<nav><!-- nav here --></nav>
</header>
<article>
<h1 class="sr-only">Your title</h1>
// article here
</article>
It could be something like this -
<article>
<header>
//APPLY BACKGROUND IMAGE
<h1>YOUR TITLE</h1>
</header>
<nav>
//USE BREADCRUMBS HERE
</nav>
<section>
//USE THIS FOR CONTENT
</section>
</article>
I read about semantic HTML online...
Semantic HTML means using HTML tags for their implied meaning, rather than just using (meaningless) div and span tags for absolutely everything.
If you use <h1> instead of <div class="header">, and <h2> instead of , et cetera, Google and other search engines will interpret your headers as being important titles in your page. This way, when people search on the words in your headers and sub-headers, your page will be considered more relevant (and rank higher). Plus, it's much shorter and cleaner.
So, below is semantic,
<h1>My Website Name</h1>
<h2>My Website Tagline </h2>
What about this below?
<div id="header">
<h1><span class="hide">My Website Name</span></h1>
<h2><span class="hide">My Website Tagline</span></h2>
</div>
I tend to combine h tags with div and span tags like above - is this practised considered as the lack of semantic?
The reason why I have the span with the hide class is that I want to display the site logo instead of text. So use CSS to set the background of h1 as image and then hide the text. is this incorrect practise?
Then, if I don't use div, what can I use to make a box around the h1 and h2?
As far as I know, html 5 is not fully ready yet, we must not use <header> yet, must we??
Thanks.
I would do something like the following if I was going to use HTML5:
<header>
<hgroup>
<h1>My Website Name</h1>
<h2>My Website Tagline</h2>
</hgroup>
</header>
Remember to add display: block; to the HTML5 elements and createElement for IE in the CSS though. The header element shows the block is a header and the hgroup element is there to show that the second h* element is a sub heading, so shouldn't be taken into account when calculating the header levels in the document.
If you don't want to use HTML5 yet then you could use divs instead of the new elements, and use the HTML5 element names as the class value. This will make it easier to switch over when you feel comfortable using HMTL5 on a live site.
You don't really need to use the span elements. You can use tricks such as using a large negative text-indent in the CSS to hide the text off the screen.
If you want to display a logo instead of text, use an image. Google say so (even if they don't know the difference between a tag and an attribute). Taglines, BTW, are not subheadings (and the site name (and thus logo) is usually only a heading on the homepage).
<div id="header">
<h1><img src="foo.png" alt="My Website Name"></h1>
<p><img src="foo.png" alt="My Website Tagline"></p>
</div>
Unfortunately, Internet Explorer 8 does not recognize many HTML5 tags, and when I've tested it, I was unable to set CSS values for the <header> tag, for example. So for now I would recommend that you continue to use div tags to group your semantic meaning.
As a sidenote, Google does not like hidden text, and if you have a lot of it, it will consider it deceptive coding. One is probably fine, but you'd be better off using the alt attribute on the image tag.
Nobody suggested that you should not use DIVs at all... semantic HTML does not mean there cannot be div or span tags in your code. It just only means that whenever possible (there is a specific tag available for a specific semantic meaning) you should try to give semantic meaning.
h2 is not to be used for taglines, as somebody else already suggested.
Also, in my interpretation (some will argue), h1 is not for the name of your website. It is the title for the content on a specific page.
I agree with #David Dorward, the tag line should be in a p tag.
Your example (wrapping the header elements with a div) is perfectly acceptable, though I would like to raise a small caution: Be careful that you do not get in the habit of wrapping everything in div tags. For example:
<div class="content">
<div class="list">
<ul>
<li>something</li>
<li>something</li>
<li>something</li>
</ul>
</div>
</div>
Since a ul tag is already a block element, the above markup would be better off like this:
<div class="content">
<ul class="list">
<li>something</li>
<li>something</li>
<li>something</li>
</ul>
</div>
And then just style the ul to look like the div.
On the matter of displaying the logo as an image:
If your logo is text-based, or has text in it, you would be better off doing the following:
HTML
<div id="header">
<h1 class="logo">My Logo Text - My Website Tagline</h1>
</div>
CSS
.logo { text-indent:-9999px;background-image:url(thelogo.jpg) no-repeat;}
/* Also add height and width based on your logo height and width */