HTML element aside from headers <h1><h2>, ect - html

I was browsing related issues for my question but I can't seem to find the answer for it. Anyways, I want to know if I can still use the p or div tags instead of header tags when I have already used both (p and div tags) as plain text on my site. The reason is that I only want to have one header tag h1 present in my site. I tried to tweak some parts and got lost along the way. Sadly, after a couple of testing, it did not work... I was wondering if it's possible or if there's any other HTML tag that I can use other than header tag. Any response from you guys will be very much appreciated. =)

You can make a <p> look however you like, for example:
<p class="header">This is a header</p>
with
p.header { font-size: 200%; font-weight: bold; }
but I would recommend against it. The reason is that HTML is (ostensibly) semantic so if you declare:
<h3>This is a header</h3>
you're actually saying (semantically) that the given text is a heading of some sort. Remember you have <h1> through <h6> and you can pick and choose which of them you use. There is no need to use <h1> to use <h2> and so on.
This is also useful for those visually impaired as something styled as a heading won't be indicated as such to those using screen readers but a heading will be. You should cater for accessibility issues where possible.

You should not style a div, span, or p to look like a heading and then use it in place off an h1-h6. That is exactly contrary to the spirit behind the rule of thumb that you shouldn't have more than one h1 on a page.

<span> is a useful addition, as well.

You can use P and DIV tags over and over. If you need to, style them to look like H1's.
p.title {
font-size:18px;
font-weight:bold;
}
p.header2 {
background: url("bg.jpg");
}
--
<p class="title">My Title</p>
<p>And this paragraph will simply be regular text.</p>
<p class="title header2">My Other Title, with a Background Image</p>
<p>And this paragraph will also be regular text.</p>

Don't forget to remember SEO on your site. Presumably this is why you only want one H1 tag?

<span> <strong> and <em> are others you can use inside your <p> tags.

i would use <div> or <span> tags and use ids or classes to control the style. use ids if there is only once instance or classes if you want to repeat this style. you can also use multiple classes on one element
for example
<div id="text">Text Here</div>
<span class="red">This would be red</span>
<div class="red big">This would be big and red</div>
with css
#text{ font-size: 20px; }
.red{ color: red; }
.big{ font-size: 40px; }
hope this helps

You can use multiple h1's or h2's and just target them like this:
<div id="header"><h1>Title of page/h1></div>
<div id="main"><h1>Title of article</h1></div>
#header h1{ color:red;}
#main h1{ color:blue;}
It's not quite what you're asking. I suspect Google is a bit smarter than single H1 approaches.

Related

Scalable CSS naming and sub classing

If you have a div which has various elements inside it, what would be a good way to show relationships and hierarchy when it comes to writing the CSS rules for this HTML:
<div class="tweet-general-item">
<p>Some summary text in here</p>
</div>
I'm wondering how to write and apply a style for the <p> element. This could be done in two ways:
.tweet-general-item-summary {
...
font-size: 12px;
}
With HTML like this <p class="tweet-general-item-summary">Some summary text here</p>
OR
.tweet-general-item .summary {
...
font-size: 12px;
}
With HTML like this <p class="tweet-general-item summary">Some summary text here</p>
Which way would be better/scalable/good-practice and why? I have to be able to show some level of hierarchy/relationship in the CSS. I can't simply have a style of .summary by itself because it has no semantic meaning to anyone - the designers/devs need to know what kind of summary it is just from reading the CSS.
Have a look at the BEM Methodology:
http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
https://bem.info/method/
Your example would look like:
<div class="tweet">
<p class="tweet__summary"></p>
</div>

How to write CSS code without using :not selector?

I have an article page that I am making small CSS changes, such as margin and font size, to. My code has to be able to be supported by Internet Explorer 8 and above. The problem is, I am using some CSS selectors that IE8 does not support. How do I write my CSS code without using the :not selector?
HTML for sample article page
<div class="entry">
<h3 class="social-title>Share This Article </h3>
<div class="social-content>
<table>
<td><img class="" src="twitter.png"><span class="">Twitter</span></td>
<td><img class="" src="facebook.png"><span class="">Twitter</span></td>
</table>
</div>
<!-- The article would start here -->
<p class="category_row"><h1 class="category-title>Lifestyle</h1></p>
<p style="margin: 0in 0in 0.0001pt; line-height: 13.5pt; vertical-align: baseline;"><img alt="" style="float: left;" src="example.jpg">Article goes starts here...</p>
<p style="margin: 0in 0in 0.0001pt; line-height: 13.5pt; vertical-align: baseline;">Second paragraph</p>
Third paragraph
</div>
CSS I am using
.entry p:not(.category_row) {
font-size: 14px;
line-height:22px;
}
img (margin: 10px)
So far example, if I wanted to add margin to the image that is in the article section, how would I write the CSS code so that it only affects the image in the article section and not the images in the <div class="social-content">? Without using :not?
Also how would I write CSS code to change the font-size of the article to a font size of 14px and line height of 22px? Without affecting everything else above (not in the article section) ?
Sorry if this is confusing, but I will clarify more if need be!
You will need to be more verbose if you want to support older browsers. The joy of the newer syntaxes is we are able to be more pithy, but if you have IE 8 in your supported list of browsers, you'll need to start with styling more general selectors and then overriding those styles in more precise selectors.
.entry p {
font-size: 14px;
line-height:22px;
}
.entry p.category_row {
font-size: XXpx;
line-height:XXpx;
}
I don't know where your article section begins from your markup. Figure out what is the most logical container for image would be, and then constrain your selector with it. Note article is an HTML5 element, so you would be remiss not to use it:
<article>
<img ... />
</article>
And article images would be styled with this simple selector: article img { ... }
If you want to use article with IE 8, be sure to include this: https://code.google.com/p/html5shiv/
Why don't you wrap the actual content in it's own div?
<p class="category-row">....</p>
<div class="post-content"><!--- maybe use article tag here -->
<p>First paragraph....</p>
<p>Second Paragraph</p>
</div>
Then you can just reference the p's like
.entry .post-content p {
....
}
Also, "category row" doesn't look like it should be a paragraph?
If it is a "row" a div or a span would be more appropriate.
If it contains nothing but the h1 you might as well scrap it and leave the h1 be there without a wrapper.
If you use the article tag (or any of the other new html5 semantic tags) include html5shiv, as Chris said in his answer.

