Bootstrap | When should you use <p class="h1"> over <h1>? - html

In terms of what Bootstrap provides, I don't see why anyone would use a p tag over a h tag for creating headers.
<h1>Bootstrap</h1>
<p class="h1">Bootstrap</p>
The Bootstrap documentation says the following regarding p tags:
.h1 through .h6 classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.
As someone who is new to frontend development, I don't understand the situation ...cannot use the associated HTML element, if anyone could explain.

Every tag has it's own meaning - semantic HTML. E.g. h1:
Use only one per page or view. It should concisely describe the overall purpose of the content.
But if you do not want to add any special meaning to your page part, just for it look like <h1>, then you use CSS to style elements like it.

Generally speaking, HTML labels (h1, p, a, etc) have semanting meaning. This is, they provide information on the element besides some basic styling, and this is key for accessibility (for example when using a screen reader).
Sometimes, you might want to have a text element with h1 aspect (font family, size...) but without such importance from a semantic point of view, that is why Bootstrap offers h1 as a class.
I hope this clarifies your question :)

These classes gives the same styling to the elements, but not their HTML properties, meaning that any scraper, parser, or search engine indexer won't see it as a header but just a normal paragraph text, which is sometimes the desired output when you need to highlight something to the user visually, but not mark it as a header for the indexers.

In terms of semantic HTML and SEO you should use heading tags (h1, h2, h3...), but, if you want to give, for example, H1 appearance to an element or without impact on the semantic, you should use heading classes

Related

Is it okay to skip heading levels when creating html pages?

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.

How to correctly organize headings for good Web accessibility? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
So far I have 4 rules but I am not sure if this is necessary or not.
Rules for headers:
Must be only one H1 tag at page
The heading elements H1 to H6 should be used hierarchically correct.
Use aria-labelledby for div related to header (I am not sure if this is necessary?)
Use header tags only for headers, not for styling.
example {
<h1 id="hContinent">Continent</h1>
<div aria-labelledby="hContinent">
About Continents …
</div>
<h2 id="hEurope">Europe</h2>
<div aria-labelledby="hEurope">
About Europe …
</div>
<h3 id="hSpain">Spain</h3>
<div aria-labelledby="hSpain">
About Spain …
</div>
<h3 id="hGerman">German</h3>
<div aria-labelledby="hGerman">
About German …
</div>
<h2 id="hAsia">Asia</h2>
<div aria-labelledby="hAsia">
About Asia …
</div>
}
Are this 4 rules correct or not?
Is there something else that need to be done with header to provide good Web accessibility?
Rules 1, 2, and 4 summarize the key technical principles of using heading elements. The most important thing to be added is that heading texts should be short, informative, and descriptive of the content that they are headings for. In particular, the headings should give a good idea of the content as a whole and the content of each part when read in isolation, as this is one important way of “consuming” them in accessibility software.
The aria-labelledby attribute is commonly not used for headings, and it is mainly intended to be used when an association with some labeling text and the labeled element is otherwise difficult to see. In a case like this, the association is programmatically determinable, since the old implicit principle (spelled out in HTML5) is that a heading element is a heading for a section that ends before the next heading of the same or higher level. Besides, there is not much evidence that accessibility software would make specific use of such an association; it lets users identify headers, have them presented in special ways, etc., and to continue reading from the content right after a heading, but the appearance of the next heading is a sufficient signal of end of section, as a rule.
Thus, rule 3 is not needed. If it is applied, it is not quite clear whether the heading should be moved inside the div, as it is the MDN example on aria-labelledby. Here, as usual, ARIA markup examples are simple, used in situations where it is questionable whether it is needed. The reason, of course, is that a more realistic example where ARIA attributes really matter to accessibility are more difficult to compose and understand.
To begin with many tags in HTML were developed not to assist formatting but to provide information on the structural hierarchy of a document. In order to facilitate accessibility as well as standards, it is best to use the tags for the intended purpose in the information hierarchy rather than for pure formatting purposes. In many cases, this will make your document easier to edit as well.
Synopsis
Use the H1, H2,...H6 tags as indicators of section headings and subheadings within a document, not just as formatting elements. Screen readers in particular may just scan a page for appropriate H1, H2 and H3 elements. Good and bad header examples.
Many experts recommend reserving H1 for the page title, H2 for major headings and H3 for major sub headings.
If you need to indent text for a quote it is generally preferable to use the BLOCKQUOTE tag rather than a UL unordered list tag. The UL tag should be reserved for true lists containing LI elements.
If you need to indent text stylistically (e.g. indent all paragraphs), it is better to use a CSS specification and add space to the left margin (e.g. {margin-left: 15px}) or left padding.
Use the P paragraph tag to separate paragraphs instead of multiple breaks (e.g. BR BR ). This encloses blocks of text within their own structural elements. Some screen readers are able to jump from P to P but not BR to BR.
Do not use the FONT tags to adjust formatting of heading tags. Experts recommend using cascading style sheets for specifying font color, font-size, font-face and backgrounds (versus the FONT tag). This allows a user with color vision or low vision to override a problematic stylesheet with one that they prefer.
In Word, using the Heading 1, Heading 2 styles performs a similar function as H1, H2 do and may be converted to approproate H tags in different conversion tools. You can edit Word Styles to change the appearance of these headers.
Reference - http://accessibility.psu.edu/headingshtml
In conclusion, I according to your question I can say you are correct in 1, 2, not sure about 3 and you are correct in 4 - you can don't need to use H1 only if you want to make a bigger font, you can do it via styles..
Personally, I prefer to make it as much simple as I could so I use H1 for titles, H2 for headers and P for content and I've never used aria-labelledby in my projects.

