As we usually see, the structure of hgroup maybe like this
h1
h2
h3
...
But in my case, the h3 come first the h2, we have something like this:
h3
h2
But again I must follow design, I must style for h2 come first:
h2
h3
For easy to image, please view here:
http://cdpn.io/dfnjo
I choose to use position, it worked but I don't satisfy because I can't control how many texts the editor will put in, so if the h2 has a lot text, it may overlap the text of h3.(Please try to add more text for h2).
Please advise me do without Javascript, just CSS only!
Thanks
You can't do this situation with CSS, because CSS has not if-else statements.
But there is a way to apply if-else statements with SASS(SCSS). Research about it , it provides to use functions, variables for while statments etc.. But it can't change html elements nested lists.
$("h2").insertBefore($("h2").prev());
or if they don't come in order,
$("h2").insertBefore($("h3"));
Related
I have an html page with heading and subheadings, I'm using Bootstrap v4 CSS.
I was using h3 for heading and h4 for subheading, but when rendered I found the sizes too similar so I swapped to using h2 and h4, not using h3 at all.
This works fine, but is it okay to do this semantically or is it incorrect?
Because I am using Bootstrap I dont particularly want to override the CSS for h3 to make it larger.
If you want semantically correct HTML, then it would be okay to keep the hierarchy; you should NOT use different heading tags just for styling purposes; if you are choosing an h4 over an h3 solely because of the sizes, then that would be semantically wrong; I'd just stick to change the sizes with my own CSS.
This article is really great to help with this: Why Use Semantic HTML
And quoting the same article:
h1–h6 - The heading tags can be used to make fonts bigger and bolder,
but if the text is not a heading, it should not be inside a heading
tag. Use the font-weight and font-size CSS properties instead if you
want to change the size or weight of specific text on your page
Also, since you are using Bootstrap, they provide classes that apply the styles of each heading to an element; so you can choose to style an h3 heading like a h1; this way you keep the looks you need while also the correct semantic approach:Headings
If you are not going to use h3 at all, on your page then yes, it should be all good semantically.
However, if you will be using an h3 somewhere else, I would just alter the heading sizes using CSS as there is not much of another choice, that would be considered semantically incorrect to skip a heading level then use it somewhere else.
Skipping heading levels is a poor practice from the perspective of information design, whether we are talking about web pages, books, journal articles, or about anything else. You can not only confuse screen readers but all readers when you don't follow a consistent, logical pattern with your heading structure.
In my textbook I'm reading about HTML and how you shouldn't use a lot of <div>'s but starting to use bootstrap, you have to use div's on forms and such. Is this rule particularly an old one? What other tags can I use that behave like <div>
Take a look at this image.
Source: http://html5doctor.com/lets-talk-about-semantics/
Any tag can "behave like div".
Div's are easy to use because they have almost none default styles attached but in real world you can reset any element (for example h1) to look just the same as div.
To avoid divitis just google for semantic elements.
If it's paragraph use p, if it's group of fields in form you have fieldset, maybe it's just a label. Don't think how it looks by default because you can change it.
Basically, I'm looking for the cleanest way to modify the styling of some text that i have in the application views without having to reprogram them.
I have a lot of section that does not have any tag (text without tag in the view).
Is there a way to apply styling to that specific text? (Solution for the short term, before I redefine correctly the tags in the while views)
Except for a small number of narrowly defined places, you can't apply CSS to anything other than an element.
So: No, there isn't.
You cannot add style to a something that doesn't have an element. A simple div tag can change that, and its a really easy and quick fix. Just div a section, give it an id or class, then modify it using css.
if you want to modify the first line you could use:
p:first-line {
font-weight: 700;
color: green;
}
otherwise you'll have to wrap the text in a tag. Other psuedo elements you could use are here: http://www.w3schools.com/css/css_pseudo_elements.asp
Here is what I need the output to be.
HTML Markup is:
<h3 class="TRM_Propane_sfty_ttl">Placement of Your Grill & Propane Cylinders</h3>
<h3 class="TRM_Propane_sfty_ttl">Use of Your Grill</h3>
<h3 class="TRM_Propane_sfty_ttl">Other Propane Cylinder Safety Tips</h3>
What is the CSS I should apply to the h3 tag, so that the text "Use of Your Grill" will be vertically aligned at middle? I should n't use specific line height for the second h3 tag.
I tried display: table, table-cell, table-head. Nothing worked :(
h3 is block level (that is the next element will go to the next line) so one way is to make that inline (like span element).
.TRM_Propane_sfty_ttl
{display:inline;}
in your CSS.
Check my demo with table also by the way is used.
And without using h3 element you could also make your font look bigger like this one
and your code a little tidier ;-)
Why don't you just use font-style on a span:
<span style="font-size:large;bold,etc.">
Make the span look like an h3, etc. It might not look 100% unless
you have made modifications to the h3 already (thus changing the standard h3 css configuration)
One way to do it is to wrap everything in a new tag and apply display:table to it. The h3 elements should then be set to display:table-cell
Like this:
http://jsfiddle.net/QSjM3/
Having said that, I do agree that three h3 tags in a row is unusual so you should consider re-structuring your markup
Is it mandatory to use H2 after h1 if text is too small then can we use h4 after h1 . and is it accessible ?
Technically you can use any combination of those.
Semantically, it's wise to use the common order. And if the font size is too small, use CSS to change that.
With the tags h1-h6 you give a semantic meaning to a title. Where h1 is for the top level, h2 for a subdivision of h1, h3 for a subdivision of h2 etc.
You can change the appearance by setting CSS rules, which is great because now you can separate content from layout.
You should always structure the document correctly, so yes it should be h2 after h1 - if the text is the wrong size, you should use CSS to style the headings to your taste.
H1 is usally used for primary headers, h2 for subheaders, h3 for subsubheaders etc. It's doesn't really matter what order you use them in. it's just a conventional document structure, it would illogical to have a sub header, then a primary header but it's not enforced. Just style them in css for your liking.
Ideally you should stick to H1 then H2 and then use CSS to alter the styles of both to match what you want.
Think of HTML as describing the content and structure of your document (hence why it's preferred to stick to H1 then H2, because that indicates the structure of the headings), and then think of CSS as taking that structure and formatting it according to some layout rules, so the CSS defines how big and what colour your want all your H1s and H2s to be.
(Technically there is nothing stopping your from mixing up the order and doing whatever you want though)
Yes, you can skip levels, and most screen readers won't care.
It is often better to use CSS, though.
No, they're just tags. The heirarchy is implied rather than defined or enforced so you can use them in any order you please.
But for readability and neatness you're better of redefining them with CSS if you don't like the sizes rather than just using H3 for a main heading and ignoring H1 and H2. Aside from anything else it could impact Search Engine Optimisation (which considers H1 significant, though I'm not sure about H2 and H3).
h1 and h2's are pretty vital to SEO, using one h1 and mutiple h2's after is the logical thing to do.