Well, I have a H2 tag with a company name and next to that in the same line we need to have a Superscript tag (TM), I have:
<h1 class="Red">Company Name</h1><sup>™</sup>
I get:
Company Name
™
I guess there is a way to avoid this newline between those tags using CSS or something but I am not able to figure it out, I will appreciate any help.
The proper format is to wrap the entire phrase inside your <h1> tag like so
<h1 class="Red">Company Name<sup>™</sup></h1>
Keep in mind with this answer that any styles you apply to the h1 tag will apply to your sup tag as well.
<h1 class="Red">Company Name<sup>™</sup></h1>
The main issue I run into with sup tags is that they can push up the line-height on lines containing them.
It's easy to fix with the following CSS; just figured it was worth mentioning.
h1.Red sup { line-height: .1em;}
Add this to your CSS.
.Red {
display:inline;
}
Header tags default to line breaks so you need to set it to display inline which will not break after the end h tag
Related
I got an error from HTML validator: "End tag h2 seen, but there were open elements."
And it is caused by this code:
<h2 class="heading heading--sub feature-box__heading">Ärikinnisvara- <br> haldus</h2>
Problem is that I got 3 errors for the exact same thing (I am using the same solution in 3 different places) and I really need it to break line after "-". What would be another way to solve this problem if I want to write valid HTML?
You can use <span> inside your <h2> and make css for breaking like this:
h2 span {
display:block;
}
<h2>This is h1 title -<span>span tag</span></h2>
You need to close your br tag in order for this to work. br works in every element, except those we are all sure don't work, such as !DOCTYPE html or script or even style. <br />
So I'm having a sorta minor issue that is really bothering me. I'm trying to make a single line but the live site is separating the h3 and the sup onto two separate lines.
<p><h3><b><font color=" crimson";>CONSENT</font></b></h3> <sup>
Forgot? I got you </sup><a
href="http://www.exampledomain.com/example"
target="_black">Script</a></p>
The concept is to have the "Forgot? I got you" and the button be on the same line but spaced a little further from the word "Consent".
As you haven't really provided an exact example of what you want your result to look like, you might consider using the following mark-up :
<h3 style='color: crimson; display:inline-block;'>
CONSENT
</h3>
<small>
Forgot? I got you
Script
</small>
What this does :
<h3> and other heading tags are block level elements, which means that they will take not be rendered inline by default. You can change this by indicating that you want to display them inline by using display:inline; or display:inline-block;
The <font> tag hasn't been used in ages, you are better off simply applying a style attribute to the most relavent tag to style your contents.
You were previously using all of these tags within a <p> tag, which can constitute invalid markup. They have each been broken out, if you need some type of container tag, you can use a <div>.
Replaced the superscript tag <sup> with a small tag <small> to keep everything on the same line. You could replace this if you preferred.
Previously, you were using target="_black", which undoubtedly you meant to be target="_blank" for your <a> tag.
Generally, you would want to avoid using an abundance of inline style tags in favor of using an actual CSS file along with class attributes.
Example
<h3 style='color: crimson; display:inline-block;'>
CONSENT
</h3>
<small>
Forgot? I got you
Script
</small>
Your code needs a lot of work but really you could achieve this with simple CSS. As simple as it gets would be using a vertical-align on a <span> element, unfortunately vertical-align: middle; does NOT work directly on your <p> or <h3> tags. There are plenty of other ways to achieve this with separate <div>'s and all but here is the most basic.
HTML:
<span class="vAlign">
<h3 class="crimson flt-left vAlign">CONSENT</h3>
<p class="vAlign"><a href="http://www.exampledomain.com/example"
target="_black">Forgot? I got you</p>
</span>
And CSS
.flt-left{
float: left;
}
.crimson {
color: crimson;
}
.vAlign {
display:inline-block;
vertical-align: middle;
}
Let's cut to the chase. This is the piece of code that is giving me trouble:
<p id="mainBlock">
<img src="/icons/128x128.png" id="icon">
<h3>App name</h3>
<span id="version"></span>
</p>
<p>Description</p>
http://jsfiddle.net/DerekL/0pd7njbr/
Looks okay to me. But when I try it in Chrome, this is what I see in the console:
This is not the correct markup! Notice the <p> is messed up. I have been looking at this for a while now and still can't see what's causing that.
I can't believe I made a question asking why my p tags are not working.
p elements may not contain headings, including h3 elements.
The end tag for p elements is optional, so the p element is implicitly ended by the h3 start tag.
Its not appropriate to add a heading tag within a p tag that is probably why you are getting that problem. Look here: How to use an <h2> tag </h2> inside a <p></p> in the middle of a text?
Is it a proper method to use a <span> tag inside an <h1> tag?
<h1>
<span class="boardit">Portfolio</span>
</h1>
I know we can write it in this way...and am also following the below syntax in my own website..
<h1 class="boardit">
<span>Portfolio</span>
</h1>
However, I Just wanted to know the cleaner form of html..
Yes you can.
HTML4 has this to say:
<!ENTITY % heading "H1|H2|H3|H4|H5|H6">
<!--
There are six levels of headings from H1 (the most important)
to H6 (the least important).
-->
<!ELEMENT (%heading;) - - (%inline;)* -- heading -->
And %inline; is:
<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">
And %special; includes <span>.
The current HTML has this to say:
Content contents
Phrasing content
And Phrasing content includes <span>.
Yes you can. It can be used to format a part of a h1 block:
<h1>Page <span class="highlight">Title</span></h1>
If the style applies to the entire h1 block, I do this:
<h1 class="highlight">Page Title</h1>
Yes, it's typically fine to use a span inside of an h1. span is an inline element, so it's typically okay to use it inside anything (that allows elements inside it!)
And there's not really a cleaner way to do it sometimes, say if you want to style only part of the h1.
On the other hand... don't do it if it's not necessary, as it is a little ugly : )
Yes that's fine, but why not
<h1 class="boardit">
Portfolio
</h1>
If thats all you're doing?
Yes, you can. The span displays inline, so it should not affect the styling of the H1.
Yes, we can use span tag with header tags and there is nothing wrong in it. Indeed this is widely used for styling header tags, specially for coloring a particular word or letter.
Yes, we can use span tag with header tags and there is nothing wrong in it. Indeed this is widely used for styling header tags, specially for coloring a particular word or letter.
<h1 style="display:inline;">Bold text goes here</h1>
<span style="display:inline;">normal text goes here</span>
Think in above lines - Worked for me - use display:inline prop
I was wondering if we could add a span tag inside a tag....
<h2 style="text-align: left;"><span style="font-weight: bold;">Dog dresses</span><br></h2>
Is the above method right? Is it safe to use...???
I know that We can define some class here and let it go inside other elements like this.
<h2>Dog dresses</h2>
.bold {font-weight: bold; }
OR
<h2 class="bold">Dog dresses</h2>
h2.bold a { font-weight: bold; }
Please share your views..
Yes, it's fine. <span> is an inline element. Unless you add the css display: block; to it, it can go in the <a>.
Both forms are legal. (<a> inside <span> or <span> inside <a/>)
<a><div></div></a>
<!-- illegal < HTML 5, you cannot put block level tags in an <a> -->
<!-- legal in HTML 5 -->
BUT, normally I would only use a <span> inside an <a> for some purpose, because there is some content which needs special treatment
this is <span class="lookatme">special and needs treatment</span>
This is pointless (for me :-) )
<span class="lookatme">some text</span>
THis would normally be
some text
I normally think with <heading> tags, the <a> should be inside the <heading>, but I don't think it is wrong to do the reverse
While that code is valid, it's not the best way to do it.
Here's your code again, indented for clarity
<h2 style="text-align: left;">
<a href="mydomain.com">
<span style="font-weight: bold;">Dog dresses</span>
</a>
<br>
</h2>
The first thing to notice is you have a trailing <br>. What's that for? Extra spacing? Well use padding instead!
Secondly, you don't need the span element - the bold style can be applied directly to the <a> tag.
Why not just write it like this:
<h2 style="text-align: left; padding-bottom: 1em">
Dog dresses
</h2>
It's perfectly legal to have a span tag inside an a tag.
Also read this:
Span inside anchor or anchor inside span or doesn't matter?
It is legal and safe. You can always check your markup at free validation service of w3 organisation: http://validator.w3.org/check
If memory serves correctly, yes, you're allowed to have a <span> within an <a>, and an <a> within an <h2>. Where you define your class is up to you; put it wherever it makes most sense.
You can check if you've written valid HTML here, but don't fret too much if it doesn't validate as long as it renders correctly in all the prominent browsers.
I would perfer to use CSS rather then using inside .
It reduce the complexity of HTML code, it reduce the stress to the browser, by not rendering complex structure.
Easy to grab using JavaScript.
I want to add a different perspective which lacks among answers. Imagine you want to achive something like this, partially linked header:
<h1>This site is amazing</h1>
and a link which is a partial header:
<h1>This</h1> site is amazing
which makes not much sense but syntactically true.