When constructing an HTML document, your syntax should comply to the W3C Standard. Here are some of the common mistakes in HTML and how they can be avoided.
It is not valid HTML and XHTML to include a form within another form. So if you take the following markup below.
<form id="form_1" method="post">
<input type="text">
<input type="text">
<form id="form_2" method="post">
<input type="text">
<input type="text">
<input type="submit">
</form>
<input type="submit">
</form>And accessed the HTML in the browser, you would get the following result.
<form id="form_1" method="post">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="submit">
</form>
<input type="submit">So not only is the syntax invalid HTML, the browser will also strip out the second form element.
In HTML5, simply using <br> is sufficient enough, however if you need to make your document XHTML compatible, then using <br/> will help you pass validation tests. You can also use </br>, however you may run into compatibility issues with older browsers.
The <br> element above is an example of a void element. Here is an extract from W3C regarding void elements:
Void elements only have a start tag; end tags must not be specified for void elements. Foreign elements must either have a start tag and an end tag, or a start tag that is marked as self-closing, in which case they must not have an end tag.
Void elements include <area>, <base>, <br>, <col>, <embed>, <hr>, <img>, <input>, <keygen>, <link>, <menuitem>, <meta>, <param>, <source>, <track>, <wbr>
Ensure that when nesting elements the inner paid of HTML tags both reside within the outer pair. The following is incorrect:
<!DOCTYPE html>
<html>
<body>
<p><strong>Here is some text</p></strong>
</body>
</html>However the browser will render the markup correctly.
<ul> and <ol> in HTML is short for unordered list and ordered list respectively. There are commonly misused when displaying list items.
When using <ul>, you get bullet points as per the default CSS rules that are applied to this element and its children <li> elements. With <ol>, you get numbers.
Put simply, <ul> represents a set whereas <ol> represents a sequence. If changing the order of the items makes the list incorrect, you should look to use <ol>. If the order doesn’t matter, e.g. when constructing a navigation menu in the header, use <ul>.