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).
Related
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.
In general I like the pretty option. I like my html to be readable and pretty helps. But there are times when it gets in the way. For example.
x.do-not-care-about-spaces It can go either way here.
y.please-no-spaces These
y.please-no-spaces Should
y.please-no-spaces Touch
What I'd like to see is:
<x class="do-not-care-about-spaces">It can go either way here.</x>
<y class="please-no-spaces">These</y><y class="please-no-spaces">Should</y><y class="please-no-spaces">Touch</y>
But what I do see is
<x class="do-not-care-about-spaces">It can go either way here.</x>
<y class="please-no-spaces">These</y>
<y class="please-no-spaces">Should</y>
<y class="please-no-spaces">Touch</y>
I know there are several ways to work around this (with css, by putting html in the jade file), but what I'm hoping for is a jade-y way of doing it.
EDIT: Updated example with example tags, rather than divs. I am asking specifically about controlling spaces between DOM nodes in jade's HTML output, not the visual space between elements on a rendered web page.
There is a similar question on the github repo and the essential comment is:
No, it is not currently possible to force only part of the document into pretty/normal mode. The general recommendation for this is to use the normal (non-pretty) mode which is the default for exactly this reason. You can explicitly add white space using = ' ' (on its own line) when actually needed for the formatting of the page.
A <div> element takes up the whole row, so it makes sense that it's rendered as such too.
I think what you need are <span> tags
span.no-space These
span.no-space Will
span.no-space Touch
<span class="no-space">These</span><span class="no-space">Will</span><span class="no-space">Touch</span>
BTW there's also the inline #[…] syntax which makes more sense if you're putting tags in one line
#[span.no-space These]#[span.no-space Will]#[span.no-space Touch]
Note that this syntax will not however make divs appear in one line though, you still have to use spans.
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 understand the concept of one id in an html page. As a noob, i was just wondering if you can use the same id once for different html pages. Will that be consider sloppy?
For instance, <div id="1"></div> (used only once)in index.html and used <div id="1"></div> again in product.html. Is that consider bad?
I tried to do a search but found no answers.
Thank you!
!edit! Thank you for the answer guys. Appreciated!
An id should only be used once on a single document. It is used for elements that only should appear once on the page anyway (think of a "top navigation bar"). Classes are used for elements that can appear more than once (think of a "particularly styled table", a "repeatable block of information" or things that share particular charasteristics such as "on this browser width this block spans 6 columns" in for example bootstrap). It is perfectly normal to use the same id on different pages. Usually you'll make a skeleton/template for your layout, where each element will be styled the same on each page that uses this template. It is then helpful to have the same id for the same element across different pages. (or: It would be considered sloppy to change the layout of the page on every page, using different id's for each element, as it would be hard or impossible to maintain your pages.)
It's fine to do that, but you would want to name your ids something better than "1". Something more descriptive, like <div id="main-part"></div> would be better.
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.