I am including a class name in some of the HTML tags, but not necessarily going to use them later, if I am not using them in my CSS file, VS Code will show me this warning:
CSS class selector 'nav-links' not found
(assuming I gave the class name as nav-links)
for example, if I write the below code:
<div class='hero-introduction'>
<h2>
Elena Joy <br />
Photographer
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque molestiae dolores cum debitis
corporis. At enim aut atque maiores omnis.
</p>
<a href='.gallery'>Gallery</a>
</div>
then I am getting this warning:
CSS class selector 'hero-introduction' not found
if I add this class to my CSS file then there is no error to be seen. Is it necessary to add all the class names initialized in my HTML file in the style.css file?
I am using the "HTML CSS Support" extension in Visual Studio Code.
No, it is not necessary to define all the class names used in the HTML in your CSS file. Classes that you specify in HTML but that are not defined/referenced in a CSS file make no difference in the visual output of your page. The warning is designed to show you that the class is not defined in any CSS file and as such might be confusing to other developers reading your code as the class serves no purpose.
Downgrade your extension named "HTML CSS Support" to below version 1.5.0 (since they have added css validations in new update).
I also have been seeing "CSS class selector '__' not found" messages in the Problems tab in my VS Code Terminal. I disabled the HTML CSS Support extension, and now I am no longer seeing those warnings in my terminal. :)
Related
This question already has answers here:
Is it necessary to write HEAD, BODY and HTML tags?
(6 answers)
Closed 2 years ago.
Below is the code that my style.css file contains
body{
background-color:pink;
font-size: 130%;
}
The code that my style_placement.html file contains
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Style Placement</title>
<link rel='stylesheet' href="style.css">
<style>
h2 {color:maroon}
</style>
</head>
<h1>Style Placement header</h1>
<p>This is heading one</p>
<h2>Subheading 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex et similique cupiditate dignissimos delectus nulla dolore, eos dolorum quidem excepturi, facere non repellat accusamus, atque? Id voluptate eos et accusantium.</p>
<h2>Subheading 2</h2>
<p style='text-align:center'></p>
</html>
Here I am not even using body tag in html file but styling for that tag has been applied. Can anyone please help me to know what is going on behind the scene ?
Below is the screenshot of how my output looks like in web browser
The start and end tags for the body element are explicitly optional according to the spec.
They can be inferred from the content around them. The element is still created even if the tags are not there.
Tag omission in text/html:
A body element's start tag can be omitted if the element is empty, or if the first thing inside the body element is not ASCII whitespace
or a comment, except if the first thing inside the body element is a
meta, link, script, style, or template element.
A body element's end tag can be omitted if the body element is not immediately followed by a comment.
This has always been the case. See, for example, the HTML 4 spec:
The bulk of the HTML DTD consists of the declarations of element types and their attributes. The <!ELEMENT keyword begins a declaration and the > character ends it. Between these are specified:
The element's name.
Whether the element's tags are optional. Two hyphens that appear after the element name mean that the start and end tags are mandatory.
One hyphen followed by the letter "O" indicates that the end tag can
be omitted. A pair of letter "O"s indicate that both the start and
end tags can be omitted.
The element's content, if any. The allowed content for an element is called its content model. Element types that are designed to have no
content are called empty elements. The content model for such element
types is declared using the keyword "EMPTY".
and
<!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL) -- document body -->
The browser is handling "dirty" html. It's not recommended to rely on it, since not every browser is handling in the same way.
Some further info
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
So I just started learning HTML and CSS like 2 days ago and I ran into a problem. I'm creating a cheat sheet for myself and all the CSS text indentations applies only to my h2 tags no matter what I do.
<section>
<!-- Bold, Italics, Underline -->
<h2>Bold, Italics, and Underline</h2>
<strong><strong></strong> The strong tag is used to <strong>bolden</strong> text.
<br>
<strong><em></strong> The em tag is used to <em>italicise</em> text.
<br>
<strong><u></strong> The u tag is used to <u>underline</u> text.
</section>
This is the way I've written my code, I sectioned my lines based on relevant tags and put all of them in a div with a container class. In my CSS stylesheet, I was playing around with text-indent and found that no matter where I place it, it only applies to my h2 tags.
I've tried nesting that command within different CSS classes, removing all my sections and just keeping my text in the div, etc but nothing works. I didn't want to use paragraph tags for each line of text because of the padding which is why I used regular text.
As w3schools about text-indent stated:
Definition and Usage
The text-indent property specifies the indentation of the first line in a text-block.
As for what counts as a text block, you can find it here.
Or you can move the section by using the CSS margin-left style.
Example:
<section style="margin-left: 12px;">
<strong>This is Indented with margin</strong>
<br>
Lorem consectetur mollit proident ad quis commodo pariatur ullamco mollit eiusmod cupidatat amet fugiat.
</section>
<br>
<br>
<br>
<section>
<strong>This is unindented</strong>
<br>
Lorem consectetur mollit proident ad quis commodo pariatur ullamco mollit eiusmod cupidatat amet fugiat.
</section>
I have a question about ensuring good document structure when the visual design doesn't call for explicit headings.
Take the following example HTML for a homepage.
<header>
<h1>Our Brand</h1>
<p>Tagline</p>
</header>
<section class="company">
<h2>Our Company</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus error hic, aliquid assumenda sed optio, praesentium repellendus numquam laudantium esse molestias minima cum mollitia fugiat? Eum impedit deserunt aliquid ratione.</p>
</section>
<section class="values">
<h2>Our Values</h2>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
<li>Officia reiciendis illum temporibus. Praesentium repellat, iste officiis?</li>
<li>Quos facere enim officiis, recusandae inventore veritatis id.</li>
<li>Iste deleniti doloremque dignissimos, voluptate obcaecati velit optio.</li>
<li>Ut non enim, dolore saepe minus soluta illum?</li>
<li>Enim iure odit soluta laboriosam quis cupiditate eveniet.</li>
</ul>
</section>
<section class="team">
<h2>Our Team</h2>
<h3>Marketing</h3>
<ul>
<li>Lorem ipsum.</li>
<li>Voluptates, cupiditate.</li>
<li>Quia, ad?</li>
<li>Facere, blanditiis!</li>
</ul>
<h3>Social</h3>
<ul>
<li>Lorem ipsum.</li>
<li>Voluptates, cupiditate.</li>
<li>Quia, ad?</li>
<li>Facere, blanditiis!</li>
</ul>
<h3>PR</h3>
<ul>
<li>Lorem ipsum.</li>
<li>Voluptates, cupiditate.</li>
<li>Quia, ad?</li>
<li>Facere, blanditiis!</li>
</ul>
</section>
In this markup, there is a clear heading structure (i.e. h1 > h2 > h3).
But let's say it's been agreed that the 'Our Team' <h2> heading doesn't need to be shown as it is implied by the visual design. However, it is important for good document structure (for accessibility reasons).
Do we...
Show the 'Our Team' <h2> heading for screen readers and search engines using a '.visuallyhidden' class? (i.e. one which hides content off-screen)
Change all the <h3>s in the 'team' section to be <h2>s? This doesn't feel right from a contents perspective, as they feel like they should be contained under their own heading.
Skip the 'Our Team' <h2> heading and go straight to <h3>. Skipping heading levels doesn't seem right either.
Sidenote,
I've noticed that gov.uk (often hailed as a good accessibility site) do this. They are hiding a <h1> for their 'All Categories' heading. Also, they are hiding a <h2> in the footer for 'Support Links'
https://www.gov.uk/browse/benefits
Hiding the headings seems sensible but i've seen a lot of people posting about how Google will treat this as a black-hat SEO tactic.
I assume it would take a lot more than a couple of hidden headings to trigger any penalisation from Google, but maybe doing it on <h1>s would be a problem.
Any thoughts on this issue would be appreciated!
I would not worry about SEO penalties here. Years of addressing what you are trying to address suggest the effect is either none or negligible.
In your example, the <h2> has no content, it leads directly to the <h3>. In that scenario I always like to add some content so it isn't a hard visual / audio jump. As it is, if I navigate by heading in my screen reader, then I get no content under that <h2>, so it might already feel a bit odd.
Anyway, if you think you truly do not need the "Teams" text (visually or otherwise), then you could just remove it altogether and elevate the others to <h2>.
So from your three options:
Show the 'Our Team' <h2> heading for screen readers and search engines using a .visuallyhidden class? (i.e. one which hides content off-screen)
Meh. In my opinion, either there is content there to support it or there isn't. In your example, there is no content to support it. If you do decide to visually hide the text, don't do it off-screen as that can jack with RTL translations, look at a clipped text instead (there are many examples, that just happens to have a recent bit of tweaking).
Change all the <h3>s in the 'team' section to be <h2>s? This doesn't feel right from a contents perspective, as they feel like they should be contained under their own heading.
Do this one. I tend to agree in principle that Teams warrants its own heading. But to do that you need content under the Teams <h2>, in my opinion. If no content will go there and you remove the Teams <h2>, then this is your next best option.
Skip the 'Our Team' <h2> heading and go straight to <h3>. Skipping heading levels doesn't seem right either.
Nope. That is a WCAG failure for most auditors (I will fail it).
As far as the outline is concerned,
the heading <h2>Our Team</h2> does two useful things in your context:
it makes clear what "Marketing", "Social", and "PR" refer to (otherwise it would not be clear that these sections contain lists of team members)
it groups the three sections under one outline entry (otherwise they would be on the same level like "Our Values" etc., which wouldn’t make sense)
Visually hiding the heading fulfills both jobs. I would do this, but only if it’s really not possible to show the heading (which is typically always preferable), of course.
An alternative that fulfills the second job (grouping the entries), but not the first one (giving a useful label), is to use section elements explicitly (which is, by the way, recommended to do anyway):
<section class="team">
<h2>Our Team</h2>
<section>
<h3>Marketing</h3>
</section>
<section>
<h3>Social</h3>
</section>
<section>
<h3>PR</h3>
</section>
</section>
Now you could omit the h2 without changing the outline (except for the label, of course), so the three sections are still grouped, conveying that they belong together.
(Of course this only works for user agents that implement the outline algorithm.)
I have to convert spreadsheet data (name, image name, & bio) to HTML, so I use a RegEx find/replace with variables in DW which is easy enough. The issue is that one column contains a bio that is HTML (paragraphs and italics mainly) and RegEx ignores that "row" for reasons beyond my researching capabilities.
I don't want to strip then manually add the HTML again, so show me the way!
TL;DR: Is there a way to paste HTML as a RegEx variable?
Here's some example table data I quickly paste/format from Excel to DW:
<tr>
<td>James Brian Hellwig</td>
<td>James_Brian_Hellwig</td>
<td><p>Lorem ipsum dolor sit amet, <em>consectetur adipisicing</em> elit. Sunt, ut iste tempore laborum aperiam nostrum obcaecati neque natus adipisci fugit. </p>
<p>Dolores, eligendi animi ea totam nobis cumque ullam eveniet accusamus!</p></td>
</tr>
<tr>
<td>Jiminy Cricket</td>
<td>Jiminy_Cricket</td>
<td><p>Lorem ipsum dolor sit amet, <em>consectetur adipisicing</em> elit. Sunt, ut iste tempore laborum aperiam nostrum obcaecati neque natus adipisci fugit. </p>
<p>Dolores, eligendi animi ea totam nobis cumque ullam eveniet accusamus!</p></td>
</tr>
Here's the "Find" RegEx:
<tr>
<td>([^<]*)</td>
<td>([^<]*)</td>
<td>([^<]*)</td>
</tr>
Here's the "Replace" RegEx:
<div>
<img class="floatleft" src="$2.jpg" alt="$1" />
<h2 class="name">$1</h2>
$3
</div>
I will either mouth-kiss or buy a beer for the first person to answer this. Your choice.
Your problem is that [^<]* matches anything except an opening angle bracket. That's good idea in general, so you don't accidentally match across tag boundaries, but in this case it's unfortunate because there's a <p> tag right after the <td>.
Therefore, I propose a different solution. Allow other tags, just not <td> tags within a <td> tag:
<tr>
<td>((?:(?!</?td)[\s\S])*)</td>
<td>((?:(?!</?td)[\s\S])*)</td>
<td>((?:(?!</?td)[\s\S])*)</td>
</tr>
Explanation:
(?: # Start non-capturing group that matches...
(?!</?td) # (unless we're at the start of a <td> or </td> tag)
[\s\S] # ... any character (whitespace or non-whitespace).
)* # Repeat as needed
You can use
<tr>
<td>.*?</td>
<td>.*?</td>
<td>.*?</td>
</tr>
Explanation: .(dot) matches any character except a newline. If you need to go across multiple lines, you can use [\s\S] like Tim suggested.
* makes it look for 0 or more of the .(dot). ? makes that reluctant, meaning we grab as FEW characters as we possibly can while still matching the END TD TAG.
Since there is whitespace between your TR and TD tags, we must include that in our regex. Sorry, but I should have caught this sooner! Also, we can't put spaces in our regex unless we are searching for a space, which is why regex's look like a long chain of complicated characters. Here is what it should look like:
<tr>\s*<td>.*?</td>\s*<td>.*?</td>\s*<td>.*?</td>\s*</tr>
As you can see, I used \s which means a whitespace character, followed by a * which means 0 or more times.
Since you have the same pattern repeating 3 times, you can actually use the following notation for repetition:
<tr>\s*(<td>.*?</td>\s*){3}</tr>
Repetition notation is great. Let's say, for example, that you not only want to match tables with exactly 3 TD's, but you want to match table's that have anywhere from 1 to 4 TD's. You would use:
<tr>\s*(<td>.*?</td>\s*){1,4}</tr>
FYI, A co-worker just found a great alternative to using RegEx in the example above by using Dreamweaver XSLT files to dynamically add XML data to the HTML. We simply use an XML-mapped spreadsheet to export the XML and voilà...content updated.
Once the spreadsheet's schema is set and the XSL file is formatted with the appropriate HTML "repeating regions", it's smooth sailing.
Resources:
How To Export an Excel 2010 Worksheet to XML
Using XML and XSL with web pages (adobe.com)
What would be a good offline alternative of the online Lipsum generator? It's frustrating when I'm not online and need some placeholder text for testing purpose. A CLI utility would be ideal, so that I can tailor the output to fit my needs.
In Office 2007 apps, you can type in
=lorem(n)
with n equaling the number of paragraphs of lorem ipsum you would like generated.
Django's lipsum addon seemed pretty straightforward. As I didn't want to install python just to run this script, I ported it to php.
Here's my PHP version:
http://pastebin.com/eA3nsJ83
If you have python available, google code has a CLI generator.
http://code.google.com/p/lorem/
Generate a long section online. Save it to a txt file. Refer to txt file when offline.
Textmate has a built in snippet to print this
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
From
lorem
I think you could use a Markov Text Generator, fed from the original Lorem Ipsum text. That way you should be able to find an implementation in any language you prefer.
You can try out if that will do, online, here.
Not sure about a command line version but there is a firefox extension that does Lorem Ipsum: https://addons.mozilla.org/en-US/firefox/addon/2064
Just checked and found that it pulls text from the website so it wouldn't work online... sorry about that, how about this though:
#!/usr/bin/env python
import sys
import random
try:
n = int(sys.argv[1])
except:
print 'Usage: %s num-words' % sys.argv[0]
words = open('/usr/share/dict/words').readlines()
for i in range(n):
print words[random.randrange(0, len(words))][:-1],
Word 2007 will produce a block of placeholder text when you type in =rand() and this hit the return/enter key. If you're looking for simple placeholder text, I'd go ahead and generate a bunch ahead of time and stick it in a text file.
Django includes the {% lorem %} tag as part of the contrib addons. It shouldn't be too hard to make a command-line version. Here's the source.
If you are on linux and have these tools:
pdf2ps | ps2txt < yourarticlecollection/someresearchpaper.pdf
:)
Seiously, most of the time I just copy&paste from research papers and articles that interests me. They have good amount of text that show white rivers and sometimes as incomprehensible as "Lorem ipsum".
On http://www.lipsum.com there are links to several offline Lorem Ipsum generators, about halfway down the frontpage. Or you could write one of your own in a matter of minutes.
Edit: This isn't accurate, I wrongfully assumed all of the linked lorem ipsum generators were offline ones, not only the LaTeX one.
For completeness: a Perl module to do this is called Text::Lorem, and there is also a Text::Lorem::More.
To make Juan’s answer more complete, there is fine wrapper to Text::Lorem module. If you’re on debian:
$> sudo apt-get install libtext-lorem-perl
And after this just type
$> lorem
There's a nice generator available from homebrew if you're on macOS. brew install lorem. My default python distribution is python 3 which caused a syntax error for the print statements. After fixing that, it was quite nice for my purposes.
At the bottom of the lorem ipsum generator you will find links to the generator for other usage. My understanding is the following can be used offline:
TeX Package
Java Class
But you may also find the following helpful:
WWW::Lipsum CPAN Module
Firefox Add-on
Dreamweaver Extension
GTK Lipsum
ActionScript3
Each of these, while requiring connectivity, reduce the load on the lipsum generator as they don't require loading the actual website.
Slightly off-topic: try to avoid using lorem ipsum for layout testing!
The letter frequencies in Latin are way different than in e.g. English or German. There's lots of 'i' and 'l', i.e. lots of narrow letters.
The alternative is to use VS Code to generate dummy text within html tag.
You can control how much text you want to generate. For example, type lorem10 then press Enter key it will generate 10 words of lorem text.
You can also generate a few paragraphs containing lorem text inside.
For example, p*3>lorem5 will create 3 paragraphs each containing 5 words of lorem text.