I am creating a pug template and I am trying to figure out how to output multi line text BUT split on an anchor tag.
I am brand new to pug, so my knowledge is limited to a day.
header.pug
div.col-12
a(href="https://somelink.com" target="_blank").
Learn more
about safety precautions
Desired Output
<div class="col-12">
Learn moreabout safety precautions
</div>
But instead my text of about safety precautions keeps showing up inside of the </a> tag.
If you want text inline you can use the span element which won't break the paragraph:
div.col-12
span
a(href="https://somelink.com" target="_blank").
Learn more
span.
about safety precautions
You could also use the pipe syntax in pug:
div.col-12
a(href="https://somelink.com" target="_blank").
Learn more
| about safety precautions
Personally I prefer the span as more web developers who follow me will understand what's going on. No real negatives to either method though.
Related
I want to write semantic beautiful no-nonsense HTML. When is the right time to include class and when it's not? Should I add class on every element of my HTML?
To write semantic markup, we must use HTML tags correctly so that our markup is both human-readable and machine-readable. When we write semantic markup we can no longer select HTML elements based on visual presentation. Instead, we select HTML elements based on their semantic meaning, and then use CSS to define the visual presentation of our content. When writing semantic markup, the presentation of web page elements is kept completely separate and distinct from the markup of the content itself.
<body>
<ul class="post">
<li class="title"> <h3>Title of Post</h3> </li>
<li class="content"><p> Lorem Ipsum bla bla..</p></li>
<li class="hashtag">#samplepost
</li>
</ul>
</body>
<style>
.title{code}
.content{code}
.hashtag{code}
</style>
or
<body>
<ul class="post">
<li> <h3>Title of Post</h3> </li>
<li><p>Ipsum bla bla..</p></li>
<li>#samplepost </li>
</ul>
</body>
<style>
.post > li > h3{code}
.post > li > p {code}
.post > li > a {code}
</style>
Which of these is more semantic? Should we use class on everything or only when necessary?
Only use classes when you want to style a group of elements in a similar way (and ids for unique elements), it can be confusing for someone picking up your code if class names don't have any styles attached to them, and it just adds clutter.
Using semantic tags will make your html more semantic - ie. header, nav, main, footer, aside - etc. Some of these tags even make it easier for screen readers to navigate. w3 schools has good info about semantic tags: https://www.w3schools.com/html/html5_semantic_elements.asp
It is better not to be attached to HTML tags, who knows where else you will have to use a similar interface. It’s best to stick with some CSS methodology (for example BEM) and write styles based on CSS classes. From the presence of classes, the layout will not be less semantic. The main html tags to write correctly.
In general, if you want to avoid problems in the future, use the css classes.
I would write like this:
<body>
<div class="posts-list">
<h3 class="posts-list__title">Title of Post</h3>
<ul class="post-list__ul">
<li class="post-list__item">
<p> Lorem Ipsum bla bla..</p>
</li>
</ul>
<div class="posts-list__hashtag">
#samplepost
</div>
</div>
</body>
Creating classes everywhere is a lot of work and can potentially cause some problems later on. If you add a class to every HTML tag, imagine how hard to maintain the code is going to be if the project becomes bigger. As mentioned above there are specific methodologies which can be really helpful, and BEM is a popular, but not the only one, you can use other. If you don't want to use methodology and stick with simple classes for now (though at some point I really suggest diving into that topic, you don't have to know perfectly how to use specific methodology, but how they works, if you ever join any team working with code, then they are going to tell you what methodology they picked for the project), I suggest using second code, but with comments:
<body>
<!-- Post -->
<ul class="post">
<!-- Title -->
<li>
<h3>Title of Post</h3>
</li>
<!-- Content -->
<li>
<p>Ipsum bla bla..</p>
</li>
<!-- Hashtag -->
<li>#samplepost </li>
</ul>
</body>
<style>
.post>li>h3 {
code
}
.post>li>p {
code
}
.post>li>a {
code
}
</style>
Comments are really simple and powerful tool. They will help you getting oriented in the project really quick, and avoid adding unnecessary classes for semantics.
The first thing to note is your content is not a list, so you shouldn't be using ul/li. That bad semantics, and as such worse than no semantics at all.
Your semantic markup is this:
<body>
<h3>Title of Post</h3>
<p>Lorem Ipsum bla bla..</p>
#samplepost
</body>
If you want to create a containing block for your post, to might reasonably wrap it in a div element, and although it's not necessary for such simple content, you could also consider wrapping it in a main element. You could put your anchor inside a p element but that makes no semantic difference.
Now you add one or more classes to any element when it is sensible to do so. What is sensible? It means not going over the top, forcing a class onto an element just because it looks naked without one. Generally, a good rule of thumb is to add a class when there's a utilitarian purpose in doing so. Classes are a way of putting you content in to categories, so that categorisation should be useful in some way.
For example, it might be that you want to style all the content with a particular category a similar way. Or it might be that you want to add some common functionality via JavaScript to all the content in a particular category.
Or it might be that you want to identify a category of content for your maintenance purposes. For example, suppose you have a large document describing products that you sell. With each product is a price. Even if you have no intention of styling the price differently from the other content, nor have any relevant JavaScript, you might add a class of "price" to each one, so that when the time comes to update your prices, you can easily find them all in your editor, and thus make sure that you don't miss one.
For each utilitarian purpose, think about opportunities, rather than necessities. By adding a class to categorise some some content, you are creating an opportunity for common styling, or functionality, or discovery to be applied.
I'm currently writing html/xhtml by hand, and that's fine to me, but I would like to ease things a little bit, especially for writing footnotes.
Today, here is how I write footnotes:
<p>Here is a footnote<a id="ref1b" href="#ref1">[1]</a>.</p>
<!-- And at the end of the document -->
<div class="footnotes">
<h2>Notes</h2>
<p id="ref1">[1] But this one isn't very helpful.
<!-- Let's add a go-back-to-the-text arrow -->
↩
</p>
</div>
The idea would be to make things automatic, and potentially done on the client side (by the browser), so that I could write something like that:
<p>Here is a footnote<ref id="1"/>.</p>
<!-- And at the end of the document -->
<div class="footnotes">
<h2>Notes</h2>
<ref-def id="1">But this one isn't very helpful.</ref-def>
</div>
So ref and ref-def would simply be evaluated on the fly by the browser.
Is this possible only using html/xhtml and css?
For completeness purpose. As of today there is a footnote tag in HTML.
https://www.w3.org/MarkUp/html3/footnotes.html
How it is presented to clients is left to implementors. Yo can use more html or css for a better formatting.
<DL>
<DT>Hamlet: <DD>You should not have believed me, for virtue cannot so inoculate our old stock but we shall relish of it. I loved you not.
<DT>Ophelia: <DD> I was the more deceived.
<DT>Hamlet: <DD>Get thee to a nunnery. Why wouldst thou be a breeder of sinners? I am myself indifferent honest ...
</DL>
<fn id=fn1><i>inoculate</i> - graft</fn>
<fn id=fn2><i>relish of it</i> - smack of it (our old sinful nature)</fn>
<fn id=fn3><i>indifferent honest</i> - moderately virtuous</fn>
the way you're doing this now has the advantage of being accessible and standards compliant - it will work with any browser - even with javascript disabled. Also search engines will be able to make sense out of this.
So there are some benefits in doing it this way.
if you decided to go for a shorter alternative, then there's plenty of jQuery plugins that will make your task more comfortable. e.g. look at https://github.com/nicholascloud/footnote.js
If you go for that approach please also note, that your site speed will suffer as users will have to download plenty of javascript to get your footnotes working.
Is there any way to markup Item properties placed inside a child Item (and therefore out of it's scope)?
I'm using microdata and schema.org to mark up some web page with. and I have a code like this:
<body itemscope itemtype="http://schema.org/WebPage">
<header itemscope itemtype="http://schema.org/WPHeader">
<a href="index.html">
<img id="logo" src="xxx" alt="xxx" itemprop="primaryImageOfPage">
</a>
</header>
<!--the rest of the page-->
</body>
I have the logo inside the WPHeader Item and I want it to be the primaryImageOfPage for the WebPage Item. I know i can use Itemref to include properties which are out of the item's scope, but like this you don't take this property out of the child item's scope. That's really a problem if both items can have the same property, such as name or description.
This is only an example to explain the problem I have. By the moment I solve it using itemref...but there has to be a better way to do that.
I know there's no need to markup everything, I just want to know which is the best way to avoid having this problem.
Microdata is RDFa rip-off constrained to be relevant to search cross-cutting concern for semantic fragments. It thus assumes the advanced scoping abilities of CURIEs is discardable. For wholeness that good quality domain-specific content pages exhibit, RDFa alongwith vocab covering domain-specific aspects accordingly is the ultimate way as yet. While search providers dominated HTML5 spec to make microdata part of standard, as the Web keeps growing more semantic, the differences between both are ending up as mere matter of "what's in a name?"
What are people's opinions on semantic HTML for confirmation, error and warnings messages?
Currently I have something simple like:
<div class="message message-warning">
<h3>Message Title</h3>
<p>Message text</p>
</div>
Whereby the message-warning class gets replaced by message-confirmation or message-error if the message is a different type.
Is there a more semantic way of marking this up?
May I suggest <figure>?
Excerpt from HTML5 Doctor (and they, from W3C):
The figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document’s meaning.
Lets answer the questions first:
Is such a dialog a single unit? Yes
Is such a dialog self-contained? Yes
Can such a dialog be moved away from the document without affect the document meaning? Yes
Yes, it fits a <figure> perfectly.
And, the <figcaption> is especially good for title bars / headings.
So, I'd go with <figure> without even trying to look further:
<figure id="dialog-box" class="warning">
<figcaption>Message Title</figcaption>
<p>Message text</p>
</figure>
Use the <dialog> element, and call .show() instead of .showModal(), or give it the open attribute if rendering server-side.
As long as it’s not shown modally, it won’t block interactions with other page content.
Old answer (before <dialog> was a thing):
Alerts are one of the semantics that ARIA added to HTML, because there's no straightforward way of doing in "pure" HTML. Hence:
<aside role="alert">
<h2>Message Title<h2>
<p>Message Text</p>
</aside>
I personally like to use <aside> as the element to slap the role on — it's technically not part of the page content, as described by Jeff Lindblom's answer.
Having a "semantic" CSS selector for this is easy enough:
[role="alert"] {
font-size: 2em; /* or what have you */
}
The <figure> idea is interesting, but I don't think it fits here. What it's missing is the actual content to justify use of the tag. According to the spec, <figure> represents a "unit of content" - meaning an image, diagram, code block, etc. that may optionally have a caption for this content (<figcaption>). It would be a stretch to say that the message outside the <figcaption> represents an appropriate unit of content.
We should also be cautious of using <h#> tags in this instance, as the message is secondary content, and should probably not be part of the document outline.
One could argue, under the revised spec, that an <aside> would be appropriate. It's now considered "tangential content" when used outside an <article>.
<strong> would be appropriate for the "title" of the message, since it's a semantically more important part of the message, but not a document header. So the code might look so:
<aside class="warning-or-whatever">
<strong>Message Title</strong>
<p>Message Text</p>
</aside>
One could also argue, since there's nothing specifically created for such a feature, that a good old-fashioned, semantically meaningless <div> might be the best element. I guess it comes down to how "tangential" you feel your messages are.
Thanks,
Jeff
No. There is no element in HTML that denotes a confirmation, error, or warning message.
Technically, the samp element has been defined as “sample output from programs, scripts, etc.” in HTML 4.01 and in HTML 3.2, though originally in HTML 2.0 as “sequence of literal characters, typically rendered in a mono-spaced font” and being somewhat redefined in HTML5 as “(sample) output from a program or computing system”. So its meaning is rather vague, and it’s not used much, so there is no real point in using it. But it might be argued that it is acceptable to use samp markup for any message from a program. It is a text-level element, so you would need to use it separately inside h3 and inside (any) p, more or less breaking the structure.
It might also be said that the messages are quotations from an external source, so they could be wrapped inside blockquote.
The use of h3 vs. some other markup isn’t really a semantic question, but structural: is this a heading for some content at the 3rd level of nesting?
I think the strong element is an appropriate element for such messages.
You could use several strong elements to indicate the importance of the message:
<strong>Login successfully.</strong> <!-- confirmation -->
<strong><strong>Wrong login data.</strong></strong> <!-- warning/error -->
If it’s stand-alone message for which a heading is warranted, use a section element instead of a div. In case of serious errors that apply to the whole page, it should be the first element on the page.
Various variants are possible:
<section class="message message-error">
<h1><strong><strong>Error:</strong> Wrong login data.</strong></h1>
<p>The username and/or password is wrong. Try …</p>
</section>
<section class="message message-error">
<h1>Error</h1>
<p><strong><strong>Wrong login data.</strong></strong></p>
<p>The username and/or password is wrong. Try …</p>
</section>
<section class="message message-error">
<strong><strong>Wrong login data.</strong></strong>
</section>
<section class="message message-error">
<p><strong><strong>Wrong login data.</strong></strong> Try …</p>
</section>
Which one to use depends on the kind of message, if the exact error is know, if additional help text is provided, and if several message could come up at the same time.
Note that you probably don't want to use a heading for messages that apply to a single input element (e.g. when the user didn't fill out a required field or entered wrong content etc.), as these error messages should be in the corresponding label or directly next to the input element.
For accessibility, you should have a look at WAI-ARIA. Maybe aria-live="assertive" might be an appropriate way to mark error messages.
If you want to go semantic, you can use a semantic-web approach by making an ontology for messages and warnings and use RDFa to embed it in your HTML.
Have got the following HAML code, combined with Markdown:
%h2.slogan.align-center
:markdown
No more big words. Enough of the abbreviations.
**Project management for the rest of us.**
Which generates HTML:
<h2 class='slogan align-center'>
<p>No more big words. Enough of the abbreviations.<br/>
<strong>Project management for the rest of us.</strong></p>
</h2>
I'd like the HTML to look like (omitting surrounding <p> tags):
<h2 class='slogan align-center'>
No more big words. Enough of the abbreviations.<br/>
<strong>Project management for the rest of us.</strong>
</h2>
What's the HAML/Markdown to create that HTML?
Well it is easy to do with only haml:
%h2.slogan.align-center
No more big words. Enough of the abbreviations.
%br/
%strong Project management for the rest of us.
It seems like the markdown plugin of haml adds the p tag. According to the documentation this is accomplished by using one of 4 different markdown processors. I guess the result may differ depending on which one you are using.