How do I set different line-heights in the same paragraph or header?

I've read that headers shouldn't be used as subtexts to other headers for HTML5 in order to have a nice outline.
for example:
<h1>Frustration</h1><br />
<h2>The life of developers</h2>
Rather, it could be written like this instead:
<h1>Frustration
<br />
<span style="font-size: 0.67em">The life of developers</span>
</h1>
The problem is that I have no control on the line-height of the subtext. It takes on the line-height of the H1 and that always seem a little too far.
I realize could do something like:
h1+.subtitle
to target the same thing, but I'd just like to know whether there is any way for the second option above to let me manipulate a paragraph with two different line-heights.
EDIT:
I'm using the latest version of Firefox.
As I continue to look for a solution, I'm beginning to wonder if this is a silly question to be asking, seeing as the browser has no reason to think the user would want separate line-heights within the same tag--especially when there are alternatives like using block elements with a negative margin-top.
You could do this:
<h1>
<span class="mainText">Frustration</span>
<span class="subText">The life of developers</span>
</h1>
h1 .mainText {
display: block; /* this prevent the need for the <br/> */
/* additional style for the main header text */
}
h1 .subText {
/* styling for the subtext */
}
You could also do this (which is easier I guess):
<h1>text
<div>subtext</div>
</h1>
h1 div {
font-size: 0.67em
}
The subtext will have a lower line height. See this jsfiddle for the latter one: http://jsfiddle.net/wLD35/

CSS: The font is bold, but it shouldn't be

HTML:
<div id="e_ticket_info" class="e_ticket_font" runat="server" Visible="False">
<p>
Some text.
</p>
</div>
CSS:
.e_ticket_font {
font-weight: normal;
}
The HTML code is on content page, which is inside master page.
The issue is - the text is bolded out, but it shouldn't be.
How can I can get rid of it?
Try
.e_ticket_font p {
font-weight: normal;
}
because you are not targetting p tag.
Dipesh's answer is correct. I'll just add a bit explanation. CSS is cascading style sheet, means the style for any element/class/id can be mentioned at multiple places and applied in the order in which they are included. In your case, some other style seems to override your style to make it bold since your snippet will not make it bold.
Considering this, as a general best practice, always target the specific elements if you are not sure if it's class will be styled somewhere else or not.
Thus, .e_ticket_font p {... is prferable than .e_ticket_font {.... If there are multiple paragraphs and you want only some of them to be different, then again use classes/ids, like
.e_ticket_font p#heading {...
.e_ticket_font p#content {...
.e_ticket_font p.specialpara {
and so on.
Another way to make it sure is to apply css inline for that element, but this should not be used generously for many elements as it affects the "structure should be separate than presentation" principle
<div runat="server" Visible="False">
<p class="e_ticket_font">
Some text.
</p>
</div>
CSS:
.e_ticket_font {
font-weight: normal !important;
}
try inline css because if you don't know if there are other css classes are specified in masterpage for <P>
something like:
<div runat="server" Visible="False">
<p style="font-weight: normal;" >
Some text.
</p>
</div>
it will work for sure, then you can check for other css references for <P>
or (for each) element below .e_ticket_font:
.e_ticket_font * {
font-weight: normal;
}
i advice a rare use of !important in case of runaway bubbling your DOM
but mind of the selector detail.. if there is any css selector which describes the object on a directer way like...
.e_ticket_info#e_ticket_info {
font-weight: bold;
}
...css will pick that one with privileg!

How do I get whatever default style <h2> has, without having my text on a single line?

I realize that in the modern day, most people use CSS to perform styling, and will have CSS define what H2 looks like.
However, please imagine that I'm trying to make my text looks like it is the default appearance of <h2>, but have it on a line with other text.
Is it possible to do this in HTML4?
Alternatively, is it possible to emulate it using CSS?
Assume I am NOT setting a style on <h2> directly.
By default, all HTML headings (<h1> to <h5>) are displayed as block. This means a heading will be in a separate line if there is other elements surrounding it.
You can change that with CSS by applying display: inline to your heading. If you need it to keep some block behavior (like having a certain width, for example), you can use display: inline-block instead.
Give a try to that:
<!DOCTYPE html>
<html>
<body>
<style>
.h2{
font-size: x-large;
font-weight: bold;
display: inline;
}
</style>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p class="h2">This is heading 2</p>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
And you should disable your current styles applying to the current h2.
For example: color: black !important; (if it's defined)
You can make the h2 display inline with the following CSS:
​h2 { display: inline; }​
Demo
You could just use a <span> on the text in question and add an h2 class to the span.
Example on jsfiddle
.header2{
font-size: 120%;
}​
The way to do it in HTML4 (which is what the question was primarily about) is to use two-cell table:
<table><tr valign=baseline><td><h2>Your heading</h2> <td>Other text</table>
Not many people would recommend this these days.
Note: The only way to ensure that the default rendering of h2 (which is browser-dependent, though tends to follow similar lines) is to refrain from using any CSS rule that could apply to an h2 element. I don’t see any particular reason to want to achieve that, though, perhaps on a page that discusses HTML rendering in browsers, or something similar.