what is difference between div with css and html styled tag

As we know if we take h1 tag or like that, It has its own style(some bold font weight and larger size). Also there are specific built in styles for p,center,h1,h2... so on. What is difference between styling div with css(same as h1) and using h1 tag for the same Or how html work for those tags.
Apart of the obvious, default browser styles for specific HTML tags, the difference is that in HTML5 tags mark the type of data that it holds. <author>, <aside>, <address> etc.(although nothing stops you from using different type of data for those tags)
Also search engines rely heavily on the data that each html tag holds, so the data in H1 is most certainly of higher value than in a simple div which is a kind of a generic block html element that usually doesn't have any styles applied.
styling div with css(same as h1) and using h1 tag(difference)
My Answer for the above line:
H1 is the Most Important Phrase or Sentence on Your Page
If you think of a Web page as an outline, the H1, H2, etc. heading tags serve to divide the page into sections. Your most important headline is your H1 headline. This generally indicates the topic for the entire Web page and is where most people look first when they're trying to figure out what the page is about. Since search engines first priority is to provide search results that people want, they try to use the same techniques to determine what a page is about. So content in the H1 tag will be considered most important and given a slightly higher rank than other content on the page...
Source: ABOUT.com (for more information)
What is difference between styling div with css(same as h1) and using
h1 tag for the same?
HTML is not just about the 'look and feel' of a web-page, it is also about semantics.
An h1 (or the new header tag) is expressing the 'headerness' of the content, while a div (even with appropriate style) does not.
You can read more on Wikipedia: http://en.wikipedia.org/wiki/Semantic_HTML

Heading 1 limited to one tag, can I just use Heading 2 instead?

I am making a site about coding, and I want my page heading to look like an opening function, and then to close the function at the end...
<h1>function myCodingPage(){</h1>
... page content ...
<h1>}; // myCodingPage ends</h1>
However, I am aware that the spec says NO! I must only have one H1. This got me thinking, that I could just style the second one to match the defined style of the first, but what if I did not want to specify the style of either? Maybe I can just use H2 instead...
So that is my question to the forum... are there any positive/negative implications of using H2 and up, instead of H1 and up in terms of accessibility (do screen-readers expect an h1 for example), SEO, standards compliance, non-standards common practice (will h2 titles be recognized as page titles by any advanced browser bookmarking systems etc...) or anything I have not yet considered?
Edit: updated since comments
Two valide points made in the comments...
It seems that two H1 tags are allowed in the spec (although I suspect there is a good reason not to which I can't currently identify).
Also, the second use of H1 is a decorative element, and not a heading in it's own right, so should not be a heading element at all.
In light of this, I would like to know
Are there any issues with using multiple h1 tags?
How exactly should I markup the mostly decorative second half of the heading?
Maybe I should have left this thread alone. But I guess other people may need to know this as well.
HTML is for meaning, not presentation. The h1 tag is meant to be the primary heading. You really can't have 2 "main" headings competing for attention, the same way you can't truly have two "best" friends.
Proper usage would be to use an h2, as it is a secondary heading. CSS could easily be changed to make the properties of the h1 and h2 the same, if necessary.
All HTML elements have a purpose. Clean, correct coding involves using the elements in the scope that they were meant for. That's why we don't use tables for site layout, and why we use <strong> and <em> instead of <b> and <i>.
Use HTML for purpose and meaning, and use CSS for presentation and styling.

HTML: text, headlines, sublines

I have some question about html-style
At the moment I use following style:
<h2>Headline</h2>
<h4>Subline</h4>
<p>text
tzext
text
text
</p>
Is there a recommand html tag that only defines text and I could define headings myself, somehow like this:
<text class="headline">Headline</text>
<text class="subline">Subline</text>
<text>
....
.....
</text>
Wouldn't this be better style?
How do you do this?
Regards
Headings use <h1> through <h6>. You really shouldn't use anything else for headings as these tags exist specifically for this task, If you have multiple sets of headings on a page, you should group them in the <hgroup> and <header> tags.
Keep in mind your code has to be semantic, and make sense. When screen readers come across your site, they need to understand where the important headings are. If everybody just used generic tags, it would be impossible for accessibility to make sense of your page. The same goes with search engines and any other form of programmatic consumption of your data.
Using h1/2/3/4 tags is the best way to do it. You can also give a h1 a class like so:
<h1 class="yourclass">
you can then select that specific h1 in your css by selecting your h1 class
.youclass{your css}
, or you can select all h1's on your page in css by just type
h1{ your css here}.
in html 5 you have new html elements for header, footer, also paragraphs...more cool features are there. You should check out..This helps semantics as well...
From the CSS specification:
Note. CSS gives so much power to the "class" attribute, that authors could conceivably design their own "document language" based on elements with almost no associated presentation (such as DIV and SPAN in HTML) and assigning style information through the "class" attribute. Authors should avoid this practice since the structural elements of a document language often have recognized and accepted meanings and author-defined classes may not.
There is more to a webpage then the way it looks. People access them with screen readers. Search engines index them. Tables of contents are automatically generated for them. etc.
So no. Hundreds of <text> elements would not be better style.
Your original example isn't very good either. You have no <h3> (I'm assuming the <h1> appears before the snippit). Don't skip heading levels.
If the <h4> is supposed to be a subtitle for the heading (rather then the start of a subsection within it) then you should be looking to use <hgroup> too.
If u use CSS it would be better as it reduces the number of lines required to HTML file. There
are many ty