So I've been working on my website for the past few weeks having started off with no understanding of HTML/CSS or JS. In two weeks i managed to learn enough that now I am actually custom coding websites for family and friends who's websites are horribly outdated and look like something from the dial up era.
With regards to my own website...
(which right now I am using a online site editor to speed up the process as I don't have much time to spare for now, I fully plan to rebuild it from scratch when I have the time but just needed something working for now.)
I have been doing a large amount of custom coding to make my site work and was curious about what the structure I should be using for my paragraph and text sections should be. Both for "in-editor" and for "from-scratch-development".
While I 'could' just use the editor's built in paragraph tool, I prefer to use the HTML element to get exactly the style I desire. I was wondering on what format I should use to create my paragraph layout as I am stuck on two possible formats to use. I would like to know which I should focus on to give better quality HTML format and to avoid bad habits.
I know that often the <h#> tags should be used for titles and important text and the <p> tags should be used for anything inside a large paragraph, but because of the default formatting of the editor & that of the browsers, I wanted to know if there is anything wrong with using the "< div >" tag option or if its improper somehow and I should use the "< p >" tag option.
< div class="some-header" >
<br>
Some Page Header
<br>
< /div >
<br>
<br>
< div class="some-paragraph" >
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut dignissim, tortor id fringilla tincidunt, mauris.
<br>
< /div >
_____________________________________________________
< h1 class="some-header" >
<br>
Some Page Header
<br>
< /h1 >
<br>
<br>
< p class="some-paragraph" >
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut dignissim, tortor id fringilla tincidunt, mauris.
<br>
< /p >
_________
So is there anything wrong with these options? Im really not sure if it even matters. If its just simply trivial semantics and doesn't really have any real impact. Also it should be noted that I tend to stuff my HTML and CSS full of little notes for myself (and anyone else that reads it) just so I don't get lost. Pretty much every single section of code is made all "pretty" with big block comments in fancy boxes and commented titles on EVERYTHING to help me remember what everything is. Any feedback or ideas on the matter are much appreciated.
There is nothing wrong with using div elements to encase text content and then using classes and ids to manipulate them. It is good practice however, to use appropriate elements provided in HTML for specific tasks.
For example, one can make a table out of div elements, but there is no reason to do so as there is already a structure available within HTML for that task. The Document Object Model, is what defines the logical structure of your page and it is good practice to keep the logical structure, logical.
I would suggest using the latter option with the p tags for your paragraph content.
I would also advice against using br tags in your code. You can separate your divs using margins instead. If you require one element to be spaced out a little more then all the other elements of the same class use an id.
Cheers!
Related
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.
I'm struggling with semantics, while I enjoy thinking about meaning of the parts of the websites, it is becoming complicated...
Anyhow, if I've additional info box in the header (imagine tall header, with nav and h1 + additional text explaining what website is about and how it works). What will be logical/semantic element to contain it?
<figure id="info_how">
<h2>Share what you will do for money, at the marketplace for small services!</h2>
<p>bibendum auctor, nisi elit consequat ipsum. Duis sed amet <strong>nibh vulputate cursus</strong> sit.</p>
<a id="button_start" href="#">Start selling</a>
<a id="button_how" href="#">How does it work?</a>
</figure>
I'm thinking figure, but...
According to the specs:
The figure element represents some flow content, optionally with a
caption, that is self-contained and is typically referenced as a
single unit from the main flow of the document.
The element can be used to annotate illustrations, diagrams, photos,
code listings, etc. This includes, but is not restricted to, content
referred to from the main part of the document, but that could,
without affecting the flow of the document, be moved away from that
primary content, e.g. to the side of the page, to dedicated pages, or
to an appendix.
So figure sounds good to me!
Additionally, I'd place a <figcaption> element inside of the <h2> tags:
<h2><figcaption>Share what you will do for money, at the marketplace for small services!</figcaption></h2>
Because it does represents the "caption" of the figure.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 years ago.
Improve this question
What's the verdict on when you should use another <p>...</p> instead of a <br /> tag? What's are the best practices for this kind of thing?
I looked around for this question, but most of the writing seems a bit old, so I'm not sure whether opinions about this topic have evolved since.
EDIT: to clarify the question, here is the situation that I am dealing with. Would you use <br>'s or <p>'s for the following content (imagine it's contained in a div on a homepage):
Welcome to the home page.
Check out our stuff.
You really should.
Now, these lines are not technically 'paragraphs'. So would you mark this up by surrounding the whole block in a <p> tag with <br>'s in between, or instead use separate <p>'s for each line?
They serve two different functions.
<p> (paragraph) is a block element which is used to hold text. <br /> is used to force a line break within the <p> element.
Example
<p>Suspendisse sodales odio in felis sagittis hendrerit. Donec tempus laoreet
est bibendum sollicitudin. Etiam tristique convallis<br />rutrum. Phasellus
id mi neque. Vivamus gravida aliquam condimentum.</p>
Result
Suspendisse sodales odio in felis sagittis hendrerit. Donec tempus laoreet
est bibendum sollicitudin. Etiam tristique convallisrutrum. Phasellus
id mi neque. Vivamus gravida aliquam condimentum.
Update
Based on the new requirements, I would personally use <p> to achieve the spacing as well as allow for styling. If in the future you wish to style one of these parts, it will be much easier to do so at the block level.
<p>Welcome to the home page.</p>
<p style="border: 1px solid #00ff00;">Check out our stuff.</p>
<p>You really should.</p>
You want to use the <p> tag when you need to break up two streams of information into separate thoughts.
<p> Now is the time for all good men to come to the aid of their country. </p>
<p>The quick brown fox jumped over the lazy sleeping dog.</p>
The <br/> tag is used as a forced line break within the text flow of the web page. Use it when you want the text to continue on the next line, such as with poetry.
<p> Now is the time for all good men to come to the aid of their country. <br/>
The quick brown fox jumped over the lazy sleeping dog. </p>
source
You should use <p> when you want to separate two paragraphs. From Wikipedia:
A paragraph (from the Greek paragraphos, "to write beside" or "written
beside") is a self-contained unit of a discourse in writing dealing
with a particular point or idea.
Use the <br> tag when you want to force a new line inside your paragraphs.
I may be breaking rules of etiquette when answering a question in this thread —as most of the answers thus far have been great —but here's how I approach this argument:
While I agree that a 'p' is element which is used to hold text and a 'br' tag is used to break text, in many occasions one may want to manipulate a 'block' of text that have actual line spaces between them;
Ex:
[my block of text]
Hello World!
--------this is a blank line------
You are so full of life!
[/my block of text]
Now many would argue that you can just place two 'p' elements in a 'div' and then manipulate that 'div', however I feel this is more time consuming (aka I'm lazy), and thus I stick with a double 'br' method —leaving me to manipulate just that one 'p.'
The issue with my unorthodox method is that if there is a specific styling applied to line-height, then there will definitely be a noticeable difference between the line-space created by a double 'br' vs. a 'p'.
I guess in when deciding which technique to follow, consider:
code readability
best practices
time
effects of shortcuts on the rest of your code
I wouldn't use <p> unless you intend to put content within it. Of course, this is merely an opinion (as I assume most answers will be).
However, it may be easier to style a <p> tag (there are more options at least) which may lend itself to be used more often. My only problem is that this is not very easy to read (when reading code) and I feel like those styles could be applied elsewhere (possibly to the tags that would surround the <p> tag.
Also, as other have stated, a <br /> tag should be used to separate content within a block element (such as the <p> tag). If you are using the following:
<p class="a">some content...</p>
<p class="break"></p>
<p class="b">some other content...</p>
Then I would argue that you should use styles on one or both of the tags surrounding the p.break tag to do any spacing that is required.
The p tag is a block level element, and is mainly used to add content, whereas the br tag is used to force a line-break within the element. That is, if you're going to follow semantics. A lot of people are doing that these days to add specific meaning to tags and whatnot. I hope that helps. Good luck, though. =)
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'm writing a new webpage for a company and I have (a sane subset of) HTML5/W3C recommendations in mind.
After reading the semantic meaning of <hr />, I was wondering if this was a good place to use it:
<section name="historyItem">
<h2>2002</h2>
<p>Dolorem ipsum dolor sit amet in 2002, consectetur [...]</p>
<hr />
<ul>
<li>Link A</li>
<li>Link B</li>
</ul>
</section>
My line of reasoning is that, yes, that <hr /> represents a thematic change from section description to section links, but I'm unsure about that.
Maybe "thematic change" means to have a new paragraph later on another subject, and thus my example wouldn't be "correct". What do you think?
(ps.: Yes, that <ul> is CSS-styled to fit a single line and look cool)
I see what you mean. But personally I just wouldn't bother. Ask yourself why you're using the tag in the first place. If you want to delineate a change between the paragraph and the links, then in terms of pure mark-up I don't reckon it's required. If it's about the look and feel of your page (i.e. you want a rule demarcating the two areas), then again I'd question its usefulness, given that you can apply a border to either the paragraph or unordered list tags.
Of course, given that this is html5, you could go the whole hog and use the <section> tag…
Thematically speaking, <hr> means the end of one "section" and the start of "another". Essentially these should be appearing after your <section> tags, not within. Although semantically speaking, it doesn't really matter where you want to use them.
If your list of link items are relevant to the items ABOVE the <hr> tag (meaning relevant to your other elements within the <section> tag, then I do not recommend using <hr> there. Instead, use CSS to differentiate border and underlines.
If you'd like additional reference, I've located this for you:
http://html5doctor.com/small-hr-element/