Is there a coding standard for HTML? Please suggest links that have the coding styles for HTML.
For example:
<table>
<tr>
<td>
Data
</td>
</tr>
</table>
Here's a few standards to add to your list.
1. Indentation
You seem to have the right idea on this already. The main purpose of indentation should be to make it clear where a tag is opened and closed. Consider this example.
<div><p>Hello World</p><div><p>Hello World</p></div>
This looks okay until you indent it properly and spot the error:
<div>
<p>Hello World</p>
<div>
<p>Hello World</p>
</div>
The original div wasn't closed. Ooops! This is why indentation can be a great time saver.
2. Tags and Attributes
It is generally accepted now that all tags and attributes should be lower case. We dispensed with ALL CAPS tags a long time ago in HTML and also with camelCasing for things like onMouseOver and onClick, which are now all lower case. All attribute values should be surrounded with double-quotes. For example:
<div id="content">Hello</div>
Not
<div id=content>Hello</div>
<DIV ID="content">Hello</DIV>
3. Semantic mark-up only
Don't use any tags to infer style or to control style. For example...
<font>
<b>
Or attributes like...
<table border="2">
Also, don't use things like h1 tags just to get a bigger font.
Try to think of what the tag means, "h1" is a top level heading, "p" is a paragraph, "table" denotes data laid out in a tabular format. Never use a tag for a different purpose to what is intended and try to know what tags are available. For example, using lists instead of manually laying out lists of things.
Don't use tables for layout. (I have emphasised this important point using the semantic "em" tag).
Don't use too many div tags to solve a problem! (div-itus!)
Firstly choose your doctype and then validate your html against the W3C validator for formatting errors
Other things to consider off the top of the head are
Proper indentation
Resisting the temptation to add too much markup i.e. keep the markup simple
Structure your html semantically so that if you switched off style sheets the document would still make sense and be in the right order
Avoid deprecated tags e.g. <font>
Choosing generic class names e.g. mainHeader instead of largeRedHeader
Use classes for repeating elements and ids for elements that appear once
Use classes and ids on parent elements only and style child elements using css e.g. #intro > p instead of #intro .paragraph
HTML Tidy provides a pretty reasoble style, which it will also help you enforce.
Did you mean indentation style? Here is the de facto indentation style:
<table>
<tr>
<td>One line of text - no indent.</td>
<td>
<p>
Multiple lines of text. <br />
With line breaks - indent.<br />
Inline: <b>no indent</b>
</p>
</td>
</tr>
</table>
However, the style above takes too much spaces, for some indentation styles, HTML, HEAD and BODY are not indented.
<html>
<head>
<title>Title</title>
</head>
<body>
<div>
<h1>Title</h1>
<p>Hello, world! The content begins here.</p>
</div>
</body>
</html>
Personally I follow the xhtml standards (all open tags get a closed tag, case sensitivity and so on). It makes it easier to follow the code and to format things automatically. I also generally indent everything 1 from their parents:
<table summary="example table">
<tr>
<td>
Data
</td>
</tr>
</table>
I also tend to try and include all of the required attributes for accessibility, I figure it is a nice thing to do.
Related
I was wondering about a concept with HTML: closing tags. I want to save space to make it more web-friendly. I thought about this while writing a web page for a web design class, and there is a similar question on StackOverflow here.
Here is an example that sets the text color to red and the background to yellow:
<body bgcolor="#ffff00">
<font color="#ff0000">
...
It is commonly used with br and img tags. I was thinking about leaving closing tags out for tags that are used throughout the page or at least throughout after the tag is used.
Is this compatible with all modern browsers? And furthermore, do most web developers accept this practice?
You should ALWAYS close your tags. Most browsers are "forgiving" ... but that doesn't make it "right".
You should also use CSS (rather than HTML tag attributes) whenever possible.
POOR:
<body bgcolor="#ffff00">
<font color="#ff0000">
...
BETTER:
<body bgcolor="#ffff00">
<font color="#ff0000" />
... <!-- Note: your HTML should eventually have a closing "</body>" -->
MUCH BETTER:
<style>
body {background-color: "#ffff00";}
...
PS:
Q: What's "compatible"?
A: MDN WebDocs is a great resource:
https://developer.mozilla.org/en-US/docs/MDN/Structures/Compatibility_tables
I have encountered an example of HTML5 that has an absence of a number in the heading tag unlike the normal <h1> to <h6> tags.
Is this an incorrect use of HTML? I believe that this use of the heading tag is incorrect, I did want to verify though.
<article>
<h>Subheading</h>
This is some content
</article>
There is no <h> element in HTML. There was one proposed for XHTML 2, but that never took off.
He can "create" new tags in HTML and then put as selector in CSS. But this is not a header though.
I have created a three page web page and I'm using an external css stylesheet that is adjusting my navigation lists so they go across the top and have a coloured background.
When I try and create a list on a page within a table the indenting and vertical listing don't work.
I traced the issue to the external style sheet.
How do I go about turning off the settings the stylesheet did so I can properly format the list?
[EDIT- Okay, so I did a work around. I removed the external stylesheet link as was suggested and put all the style info into my head. Then I did a div around the ul and another around the li which seems to half way gotten it working. Around the li I set the width:50px and that got my vertical listing working. The list-style-type:square still doesn't do anything but I'm too fed up to care anymore for tonight.]
<!DOCTYPE html>
<html>
<head>
<title>Elex267-Webpage</title>
<link rel="stylesheet" type="text/css" href="myStyle.css">
</head>
<body>
<!-- Banner at Top of Page ***********************************-->
<div style="background-color:blue; color:white;font-size:30px;">
<img src="Pics/camosun-white.png" alt="CamosunPNG" width="200" height="70" align="left">
<div align="center"style="margin-left:50%">Elex 267 Web Demo
<br>
Microchip TCP/IP Stack v3.02</div>
</div>
<!--*********************************************************-->
<!--NavBar Code *********************************************-->
<ul>
<li>Home</li>
<li>Features</li>
<li>About</li>
</ul>
<!--***************************************************-->
<h1>
Welcome to the features page of the website.<br>
</h1>
<p>
This web page is being run on the NM101 NorthMicro Pic Prototype Board with the LCD/Keypad and Network modules.
<br>
Features are:
</p>
<table border="1">
<tr>
<td>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
</td>
<td>This cell contains a table:
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>This cell contains a list
<ul>
<li>apples</li>
<li>bananas</li>
<li>pineapples</li>
</ul>
</td>
<td>HELLO</td>
</tr>
</table>
</body>
</html>
<!-- And the External CSS Stylesheet Code -->
p {color:black;font-size:20px;background-color:white;}
body {background-color:white;}
ul{list-style-type:none;margin:0;padding:0;overflow:hidden;}
li{float:left;}
a{display:block;width:400px;background-color:#ff0000;color:white;}
a:hover,a:active{background-color:#cc0000;}
I just read your edit, and while it seems you're gone I am going to answer anyway. Don't give up. CSS can be frustrating to troubleshoot and troublesome to implement in the beginning. Inline styles, font tags hell it all seems ever so much easier, until you realize the actual power that CSS gives you over your styling. I think what you should do is step away from your work for a little bit and do some reading on CSS so you're better understanding what it is you're doing, I'm going to give you a couple of tips here that should help with the issues at hand, but I still think you need to read more.
Get the styling OUT of the head and back into an external style sheet, that is the worst advice you could have possibly been given.
Read up on specificity first. That is how CSS decides which rule applies if there are conflicting rules. For example take this code:
a{color:blue;text-decoration:underline;font-weight:bold;}
p{color:red;}
a{color:green;font-weight:normal;}
Your links are going to turn out green, underlined and normal weight. This is because the green and normal weight came after the blue and bold in the order of how it was read, this is the simplest of the rules, there are others like is it inline, is it an id or a class etc. Read the rules and you'll understand how to write your CSS to get the rules to apply where you want them. This is where the terrible "put it in the head" advice came from because that CSS will be applied after external CSS. Still doesn't make it the right way to do it.
Learn about Classes and ID's. Just quickly ID's are unique names you can apply to elements for example you could then style just that ID in your CSS with #mainNav{color:blue} the thing to remember about ID's is they are UNIQUE. Do not use 5 UL's with the ID of mainNav (the main reason for this is so you can use them to identify them, say in js or jQuery for example). If you have multiple things that need the same styling you use classes, the nice thing about classes is you can chain them so for an easy example consider the following code:
.blue{color:blue}
.underlined{text-decoration:underline}
.bold{font-weight:bold}
Seems sort of dumb on first reading but now look at how you could apply that.
<p class="bold blue">This is some blue text<span class="underlined"> some of it is underlined</span> and some of it isn't</p>
This is where you need to look to solve your problem. If you wanted to apply those list styles just to your nav, adding a class would solve it cascading to other lists. See the following:
.nav ul{list-style-type:none;margin:0;padding:0;overflow:hidden;}
.nav li{float:left;}
.nav a{display:block;width:400px;background-color:#ff0000;color:white;}
.nav a:hover,a:active{background-color:#cc0000;}
<div class="nav">
<ul>
<li></li>
</ul>
</ul>
Any other lists you create wouldn't take on those styles. Basically you want your external style sheet to start with your basics then get more specific as you go. So the styles you want on every list go at the top and go on the ul and li or ol and li elements, then as you go further down the sheet you can get more specific.
Stay away from inline CSS
Stay away from CSS in the head
Trust me, learn to do it right and you'll be so happy you'll never understand why you did it any other way. Make use of the Chrome inspect element to trace down why something is displaying a certain way and then fix the CSS, forget these hack ways of fixing it. Fix it right.
If i know what your asking, you cant do that.
You can inspect with firebug/chrome dev tools and find the properties which are being overwritten.
Once you find them you can then overwrite in your own stylesheet.
Keep in mind that specificity is important here as well.
If it does not work you may need to add weight to your selectors, or use the !important keyword.
So you want to retain the styles in the sheet, just keep it from affecting the list on the page? Why not give that list a particular ID and style differently?
For example, I just called your list #cellul and gave it a 10px margin to demonstrate the different styling:
p {color:black;font-size:20px;background-color:white;}
body {background-color:white;}
ul{list-style-type:none;margin:0;padding:0;overflow:hidden;}
li{float:left;}
a{display:block;width:400px;background-color:#ff0000;color:white;}
a:hover,a:active{background-color:#cc0000;}
#cellul{list-style-type:none;margin:10px;padding:0;overflow:hidden;}
Here's the result: JsFiddle
You can set a class for your <ul> like so:
<ul class="sth">
Then in the CSS stylesheet, put your class name afterthe ul like:
ul.sth {list-style-type:none;margin:0;padding:0;overflow:hidden;}
Is it a proper method to use a <span> tag inside an <h1> tag?
<h1>
<span class="boardit">Portfolio</span>
</h1>
I know we can write it in this way...and am also following the below syntax in my own website..
<h1 class="boardit">
<span>Portfolio</span>
</h1>
However, I Just wanted to know the cleaner form of html..
Yes you can.
HTML4 has this to say:
<!ENTITY % heading "H1|H2|H3|H4|H5|H6">
<!--
There are six levels of headings from H1 (the most important)
to H6 (the least important).
-->
<!ELEMENT (%heading;) - - (%inline;)* -- heading -->
And %inline; is:
<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">
And %special; includes <span>.
The current HTML has this to say:
Content contents
Phrasing content
And Phrasing content includes <span>.
Yes you can. It can be used to format a part of a h1 block:
<h1>Page <span class="highlight">Title</span></h1>
If the style applies to the entire h1 block, I do this:
<h1 class="highlight">Page Title</h1>
Yes, it's typically fine to use a span inside of an h1. span is an inline element, so it's typically okay to use it inside anything (that allows elements inside it!)
And there's not really a cleaner way to do it sometimes, say if you want to style only part of the h1.
On the other hand... don't do it if it's not necessary, as it is a little ugly : )
Yes that's fine, but why not
<h1 class="boardit">
Portfolio
</h1>
If thats all you're doing?
Yes, you can. The span displays inline, so it should not affect the styling of the H1.
Yes, we can use span tag with header tags and there is nothing wrong in it. Indeed this is widely used for styling header tags, specially for coloring a particular word or letter.
Yes, we can use span tag with header tags and there is nothing wrong in it. Indeed this is widely used for styling header tags, specially for coloring a particular word or letter.
<h1 style="display:inline;">Bold text goes here</h1>
<span style="display:inline;">normal text goes here</span>
Think in above lines - Worked for me - use display:inline prop
I was wondering if we could add a span tag inside a tag....
<h2 style="text-align: left;"><span style="font-weight: bold;">Dog dresses</span><br></h2>
Is the above method right? Is it safe to use...???
I know that We can define some class here and let it go inside other elements like this.
<h2>Dog dresses</h2>
.bold {font-weight: bold; }
OR
<h2 class="bold">Dog dresses</h2>
h2.bold a { font-weight: bold; }
Please share your views..
Yes, it's fine. <span> is an inline element. Unless you add the css display: block; to it, it can go in the <a>.
Both forms are legal. (<a> inside <span> or <span> inside <a/>)
<a><div></div></a>
<!-- illegal < HTML 5, you cannot put block level tags in an <a> -->
<!-- legal in HTML 5 -->
BUT, normally I would only use a <span> inside an <a> for some purpose, because there is some content which needs special treatment
this is <span class="lookatme">special and needs treatment</span>
This is pointless (for me :-) )
<span class="lookatme">some text</span>
THis would normally be
some text
I normally think with <heading> tags, the <a> should be inside the <heading>, but I don't think it is wrong to do the reverse
While that code is valid, it's not the best way to do it.
Here's your code again, indented for clarity
<h2 style="text-align: left;">
<a href="mydomain.com">
<span style="font-weight: bold;">Dog dresses</span>
</a>
<br>
</h2>
The first thing to notice is you have a trailing <br>. What's that for? Extra spacing? Well use padding instead!
Secondly, you don't need the span element - the bold style can be applied directly to the <a> tag.
Why not just write it like this:
<h2 style="text-align: left; padding-bottom: 1em">
Dog dresses
</h2>
It's perfectly legal to have a span tag inside an a tag.
Also read this:
Span inside anchor or anchor inside span or doesn't matter?
It is legal and safe. You can always check your markup at free validation service of w3 organisation: http://validator.w3.org/check
If memory serves correctly, yes, you're allowed to have a <span> within an <a>, and an <a> within an <h2>. Where you define your class is up to you; put it wherever it makes most sense.
You can check if you've written valid HTML here, but don't fret too much if it doesn't validate as long as it renders correctly in all the prominent browsers.
I would perfer to use CSS rather then using inside .
It reduce the complexity of HTML code, it reduce the stress to the browser, by not rendering complex structure.
Easy to grab using JavaScript.
I want to add a different perspective which lacks among answers. Imagine you want to achive something like this, partially linked header:
<h1>This site is amazing</h1>
and a link which is a partial header:
<h1>This</h1> site is amazing
which makes not much sense but syntactically true.