I'm fixing an old WordPress syntax highlighter plugin (the plugin owner abandoned it), and while fixing the PHP errors was easy, while I'm fixing it, I might as well improve accessibility as well.
My question is regarding the HTML structure for the code. I want to show the number on one side and the code next to it:
I figured the HTML would be something like this:
<section> <!-- Maybe article? -->
<header>
<h1>Sample HTML</h1> <!-- Maybe <h3> would fit my blog posts best -->
<div role="toolbar">toolabar buttons here</div>
</header>
<ol>
<li><span class="sh-r "><div </span><span class="sh-e ">class</span>=<span class="sh-s ">"grid"</span><span class="sh-r ">></span>
...
</ol>
</section>
But I'm not sure. Should the code be in an <ol> or a <table>? Are the spans for changing the color ok? Is the toolbar role appropriate? Am I missing something? If anyone has an example of an accessible code highlighter, I'd love to see it.
The way it is right now, it's a table with all numbers in one <td> and all the code in another!
Should the code be in an <ol> or a <table>?
I would say that <ol> is more appropriate than <table>.
Using a table here looks a bit like presentational purpose only. I wouldn't call a table with line numbers on the left and code lines on the right exactly a data table.
Are the spans for changing the color ok?
As as default and because you can't do better in HTML anyway, I would say yes, it's fine.
IF HTML has more specific elements to semantically indicate keywords, blocks, numbers, strings, variables, etc. then you would be strongly recommanded to use them instead of spans.
But there aren't really such specific elements, except maybe <var, <kbd> and/or <samp>; but their semantic signification has never been very clear.
However, as a higher level, you should be using <code> or <pre> to enclose the whole code, to mark it as such.
The problem is that, if you use those two elements, you can no longer use <ol> or <table>.
Perhaps the most acceptable compromise would be <ol><li><code>One line of code</code></li>...</ol>.
In any case, for specific things like marking keywords inside the line of code, you don't have another better choice than <span> in what HTML has to offer.
Is the toolbar role appropriate?
Given that you haven't given the code inside the div, it's a bit difficult to answer.
Normally, a toolbar should contain a set of buttons or occasionally other controls like dropdown menus, and in principle nothig else then that.
If the content of that div corresponds to this simple definition, yes, the toolbar is appropriate. Otherwise, no.
Not that it isn't very worth it to use the toolbar role for less than 3 buttons
As I can imagine here, this div contains only a single button to copy the code in clipboard. If it's indeed the case, then by the definition above, it isn't very appropriate.
Related
I don't think it's the case but I'm still taking the shot: Is there such a thing as a non-hierarchical tag in HTML (for markup independent of content structure).
For instance, something like:
<div class="thingy" id="thing">
blabla<n-htag>bla
</div>
<div class="thingy" id="thing2">
John Dodelidoo</n-htag>
</div>
EDIT: I'm realizing now what you're asking is that you want a tag where you can group multiple tags together but being completely unrelated to the HTML structure (e.x. you could start it in the middle of one element and end it in the middle of another that is completely isolated). Because of the way XML is structured, you cannot; it is completely based on hierarchy (as far as I can tell).
For archival purposes, the original answer is below.
If I understand what you're asking, the closest thing we have to that (as far as I can remember) is <span>: while it doesn't change the visual appearance of the page, it allows you to group elements. (And obviously, while you aren't REQUIRED to indent it, you can).
I'm having a bit of trouble styling some text that is being gathered from a database. Is there a quick way of stylizing the article content inside?
This is where I have it being pulled from the database
<div class="col-4 col-fright">
<h1 class="article_title"><?=$this->article->name?></h1>
<?=$this->article->content?>
<?if(count($this->siblings) > 0){?>
<hr>
<strong>You may also be interested in these articles:</strong><br>
<?foreach($this->siblings as $s){?>
<?=$s->name?><br>
<?}?>
<?}?>
</div>
I figured I could just throw a span class around the article content but that would apply the style to all the text.
Here's an example of what the text may look like when I pull it
The title looks fine since I was able to put it into a tag, but everything else is needs work.
I can't think of a quick way. I suppose you could start by looking for the first occurrence of "[more]" and either removing it or properly formatting the content to show the rest of the article once [more] is clicked.
There's not much you can do unless you are reasonably confident about the structure of your source. For example, applying some logic like "if the number of works on a line are fewer than 7 and contain no periods, wrap it in tags" would produce sub-headers in this example, but might break in others that have unpredictable content.
It seems as though you're looking for artificial intelligence to format your document.
I'm having a difficult time doing this probably because I'm not sure what to even call it. But a client wants me to put a small number one in some text at the end of a sentence - wich indicates that they should find the small 1 at the bottom of the page to read more details about that particular sentence. You see this type of thing a lot on container and supplement labels. Can this be accomplished with html? Please let me know if you need clarification.
Kind of like this except instead of an astrick, a small one:
*These statements have not been evaluated by the Food and Drug Administration. This product is not intended to diagnose, treat, cure or prevent any disease.
You must be looking for superscript.
<p>This is <sub>subscript</sub> text.</p>
<p>This is <sup>superscript</sup> text.</p>
In practice:
This is subscript text.
This is superscript text.
Use the character “¹” U+00B9 SUPERSCRIPT ONE. If you do not know how to enter it in your authoring environment (in Windows, you can usually enter it by Alt 0185), you can use the entity reference ¹.
Unlike <sup>1</sup> (which is what most people would use), this means using a character designed by a typographer to fit the font. The stroke width is correct, and so is the vertical placement. Using sup tends to mess up spacing between lines, among other things.
However, footnote references don’t work that well in HTML documents. Especially if you want to make the reference a link to the footnote itself, a tiny little superscript is very poor usability and accessibility. An expression like “[1]” is much better.
Well I think this problem has to do with citation-referencing a resource. You can do the following:
At the end of a sentence you can write the number of the reference(references are located at the bottom of a webpage most of the times) like this-actually is a HTML anchor tag:
The sentence goes here.<sub>1</sub>
Then at the bottom of the screen you can write the reference like this:
<a name="1">The reference details go here.</a>
I think the ideal is to use CSS purely for the layout and presentation, and HTML for the content. But let's say, the company wants to change a "Related articles" box from the bottom of the page to the top of the page. In such case, won't using CSS alone be not an ideal solution, but is better to alter the HTML as well? So as things are right now, HTML still takes a role in the page layout and presentation? Thanks.
Things still appear in the same order as they are in the html - it's not as restrictive as that as we can use absolute and relative positions, but those are undesirable - it's better to use to dom flow to handle placement, and that means yes, you should move the node in the html.
As Jason said, CSS is for styling the content, the content itself and its order is defined by the data (html), as order is necessary for the context of information, so it lies firmly in the 'data' part of what we do rather than the 'display'
EDIT:
I should say this: If you want your data to be totally independent of the display, you should consider defining your pages as xml only and using xsl to define the layout. xsl combines with css to completely abstract the display away from the data.
It does on two levels:
Firstly, the order of elements is still important. CSS floats are used a lot for layout but they also require elements to be in a certain order to get things in the right place. For example, lets say you have two buttons:
<input type="button" value="Click Me">
<input type="button" value="No, Click Me!">
These are next to each other. Lets say someone asks you to move the second button to the far right. This is how you do it:
<input type="button" value="No, Click Me!" style="float: right">
<input type="button" value="Click Me">
If you don't do this, the second (floated) button will appear below the other.
The second way HTML is still important is that there are still things that you need HTML tables for that can't be done in pure CSS at all, in a browser-compatible way (meaning IE6 support generally) or easily. This isn't something the pure CSS zealots like to hear but, like it or not, in the real world it's still true.
This is especially true with HTML emails. If you thought browser support for CSS was bad, mail program support is so much worse. Generally speaking you avoid CSS altogether with HTML emails and just pretend like its still 1999.
HTML still defines the hierarchy for elements.
HTML divides your page in logical sections. CSS then applies a certain look/feel/style to those sections.
If you want to change your page layout to include a section inside another one, you have no choice but to modify your HTML because HTML has a role on page layout.
You can actually move blocks around using nothing but CSS. The compromise always boils down to how good your CSS skills are and how much compatibility with older browsers you're after or care about. There are limits to what CSS can do, so yes, HTML definitely still has a role to play.
it is possible to change the "source order" of divs or use css to change positions. But if its more practical to just change the html, then there's no other way round it. At the end of the day, if its more important content then the source should reflect it for semantic reasons.
I generally use a manual process:
Look at the page, figure out the semantic elements, and build the HTML
Slice up the images I think I'll need
Start writing CSS
Tweak and repeat different steps as necessary
Got a better approach, or a tool?
I have a fairly natural way of coding. The key is to treat the page like a document or an article. If you think of it like this the following becomes logically clear:
The page title is a top level heading
Whether you make the site title or actual page title the h1 is up to you - personally I'd make About Us the h1 rather than Stack Overflow.
The navigation is a table of contents, and thus an ordered list - you may as well use an ol over a ul.
Section headers are h2, sections within those sections are h3s etc. Stack them up.
Use blockquotes and quotes where possible. Don't just surround it with ".
Don't use b and i. Use strong and em. This is because HTML is structural rather than presentational markup. Strong and emphasis tags should be used where you'd put emphasis on the word.
<label> your form elements.
Use <acronym>s and <abbr>s where possible, but only in the first instance.
The easiest: always, always give your images some alternate text.
There's lots of HTML tags you could use that you probably haven't - address for postal addresses, screen code output. Have a look at HTML Dog for some, it's my favourite reference.
That's just a few pointers, I'm sure I could think of more.
Oh, and if you want a challenge write your XHTML first, then write the CSS. When CSS-ing you aren't allowed to touch the HTML. It's actually harder than you think (but I've found it's made me quicker).
Well, when I build a website I tend to try and forget about the design completely while writing the HTML. I do this so I won't end up with any design-specific markup and so I can focus on the semantic meaning of the elements.
Some pointers how to markup things:
menu - use the UL (unordered list) element, since that's exactly what a menu is. an unordered list of choices. example:
<ul id="menu">
<li id="home">Home</li>
<li id="about">About</li>
</ul>
if you'd like an horizontal menu you could do this:
#menu li {
display: block;
float: left;
}
Logo - use a H1 (heading) element for the logo instead of an image.Example:
<div id="header">
<h1>My website</h1>
</div>
And the CSS (same technique can be applied to the menu above if you would like a menu with graphical items):
#header h1 {
display: block;
text-indent: -9999em;
width: 200px;
height: 100px;
background: transparent url(images/logo.png) no-repeat;
}
IDs and classes - use IDs to identify elements that you only have one instance of. Use class for identifying elements that you got several instances of.
Use a textual browser (for instance, lynx). If it makes sense to navigate in this way, you've done good when it comes to accessibility.
I hope this helps :)
I essentially do the same thing Jon does, but here are a few other ideas:
Use Guides in Photoshop (and lock to them). Figure out all of your dimensions for each box/ region ahead of time.
Collect all of your dimensions and color hex values into an info file (I use a txt file) that you can easily reference. This will reduce your alt-tab tax and selecting colors in Photoshop multiple times.
After all my Guides are in place, I slice out the entire website into my images folder, starting with photos and grouped elements, and ending with the various background tiles/images, should they exist. (Tip: Use ctrl-click on the layer preview to select that layer's content).
Notes on using Photoshop:
Use Guides or the Grid.
Use the Notes feature for any pertinent information
Always use Layer Groups for similar elements. We need to be able to turn entire regions off in one click. Put all 'header' content in one Layer Group.
Always name your layers.
You can put each page template in one PSD file and use nested Layer Groups to organize them. This way we don't have to setup all of our guides and notes for each page template on a site.
No shortcuts :) but everybody works slightly differently.
This tutorial that popped up in my feedreader yesterday shows the process from start to finish and might help people who have never done it before but as you are an old hand it's just about streamlining your own methods.
EDIT:
The listapart link certainly is more automated for 'flat' designs where both imageready and fireworks have had pretty good support from day one and it's got better and more semantic with every release but if you have a more complex design it's the twiddly bits that make the design what it is and these have to be done by hand.
I just thought it was worth pointing out that in addition to the excellent advice you've had so far I'd recommend getting a printed version of the design, using a red pen to mark up all the block elements on the design you think you can spot and sitting down with the designer for half an hour and talking through how they envisioned their design working for the use cases that don't fit the static design.
What happens when more text is put in the navigation?
Is this width fixed or fluid?
Is this content pane to the right fixed height or fluid? If it's fluid why did you put a background on it that can't be repeated?
You have a border extending down the page that breaks two otherwise connected elements. Visually it makes sense, but semantically I not can't just use an li to house both those elements. What do you think is more important?
It'll also help you spot potential problems that you might otherwise not have realised were going to be issues until your elbow deep in css.
Not only does it make your job easier after a few times doing it your designer will get a much stronger sense of what is involved in marking up their work - some designers have real trouble comprehending why something they think looks visually very simple will take a few days of css tweaking to make work.
Some of the designers i know, usually uses Illustrator to make the design elements.
This page shows how to do it a little more automated.
Also, get to know the "Layer Comps" feature. I use this for changing button states.
Create layer comps for normal, hover, and active.
In each of these, set up the effects/color overlays and visible layers which belong with that state.
Save for web: go to a different folder for each state, unless it's easier to rename each slice (otherwise your hover button slices will overwrite your regular slices).