I want to set the color of individual words within a <pre> block (roughly speaking, for displaying code with syntax highlighting). The <font> tag is deprecated in favor of using CSS, fair enough; what's the required syntax? In particular, in what element should the words be wrapped? I've previously used <div> to mark chunks of text for CSS styling, but that would seem only suitable for marking full paragraphs.
You should use the simplest, most generic inline element: <span>. For each type of token, give one or more appropriate classes to the span. For example:
<span class="type">int</span>
<span class="name">foo</span>
<span class="op">=</span>
<span class="number literal">42</span>
See it in action.
Update: StackOverflow also does code highlighting -- the code just above is highlighted! What does the HTML for that look like? Viewing the source HTML shows that the first line is highlighted using
<span class="tag"><span</span>
<span class="pln"> </span>
<span class="atn">class</span>
<span class="pun">=</span>
<span class="atv">"type"</span>
<span class="tag">></span>
<span class="pln">int</span>
<span class="tag"></span></span>
// and it goes on
Use span with a style attribute on it. Like:
This is a <span style="color:#f00;">sentence</span>.
<span>
This HTML element is a generic inline container for phrasing content,
which does not inherently represent anything. It can be used to group
elements for styling purposes (using the class or id attributes), or
because they share attribute values, such as lang. It should be used
only when no other semantic element is appropriate. <span> is very
much like a <div> element, but <div> is a block-level element whereas
a <span> is an inline element.
Use <span class="red">text</span> and some basic CSS like .red { color: red; }
Edit : notice class name "red" isn't a good practice
There’s no markup magic here: you can use any inline markup, and you do the magic (coloring or other formatting) in CSS. Technically, not all inline markup is valid inside pre, but browsers don’t really care. It’s more important that some inline markup has some default rendering or functionality.
If you don’t want any default rendering, you can use a or font or span markup, which have no impact on anything when they don’t have attributes and they are not styled. If you want some default rendering, you can use corresponding markup, if it exists, such as b for bold, or u for underline. This means that some special presentation is applied even if your stylesheet is not used.
Most people decide to use just span, as suggested in other answers. It’s simple, and nobody can claim that it has “wrong semantics”, because it has none. But the magic is really in CSS, and you use markup just to distinguish some sequence of characters as an element, so that it can be styled as a unit.
Contrary to what you probably hear most people saying, there is nothing inherently wrong with using font when you are really doing some font settings. But there is a practical problem in the old-style usage like <font color=red>. If you have gazillion tags like that and your boss or customer or wife tells you to use a different shade of red, you will have to change myriads of tags, perhaps in dozens of files. But if you have written <font class=keyword> or <a class=keyword> or, if you prefer, <span class=keyword>, and you use a CSS file referred to in all of your HTML files, you will need to change just one value in that CSS file.
Related
How can I add accessibility to this
Text:
Buttons and Images and anchors:
<div class="btn-group" role="group">
<button class="btn btn-default">
<img class="profile-img">
<span id="user-name">john</span>
</button>
<button class="btn btn-default">
Log out
<i class="fa fa-sign-out fa-lg"></i>
</button>
</div>
<div>
Change recipient
</div>
Too little information provided. Context needed. That being said:
Add an alt attribute to the <img>,
make sure the link has a valid href,
don't rely on FontAwesome icons to convey critical information,
maybe dump the role attribute as it may not be needed (context necessary to know if needed).
Only you are suited to properly add semantics to your code and content, so we really can't do this for you. But, here are some important things to remember/do/follow:
Your HTML is not event valid, so start by correcting that.
Don't ever use an HTML element because of the way it makes the
visible page look (i.e. using a heading like <h4> to make text
small and bold). CSS should be used for all layout and presentation.
Use the most appropriate HTML elements to convey the semantics of the content you have. For
example, go ahead and use the <table> element if you actually are
trying to display tabular data and use <ul> and <li> to make menus.
Despite the (many) myths, the HTML5 sectioning elements (section,
article, nav, aside) are not recognized by most screen readers. Their use actually makes creating a valid document outline much more difficult.
The proper use of heading (<h1>...<h6>) elements is the best
thing you can do to convey a proper document structure.
Use WAI-ARIA landmark roles where applicable as that has been a
standard for many years and all the major screen readers understand
it.
For images, provide the alt attribute to the <img> tag, which is a description of the image. For example, <img class="profile-img" alt="profile picture">.
For semantics, use <em> instead of <i> and <strong> instead of <b>.
Also, look into ARIA (Accessible Rich Internet Applications). A useful ARIA attribute is the role attribute. It provides extra content about the element's purpose and functionality.
I am just beginner with HTML. So, sorry if its very basic question.
So far I know that for each tag we should open and make sure to close it for example:
<span id="xxx" class="yyy">Hello</span>
Today I saw something like this:
<span id="xxx" class="yyy">X</a>
can someone explain please
<span id="xxx" class="yyy">X</a>
This is an error and browsers will attempt to recover from it so that users don't get a broken experience.
Some elements have optional start tags. Some elements have optional end tags. span and a are not among those elements.
The markup <span id="xxx" class="yyy">X</a> is invalid in any context by HTML syntax rules: even if there is a an opening <a> tag before this, with no matching end tag so far, the a element cannot be closed this way, since there would be an open span element inside it, and end tag omission is not allowed for span.
What actually happens depends on the context. If there was an <a> start tag, the end tag </a> would close it, and, as error recovery, the browser would implicitly close the span tag as well.
If there were no <a> start tag, the end tag </a> would be skipped, as not matching anything, and the browser would keep looking for an </span> tag, until it encounters a closing tag for an outer element or a start tag for an element that cannot be contained in a span element, such as <p>.
A simple demo:
<style>span { background: green }</style>
<a><span id="xxx" class="yyy">X</a> Hello world
<hr>
<span id="xxx" class="yyy">Y</a> Hi again
<p>Done.
Here “X” will have green background, as it is taken as the sole content of the first span. There is also green background for “Y Hi again”, as that will parsed as the content of the second span.
So it gets dirty and messy. And although the error recovery is rather consistent across browsers, and being standardized in HTML5, it’s best to avoid it, by using valid markup. You can use validators such as http://validator.w3.org to check your markup.
The first Google search result for "html links" says (paraphrased) that to create a bookmark / section inside a webpage, we've to do this:
<a id='section-2'>Section 2</a>
so that we can link to it like this:
<a href='page.php#section-2' >Click</a>
But why the site is recommending using anchor tag around "Section 2"? -When it can be done using span:
<span id='section-2'>Section 2</span>
Are there compatibility issues? Because the first search result for "creating bookmarks within a webpage" also says to surround the heading with anchor tag:
<p><a name="title">Title</p>
Though this particular example is incorrect for various other reasons.
I've a supplementary question:
Why to surround the heading with the container when it can be done simply like this:
<span id='section-2'></span>Section 2
Does it matter?
<span id='section-2'>Sec</span>tion 2
<a href='page.php#section-2' >Click</a>
There is no point. W3schools is unreliable, just don’t use it, and you will avoid confusion and wrong information; see http://w3fools.com
In the old days, the only way to set a destination anchor within a page was to use <a name=...>...</a> element (at the text level). Later, the id attribute was added and is now supported by all browsers in use, so you can make any element a destination anchor simply by attaching an id attribute to it. E.g., to make it possible to link to a heading like <h2>Section 2</h3>, you could make it just <h2 id=section-2>Section 2</h2>. No need for an artificial extra element.
Using <span id='section-2'></span>Section 2, though formally correct, is not a good idea. You win nothing by using it, as opposite to the more logical markup. And if you e.g. later want to style (highlight) the element to which the user has “jumped” into with a link, using the :target pseudo-class, you will find yourself in an awkward position: the pseudo-class would let you style just the empty content of the span.
Regarding the question in the title, there is no reason to make the top of a page an destination anchror, with <a id='top'>Top of page</a> or otherwise. First, you can refer to the start of the page using just href=# since by URL specifications, # denotes the start of the current resource. Second, “Back to top” links are basically useless or worse: every browser has a simple command for going to the start of the page, and an explicit “Back to top” link can be confusing: back to top of what?
In the early days of html an anchor element was the only way to do this, but just because you can now do it with other element types doesn't mean you should: using an anchor for this purpose is semantically correct because it makes it clear to anybody reading or maintaining your markup that the element is intended as a navigation target. (Noting that there will often be many elements on the page that have an id but are not navigation targets.)
"Why to surround the heading with the container when it can be done simply like this:
<span id='section-2'></span>Section 2
Because if you put the text of your heading inside an element you can style it and/or easily mess with it from JavaScript. Indeed, if it is a heading you may want to put it in an <h1>, <h2>, etc. tag rather than a <span>.
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.
I'm trying to get everything in the anchor tag to be a clickable link. Unfortunately, in IE6 (which is the only browser I'm concerned with currently), the only thing that isn't a clickable link are the inline images. I know that it's not valid html to put a div inside of an anchor but it's not my markup and I've been asked to avoid changing it. Any suggestions to altering the CSS to enable the images as clickable links? If changing the markup is the only solution... any suggestions there? My initial thought was to set the image as a background of it's parent (.ph-item-featured-img), although I'm unclear if that will solve the problem.
Thanks!
<div class="tab-panel-init clear ui-tabs-panel ui-widget-content ui-corner-bottom" id="ph-flashlights">
<a href="#" class="last ph-item-featured clear">
<div class="ph-item-featured-img">
<img src="#">
</div>
<strong>
PRODUCT CODE
</strong>
<p>
PRODUCT CODE Heavy Duty Aluminum Led Flashlight
</p>
<span>Learn more ></span> </a>
<a href="#" class="last ph-item-featured clear">
<div class="ph-item-featured-img">
<img src="#">
</div>
<strong>
PRODUCT CODE
</strong>
<p>
PRODUCT CODE Heavy Duty Aluminum Led Flashlight
</p>
<span>Learn more ></span> </a>
</div>
The problem is that it isn't valid html. Explain that you have to change the markup to make it work as desired. Changing the div to a span and setting the class .ph-item-featured-img to display: block should produce the same look-and-feel and be correct html.
Edit: Another, not as clean solution, is to add a click-listener with JavaScript and invoke the link upon a click on the image.
If you can't change the mark up (which you admit isn't valid), I don't think there is anything you can do here.
You should reconsider changing the markup. This example is bad in so many ways it could serve as a textbook example of what not to do.
Alternate strategies:
Remove everything but the image and
give it an onclick handler that does
the link mechanics.
Remove the DIV and just have the IMG
inside the anchor tag.
etc.
Well i looks like youre already using jQueryUI so why not just through a click even on the containing DIV. Also you should definitely change the markup. If its not valid, its not valid. That can lead to all kinds of problems other than the one youre currently facing. If there is a good reason for change this is it.
This is what the w3c validator returns when I pass in the snippet you posted:
Line 15, Column 46: document type does not allow element "DIV" here; missing one of "OBJECT", "MAP", "BUTTON" start-tag
<div class="ph-item-featured-img">
The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.
One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
If I remember correctly, IE6 requires that every element inside of the <a> tag to be an element with CSS display: inline set on it (or inline-by-default elements like <span>, <b>, <strong>, etc.), or else it doesn't get linked, or links act weird.
Perhaps it is even IE6's HTML parser that is to blame. Maybe it sees the <img src="#"> and thinks, "that's not a valid URL to an image! :ignore:". IE6 is strange that way, often acting in a way that is a diametric opposite to how standards-compliant browsers act.
Truth is, this I have no way of checking all this; thankfully, every Windows computer I have access to has IE7+ on it. Perhaps you should take Google's route and just explicitly say that you're not going to support IE6, redirecting all IE6 browsers to a place where they can upgrade.
I believe you can do this with conditional comments like so:
<html>
<head>
<!--[if lte IE 6]>
<meta http-equiv="refresh"
content="2;url=http://www.microsoft.com/windows/internet-explorer/default.aspx" />
<![endif]-->
...
</head>