I have used space characters in html to give regular spaces in my text but interestingly some text is still does not have regular spaces. Please have a look,
<ul style="margin-left:40px;background-color:#6CF ;padding-left:20px;padding-right:10px;padding-top:10px;padding-bottom:10px; font-size:12px;" >
<li>CS-103 Programming Languages</li>
<li>EL-133 Electronics-I</li>
<li>MT-111 Calculus</li>
<li>CY-105 Applied Chemistry</li>
<li>PH-121 Applied Physics</li>
<li>HS-105 Pakistan Studies | HS-127 Pakistan Studies(for Foreigners)</li>
</ul>
Here is how it looks,
CS-103 Programming Languages
EL-133 Electronics-I
MT-111 Calculus
CY-105 Applied Chemistry
PH-121 Applied Physics
HS-105 Pakistan Studies | HS-127 Pakistan Studies(for Foreigners)
Please help out to make all list element look same. Thanks
The text does have regular spaces. The problem is that the font you use is not fixed width, and the length of the course type/number is throwing it off.
Use a table for stuff like that.
Depending on its semantic value, you could also use a definition list.
HTML:
<dl>
<dt>CS-103</dt>
<dd>Programming Languages</dd>
<dt>EL-133</dt>
<dd>Electronics-I</dd>
<dt>MT-111</dt>
<dd>Calculus</dd>
<dt>CY-105</dt>
<dd>Applied Chemistry</dd>
<dt>PH-121</dt>
<dd>Applied Physics</dd>
<dt>HS-105</dt>
<dd>Pakistan Studies | HS-127 Pakistan Studies (for Foreigners)</dd>
</dl>
CSS:
dl {
overflow: hidden;
}
dt {
float: left;
width: 80px
}
http://jsfiddle.net/SVdTt/
Brad's feedback about inconsistent spacing when using non-monotype fonts is correct (and there is no \t symbol to use for tabulation in html), however it may be more appropriate to use a definition list here with some styling applied.
Semantics fit perfectly (a term name dt followed by its description dd):
<dl>
<dt>CS-103</dt><dd>Programming Languages</dd>
<dt>EL-133</dt><dd>Electronics-I</dd>
...
</dl>
Fiddled
You will need to choose a monospaced font for them to look the same if I understand correctly.
Related
Considering the following paragraph:
So in the first set, we start to mix those 3 codes:
- AA
- BB
- CC
with those codes:
- Aa
- Ab
- Ac
to get the perfect result we're looking for.
Is this paragraph semantically incorrect?
If not, what's the html5 way of writing it?
If I use ul, then it splits the paragraph in three parts, which is semantically inexact (isn't it?).
I can use br or span, but then I have to do all the formatting myself.
Are those the two only ways we have?
If so, why not having an enum element, like this:
<p>
So in the first set, we start to mix those 3 codes:
<enum>
<ei>AA</ei>
<ei>BB</ei>
<ei>CC</ei>
</enum>
with those codes:
<enum>
<ei>Aa</ei>
<ei>Ab</ei>
<ei>Ac</ei>
</enum>
to get the perfect result we're looking for.
</p>
Would that make any sense?
I would like to propose that to the W3C, do you think that's a good idea?
If not, why?
I think using description list is the best way for the above particular example like;
<dl>
<dt>So in the first set, we start to mix those 3 codes:</dt>
<dd>AA</dd>
<dd>BB</dd>
<dd>CC</dd>
<dt>with those codes:</dt>
<dd>Aa</dd>
<dd>Ab</dd>
<dd>Ac</dd>
</dl>
I finally found an answer that satisfies me: https://github.com/whatwg/html/issues/4685.
Basically, breaking the "p" element is not a big deal, as the p element is an html paragraph, which is different from an english paragraph.
So, the html way of doing a list inside a paragraph, is simply to break the p before the list, and create another one after, like this (for instance):
<p>The list should be</p>
<ul>
<li>responsive</li>
<li>short</li>
<li>precise</li>
<li>easy to use</li>
</ul>
<p>to do all the things I want</p>
A strange question, but I'm struggling over semantics vs accessibility vs appearance. Please note this question isn't related to CSS, but the underlying HTML5 code. Usually I wouldn't post this type of question, but this has really erupted into a debate.
I have a business statement on a website that defines why my organisation is the best (actually a sample statement...):
TL;DR What is the best HTML5 element used to display this, from a semantics/accessibility perspective?
Our initial guess was that a simple list would suffice:
<ul>
<li>Footballs:</li>
<li>Rounder</li>
<li>Better</li>
<li>Stronger</li>
</ul>
But then the argument is that sentence structure was more important, so perhaps:
<div>
<span>Footballs:</span>
<span>Rounder,</span>
<span>Better,</span>
<span>Stronger</span>
</div>
However, this approach then renders in the commas, which is unsightly. However, the counter-argument in my mind says commas should be there for screen readers...
We've even considered the DataList, but it doesn't feel quite right...
<dl>
<dt>Footballs:</dt>
<dd>
<span>Rounder</span>
<span>Better</span>
<span>Stronger</span>
</dd>
</dl>
Is there a specific HTML5 element that covers this type of statement?
You have a list of something (in this case, the benefits), and HTML offers four ways to convey this. You cover three ways, and the fourth is using ol, but this is only appropriate if the order is relevant, which doesn’t seem to be the case here, so we can ignore it.
Natural language
Just a sentence with punctuation:
<p>Footballs: rounder, better, stronger.</p>
You can add span element for styling purposes. And you could even visually hide the commas, but there is no need to go this way, simply use one of the markup alternatives instead.
Markup: ul
Having "Footballs" as part of the list doesn’t make sense. This "label" should be outside of the list.
<p>Footballs:</p>
<ul>
<li>Rounder</li>
<li>Better</li>
<li>Stronger</li>
</ul>
Markup: dl
The three benefits should either be a ul in one dd, or each one should be its own dd. There is a semantic difference, but it’s not a clear decision in this example case.
<dl>
<dt>Footballs</dt>
<dd>
<ul>
<li>Rounder</li>
<li>Better</li>
<li>Stronger</li>
</ul>
</dd>
</dl>
<dl>
<dt>Footballs</dt>
<dd>Rounder</dd>
<dd>Better</dd>
<dd>Stronger</dd>
</dl>
Which one to choose?
If you are fine with having and displaying the punctuation, go with the natural language solution.
If there should be no punctuation, go with the ul. It’s less complex than dl, and as you don’t have additional name-value groups, dl isn’t really "worth" it.
If you want to go with a list then write:
Footballs:
<ul>
<li>Rounder</li>
<li>Better</li>
<li>Stronger</li>
</ul>
Because Footballs is not part of the list footbals are. You my want to add Footballs into some h tags.
The elements of second one have no semantic meaning and would be as if you would write:
Footballs: Rounder, Better, Stronger
So it is correct, if you think commas are required.
The third one would be as if you write:
Footballs: Rounder Better Stronger
So if you think it is not understandable that way and commas would be needed, then you cannot go with this approach.
I would go with the ul li version, for the business statment because I see dl more in a dictionary like context.
In the style guide for the maintenance of a bulky documentation of an existing system using HTML which I has to maintain for a client, I found, that text given in a code-tag should be enclosed with spaces like:
..., the element<code> STATE </code>matches datatype ...
In most cases the whole text is enclosed in <p> tags:
<p>..., the element<code> STATE </code>matches datatype ...</p>
Does anyone has an idea why I should write <code> STATE </code> with no place before and afterwards?
One explanation could be that rendering the HTML leads to "better" (i. e. same / bigger width, ...) constant spaces between normal text and the code (the space in code-tag seems to be "bigger"). Is that approach meaningful? Or are there arguments against this rule so I could convince the program director to kick-out this rule?
This sounds like a way of enforcing a style without, for whatever reason, using CSS.
There's no reason to do this other than to conform to somebody's preference (your boss or a client, presumably, in this case).
To back this up, the HTML specification itself uses examples of <code> elements wrapped within <p> elements which do not follow this format:
Example 104
The following example shows how the element can be used in a paragraph to mark up element names and computer code, including punctuation.
<p>The <code>code</code> element represents a fragment of computer code.</p>
— Example 104 within the HTML5.1 specification
First of all, I'm not a native English speaker, so please prepare my bad English.
In HTML, since I realize that style="white-space:pre;" attribute makes the element like as <pre> tag, I tend to use that attribute (optionally also use "font-family:monospace;" when I need), not <pre>. To me, <pre> feels very less semantic. Using stronger semantic tags with proper styling looks more logical.
Currently, my rule is like this:
preformatted plain text, bunch of characters -> use <pre>.
preformatted paragraph-like things -> use <p style="white-space:pre;"> (optionally add "font-family:monospace;").
Following that rule, I've been using <pre> tag only for ASCII art because I don't think ASCII art is a paragraph-like stuff. However, I think stanza ≒ paragraph, so I use <p style="white-space:pre;"> when I express verse things(poem, poetry, lyrics) in HTML.
My problem is.. I cannot decide what should I use for code. In other words, I'm confused whether the bunch of code is paragraph or not. In addition, both <pre> and <p> with styling looks having a point and logical.
Anyway.. Wikipedia says:
A paragraph is a self-contained unit of a discourse in writing dealing
with a particular point or idea.
Collins Cobuild Advanced Learner's English Dictionary says:
[NOUN] A paragraph is a section of a piece of writing.
I think those can be partially valid for code. Especially, these example is more confusing:
Let's a + b, and divide it by 2.
result = a + b result = result / 2
The only difference between them is one is natural language and the other is code. The natural language one is obviously normal paragraph, and that fact makes me feel the code also paragraph partially because they even has same discourse. The talk about 'code is documentation' or 'self-documentation code' also makes using <p> feel more right.
However, I do feel <pre> also logical. Especially when it is more like less human readable, more machine-like, raw and primal, like pure machine code (01010101100..) or morse code. I would tag them with <pre>, and though I cannot say why exactly, it looks more right. However, using <pre> for some code and using <p> for high level code feels inconsistent.
I don't think it's just simple preference problem, like both are fine, just pick any of them and be consistent', and the logical answer exists, which I need.
Any ideas?
Thanks in advance.
I'm trying to figure out a coding as a newbie. Wondering what the # symbol means or stands for in a code, like #55555 for a number. Or #menu1 in a div: div#menu1 ul.rMenu?
Trying to back into an education
i think in case of #55555 , # indicates hexadecimal code and in case of #menu1 , # indicates menu1 is an ID attribute..
Like many symbols used in programming, the meaning of the symbol is different in different contexts. Below are a few examples:
#555555 means a colour (grey in this case) in hexadecimal notation.
#menu1 means any tag with the id "menu1".
Also other contexts, such as in Cold Fusion #name# means insert the variable named "name".
In general the examples that you're mentioning look like they're from CSS, so feel free to look up CSS:
http://www.w3schools.com/cssref/
# is used for elements with some id.
<div id="menu"> ====> div#menu
. for class
<div class="menu"> ====> div.menu
# refers to hex code
I think people are taking this question a bit too literally and providing answers for those exact two cases.
There is no global convention regarding # in source code. It's a piece of punctuation that doesn't have a conventional use and isn't strongly associated with anything in common use in the English language, so it gets re-used a lot in programming languages.
It's often used to comment out lines (Ruby, Perl, Python, many others):
if foo
# Do something for foo.
end
It's used in C and C-derived languages to control the preprocessor:
#include <stdio.h>
In addition to the CSS and HTML usages that are already covered.
See Wikipedia for links to many other uses in other programming languages.
#55555 - Hexadecimal Number.
#menu1 - id of element
div#menu1 - id of element div.
A. Not Code your talking about CSS http://www.html.net/tutorials/css/lesson1.php
B. Your talking about its use in 2 different instances.
#55555 refers to a color. The # before the number says .. Hey I'm going to tell you a colour now
#menu1 refers to a specific ID.
This basically means select an element with that id from in a div
For ex.
<div>
<div id="menu1">
Hi
</div>
</div>
And the CSS would be something like (Color this red)
div #menu1{
color:#550000;
}