I was wondering if anyone could suggest a shorthand for html coding specifically in naming classes and ids or just designating html elements. Currently with regular html i am forced to write:
<div class='class1'> <div id='id1'> </div> </div>
It seems kind of heavyhanded to me having to write div class='' or div id='' , each time. I keep writing the same type of thing over and over again. I know its normal but it doesnt seem optimal at all. Is there another way this can be written either in standard html, html5 or using a other markup language or preprocessor that still maintains the <> symbols but replaces div class= or div id = with something allittle less verbose? but equally expressive? Thank you.
You could try an HTML pre-processor such as HAML (http://www.haml.info).
With HAML, your code would go from this:
<div class='class1'> <div id='id1'> </div> </div>
to this:
.class1
#id1
And something a little more complicated like this:
<html>
<body>
<h1 class="heading title">Heading</h1>
<p class="paragraph description">Lorem ipsum dolor sit amet...</p>
</body>
</html>
could be written in HAML like this:
%html
%body
%h1.heading.title Heading
%p.paragraph.description Lorem ipsum dolor sit amet...
I'd recommend you to take a look at pug https://pugjs.org/api/getting-started.html
Is possible to select part of text in CSS3 until "br" badge whitout editing html.
I want to select this part:
"Lorem Ipsum is simply dummy text"
<p>Lorem Ipsum is simply dummy text <br/>
of the printing and typesetting industry.</p>
You can use the first-line modifier as shown below:
p:first-line {
color: red;
}
As #JordanS has correctly highlighted, there are cases where this will fail. For a robust solution you either update the HTML or use javascript.
https://jsfiddle.net/01c5tbst/
Update:
For posterity the solution actually desired to apply the style only to the first line of the first matching element on the page, so the final solution actually was this:
p:first-of-type::first-line {
color: red;
}
I would like to single letters were not on the end of a paragraph i site. I know it 2 ways:
A)
<p>... <nobr>a może</nobr> tak ...</p>
B)
<p>... a może tak ...</p>
Which one is better and should be used today? Or maybe another?
It would be nice if it was as easy to work with.
Mozilla states, that <nobr> is deprecated and also never was standard HTML. So it isn't recommended to use it at all:
<nobr> on developer.mozilla.org
But Mozilla doesn't recommend using as a substitute, but to use the CSS style white-space instead:
white-space: nowrap;
My understanding is, that you should use only when single word pairs shouldn't get divided. For example, if you have abbreviations of units behind an amount, like 5 ml:
<p>Lorem Ipsum dolor sit amet 5 ml</p>
This also is more like a piece of content-based information since it describes, that those two words belong together and should not get separated in order to maintain readability and a good understanding.
Whereas <nobr> has been designed to make whole paragraphs do not add line breaks.
And this already explains, why <nobr> is not a standard HTML tag, since HTML should only contain content-related information, and everything about style/design should go into the stylesheet.
Recently a friend decided not to close his tags or attributes in HTML because it's not required and he'll save some bandwidth and download time. I told him it's a bad idea and to be "better safe than sorry", however, I could only really find 2 resources on the issue:
http://css-tricks.com/13286-problems-with-unquoted-attributes/
http://www.cs.tut.fi/~jkorpela/qattr.html
#1 is good, but even as he said, they aren't really real world examples, which is why I went to #2, but they only really show an <a> which is much more different than most other tags/nodes.
Is there another resource or test cases as to a better reasons to quote your attributes and close your tags?
You can often leave the closing tags off many elements without changing 'the way it looks'. However, even though one of the main goals of HTML5 is to standardize how browsers deal with bad markup, not closing tags can impact your content in unexpected ways. Here's a simple example, a list of items where some of the items are blank, both without explicitly closed tags and with:
<ul>
<li>Item
<li>
<li>Item
<li>
<li>Item
</ul>
<ul>
<li>Item</li>
<li></li>
<li>Item</li>
<li></li>
<li>Item</li>
</ul>
Looking at the two in a browser they look identical. However, if you add a bit of CSS to hide the empty ones:
li:empty { display: none; }
Now they don't look the same, even though the markup hasn't changed from the previous example. The underlying reason for this is that the two versions produce different DOM trees, this version iterates through all the nodes in both lists and counts them, then shows the results and the list of nodes found in alerts. You can see the top list has 12 DOM nodes, the lower list has 15. The results are at least consistent cross browser, and the difference is in text nodes which you'll frequently skip over when scripting anyway, but this shows that even if the visual output looks the same when tags are closed or not, there are underlying differences even in an example as simple as this.
Not closing tags can lead to browser incompatibilities and improperly rendered pages. That alone should be enough reason to properly close your tags.
Saving bandwidth and download time is a horrible excuse, if you ask me. It's 2011, and even on dialup the few bytes you save on not closing a few tags will not be even close to noticeable. A mangled page due to improper rendering, however, will be.
Not closing tags can create unexpected blank spaces between elements in the markup.
Consider the following example.
<!-- English quoting rules. -->
<style>
blockquote > p::before { content: open-quote; }
blockquote > p::after { content: no-close-quote; }
blockquote > p:last-of-type::after { content: close-quote; }
</style>
<!-- This is ok. -->
<blockquote>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
</blockquote>
<!-- This isn't. There are blank spaces after the last (unclosed) <p> element.
Thus, the closing quote appears separated with a space from the text. -->
<blockquote>
<p>Lorem ipsum dolor sit amet.
<p>Lorem ipsum dolor sit amet.
</blockquote>
That's just bad coding practice in my opinion.
There are two types of programmers; those that care, and those that don't.
It's lazy programming, the same as not having coding standards, or not formatting your code... it's like being a carpenter and not sanding the edges of the table you just built.
Most browsers support it, but some might complain.
Most HTML tags are containers. Consider:
<style>
section {
color: red;
}
</style>
<section>
Stuff inside a section
</section>
Stuff outside a section
<p>
Other text
</p>
In this example, "Stuff inside a section" would be red text, "Stuff outside a section" is not red. In this example:
<style>
section {
color: red;
}
</style>
<section>
Stuff inside a section
Stuff outside a section
<p>
Other text
</p>
... in this example, "Stuff inside a section", " Stuff outside a section", and "Other text" would ALL be red - that is, the section never ended. The browser may try to assume where the section could have ended, but in my above example the only assumption possible is that the section continues to the end of the document, which is not what was intended.
In short, not closing HTML tags just makes things more confusing for you, will cause pages to render inconsistently from expectations and between browsers, and is just generally a bad idea. So bad, in fact, that it shouldn't even be taken as a serious suggestion at all. Your friend has clearly never developed an actual web site.
You can't do much in terms of site design/layout if you don't close tags.
I am trying to create a pre-formatted block of text using the pre element where there are sometimes a few blank lines in between the content. The problem is that occasionally the text breaks onto a separate line after either a forward slash(/) or colon(:)
An example is as follows:
<pre>Lorem ipsum dolor sitat: http://wwww.site.com/foo/bar</pre>
Displays as:
Lorem ipsum dolor sitat: http://wwww.site.com/foo
/bar
Does anyone know how to resolve this?
I'm with #Kyle, without seeing the page itself I think that it is too long for the container that you have it in, so maybe make the text smaller or widen the container and see if that helps.
I tried:
<html>
<pre>Lorem ipsum dolor sitat: http://wwww.site.com/foo/bar</pre>
</html>
and didn't get any line breaks.