Line25

You’re Doing it Wrong: Common HTML Tag Misuses

You’re Doing it Wrong: Common HTML Tag Misuses

View the source code of a hand full of websites featured in CSS galleries today and you’ll often see the same errors appear time and time again. These mistakes are usually habits we picked up during our early days of coding that have stuck around due to lack of clarification. This post rounds up a collection of common HTML tag and element misuses and describes the best practice to correctly and semantically use them in your markup.

Table of Contents: hide
Misuse of the
How not to use the
How to properly use the
Misuse of the tag</span> </a> </div><div class="lwptoc_item"> <a href="#How_not_to_use_the_title_tag" class="lwptoc_item"> <span class="lwptoc_item_label">How not to use the <title> tag</span> </a> </div><div class="lwptoc_item"> <a href="#How_to_properly_use_the_title_tag" class="lwptoc_item"> <span class="lwptoc_item_label">How to properly use the <title> tag</span> </a> </div><div class="lwptoc_item"> <a href="#Misuse_of_the_img_tag" class="lwptoc_item"> <span class="lwptoc_item_label">Misuse of the <img> tag</span> </a> </div><div class="lwptoc_item"> <a href="#How_not_to_use_the_img_tag" class="lwptoc_item"> <span class="lwptoc_item_label">How not to use the <img> tag</span> </a> </div><div class="lwptoc_item"> <a href="#How_to_properly_use_the_img_tag" class="lwptoc_item"> <span class="lwptoc_item_label">How to properly use the <img> tag</span> </a> </div><div class="lwptoc_item"> <a href="#Misuse_of_the_label_tag" class="lwptoc_item"> <span class="lwptoc_item_label">Misuse of the <label> tag</span> </a> </div><div class="lwptoc_item"> <a href="#How_not_to_use_the_label_tag" class="lwptoc_item"> <span class="lwptoc_item_label">How not to use the <label> tag</span> </a> </div><div class="lwptoc_item"> <a href="#How_to_properly_use_the_label_tag" class="lwptoc_item"> <span class="lwptoc_item_label">How to properly use the <label> tag</span> </a> </div><div class="lwptoc_item"> <a href="#Misuse_of_the_address_tag" class="lwptoc_item"> <span class="lwptoc_item_label">Misuse of the <address> tag</span> </a> </div><div class="lwptoc_item"> <a href="#How_not_to_use_the_address_tag" class="lwptoc_item"> <span class="lwptoc_item_label">How not to use the <address> tag</span> </a> </div><div class="lwptoc_item"> <a href="#How_to_properly_use_the_address_tag" class="lwptoc_item"> <span class="lwptoc_item_label">How to properly use the <address> tag</span> </a> </div></div></div> </div></div> <p><span id="more-1825"></span></p> <h3 class="header"><span id="Misuse_of_the_br_tag">Misuse of the <br> tag</span></h3> <p><img src="https://line25.com/wp-content/uploads/2011/html-misuse/1.png" alt="The <br> HTML tag"></p> <h3><span id="How_not_to_use_the_br_tag">How not to use the <br> tag</span></h3> <p>A common misuse of the <code><br></code> tag is to use it to create spaces or gaps in your content. WYSIWYG editors are notorious for injecting multiple line breaks or empty paragraph tags.</p> <h3><span id="How_to_properly_use_the_br_tag">How to properly use the <br> tag</span></h3> <p>The <code><br></code> is used to insert a line break in a sentence. Examples might be to correctly lay out an address. Use paragraph elements to split up your content and use CSS margins to alter the spacing between them.</p> <h3 class="header"><span id="Misuse_of_the_div_tag">Misuse of the <div> tag</span></h3> <p><img src="https://line25.com/wp-content/uploads/2011/html-misuse/2.png" alt="The <div> HTML tag"></p> <h3><span id="How_not_to_use_the_div_tag">How not to use the <div> tag</span></h3> <p>When we first get to grips with HTML and coding in CSS we often get carried away with our divs and surround almost every page item with its own div tags. </p> <h3><span id="How_to_properly_use_the_div_tag">How to properly use the <div> tag</span></h3> <p>The <code><div></code> tag is perfectly acceptable to use to define the main page structure, but always try to use more suitable tags for your page elements. Paragraph tags, ordered/unordered lists and definition lists can be more semantic choices.</p> <h3 class="header"><span id="Misuse_of_the_small_tag">Misuse of the <small> tag</span></h3> <p><img src="https://line25.com/wp-content/uploads/2011/html-misuse/3.png" alt="The <small> HTML tag"></p> <h3><span id="How_not_to_use_the_small_tag">How not to use the <small> tag</span></h3> <p>The <code><small></code> tag is often wrongly used as its name suggests, to create text that’s small in size. </p> <h3><span id="How_to_properly_use_the_small_tag">How to properly use the <small> tag</span></h3> <p>CSS should always be used for presentational styling, so use the <code>font-size</code> CSS property to control your text sizes. The <code><small></code> HTML tag is reserved for defining “smallprint” or legal text.</p> <h3 class="header"><span id="Misuse_of_the_hr_tag">Misuse of the <hr> tag</span></h3> <p><img src="https://line25.com/wp-content/uploads/2011/html-misuse/4.png" alt="The <hr> HTML tag"></p> <h3><span id="How_not_to_use_the_hr_tag">How not to use the <hr> tag</span></h3> <p>The use of the <code><hr></code> is pretty rare these days, but when you do see it you can guarantee it’s being misused as a presentational line between sections of a page.</p> <h3><span id="How_to_properly_use_the_hr_tag">How to properly use the <hr> tag</span></h3> <p>These days the CSS <code>border</code> property is the correct solution in most situations, however the <code><hr></code> tags still has its use in specific situations when defining layouts containing copy such as book chapters or poetry stanzas.</p> <h3 class="header"><span id="Misuse_of_the_title_tag">Misuse of the <title> tag</span></h3> <p><img src="https://line25.com/wp-content/uploads/2011/html-misuse/5.png" alt="The <title> HTML tag"></p> <h3><span id="How_not_to_use_the_title_tag">How not to use the <title> tag</span></h3> <p>In most cases the HTML <code><title></code> tag (not the attribute) is misused in two extremes. It either contains no valuable information, or it’s packed full of endless keywords for “SEO”.</p> <h3><span id="How_to_properly_use_the_title_tag">How to properly use the <title> tag</span></h3> <p>The <code><title></code> should accurately but concisely describe the contents of the page. It’s important to include keywords that relate to the content as it is recognised by search engines, but it shouldn’t be abused.</p> <h3 class="header"><span id="Misuse_of_the_img_tag">Misuse of the <img> tag</span></h3> <p><img src="https://line25.com/wp-content/uploads/2011/html-misuse/6.png" alt="The <img> HTML tag"></p> <h3><span id="How_not_to_use_the_img_tag">How not to use the <img> tag</span></h3> <p>The misuse of the <code><img></code> is actually more to do with the misuse of its <code>alt</code> attribute. Often the text within the <code>alt</code> attribute is completely irrelevant (if it exists at all!).</p> <h3><span id="How_to_properly_use_the_img_tag">How to properly use the <img> tag</span></h3> <p><code><img></code> tag <code>alt</code> attributes should contain an accurate description of the image. If the image is being used as a link give an insight to where the link will go. If the image has no importance an empty <code>alt</code> attribute is acceptable.</p> <h3 class="header"><span id="Misuse_of_the_label_tag">Misuse of the <label> tag</span></h3> <p><img src="https://line25.com/wp-content/uploads/2011/html-misuse/7.png" alt="The <label> HTML tag"></p> <h3><span id="How_not_to_use_the_label_tag">How not to use the <label> tag</span></h3> <p><code><label></code> is another tag that is often left out altogether rather than being misused. When it does appear it rarely includes the <code>for</code> attribute.</p> <h3><span id="How_to_properly_use_the_label_tag">How to properly use the <label> tag</span></h3> <p>Use the <code><label></code> tag to relate a field to its descriptive label. For extra usability points add the <code>for</code> attribute to allow the user to click the label to activate the relevant input field.</p> <h3 class="header"><span id="Misuse_of_the_address_tag">Misuse of the <address> tag</span></h3> <p><img src="https://line25.com/wp-content/uploads/2011/html-misuse/8.png" alt="The <address> HTML tag"></p> <h3><span id="How_not_to_use_the_address_tag">How not to use the <address> tag</span></h3> <p>The name of the <code><address></code> wrongly suggests that it should be used to surround a postal address on a contact page.</p> <h3><span id="How_to_properly_use_the_address_tag">How to properly use the <address> tag</span></h3> <p>The correct use of the <code><address></code> tag is to define the author or owner of the document. Therefore it’s usually wrapped around their name along with their contact email address or telephone number. </p> <a class="resp-sharing-button__link" href="https://facebook.com/sharer/sharer.php?u=https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse" target="_blank" aria-label=""> <div class="resp-sharing-button resp-sharing-button--fb resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid"> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path d="M18.77 7.46H14.5v-1.9c0-.9.6-1.1 1-1.1h3V.5h-4.33C10.24.5 9.5 3.44 9.5 5.32v2.15h-3v4h3v12h5v-12h3.85l.42-4z"></path></svg> </div> </div> </a><a class="resp-sharing-button__link" href="https://twitter.com/intent/tweet/?text=You%E2%80%99re%20Doing%20it%20Wrong:%20Common%20HTML%20Tag%20Misuses&url=https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse" target="_blank" aria-label=""> <div class="resp-sharing-button resp-sharing-button--twt resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid"> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path d="M23.44 4.83c-.8.37-1.5.38-2.22.02.93-.56.98-.96 1.32-2.02-.88.52-1.86.9-2.9 1.1-.82-.88-2-1.43-3.3-1.43-2.5 0-4.55 2.04-4.55 4.54 0 .36.03.7.1 1.04-3.77-.2-7.12-2-9.36-4.75-.4.67-.6 1.45-.6 2.3 0 1.56.8 2.95 2 3.77-.74-.03-1.44-.23-2.05-.57v.06c0 2.2 1.56 4.03 3.64 4.44-.67.2-1.37.2-2.06.08.58 1.8 2.26 3.12 4.25 3.16C5.78 18.1 3.37 18.74 1 18.46c2 1.3 4.4 2.04 6.97 2.04 8.35 0 12.92-6.92 12.92-12.93 0-.2 0-.4-.02-.6.9-.63 1.96-1.22 2.56-2.14z"></path></svg> </div> </div> </a><a class="resp-sharing-button__link" href="https://www.linkedin.com/shareArticle?mini=true&url=https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse&title=You%E2%80%99re%20Doing%20it%20Wrong:%20Common%20HTML%20Tag%20Misuses&summary=You%E2%80%99re%20Doing%20it%20Wrong:%20Common%20HTML%20Tag%20Misuses&source=https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse" target="_blank" aria-label=""> <div class="resp-sharing-button resp-sharing-button--lkd resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid"> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path d="M6.5 21.5h-5v-13h5v13zM4 6.5C2.5 6.5 1.5 5.3 1.5 4s1-2.4 2.5-2.4c1.6 0 2.5 1 2.6 2.5 0 1.4-1 2.5-2.6 2.5zm11.5 6c-1 0-2 1-2 2v7h-5v-13h5V10s1.6-1.5 4-1.5c3 0 5 2.2 5 6.3v6.7h-5v-7c0-1-1-2-2-2z"></path></svg> </div> </div> </a><a class="resp-sharing-button__link" href="https://www.tumblr.com/widgets/share/tool?posttype=link&title=You%E2%80%99re%20Doing%20it%20Wrong:%20Common%20HTML%20Tag%20Misuses&caption=https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse&content=https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse&canonicalUrl=https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse&shareSource=tumblr_share_button" target="_blank" aria-label=""> <div class="resp-sharing-button resp-sharing-button--tbl resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid"> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path d="M13.5.5v5h5v4h-5V15c0 5 3.5 4.4 6 2.8v4.4c-6.7 3.2-12 0-12-4.2V9.5h-3V6.7c1-.3 2.2-.7 3-1.3.5-.5 1-1.2 1.4-2 .3-.7.6-1.7.7-3h3.8z"></path></svg> </div> </div> </a><a class="resp-sharing-button__link" href="https://pinterest.com/pin/create/button/?url=https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse&media=You%E2%80%99re%20Doing%20it%20Wrong:%20Common%20HTML%20Tag%20Misuses&description=You%E2%80%99re%20Doing%20it%20Wrong:%20Common%20HTML%20Tag%20Misuses" target="_blank" aria-label=""> <div class="resp-sharing-button resp-sharing-button--pin resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid"> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path d="M12.14.5C5.86.5 2.7 5 2.7 8.75c0 2.27.86 4.3 2.7 5.05.3.12.57 0 .66-.33l.27-1.06c.1-.32.06-.44-.2-.73-.52-.62-.86-1.44-.86-2.6 0-3.33 2.5-6.32 6.5-6.32 3.55 0 5.5 2.17 5.5 5.07 0 3.8-1.7 7.02-4.2 7.02-1.37 0-2.4-1.14-2.07-2.54.4-1.68 1.16-3.48 1.16-4.7 0-1.07-.58-1.98-1.78-1.98-1.4 0-2.55 1.47-2.55 3.42 0 1.25.43 2.1.43 2.1l-1.7 7.2c-.5 2.13-.08 4.75-.04 5 .02.17.22.2.3.1.14-.18 1.82-2.26 2.4-4.33.16-.58.93-3.63.93-3.63.45.88 1.8 1.65 3.22 1.65 4.25 0 7.13-3.87 7.13-9.05C20.5 4.15 17.18.5 12.14.5z"></path></svg> </div> </div> </a><div class="crp_related "><h3>You may also like:</h3><ul><li><a href="https://line25.com/articles/10-common-validation-errors-and-how-to-fix-them"><span class="crp_title">10 Common Validation Errors and How To Fix Them</span></a></li><li><a href="https://line25.com/tutorials/put-email-client-renderability-fires-simple-workarounds"><span class="crp_title">Responsive Email Design: Common Issues and Workarounds</span></a></li><li><a href="https://line25.com/tutorials/how-to-code-up-a-web-design-from-psd-to-html"><span class="crp_title">How to Code up a Web Design from PSD to HTML</span></a></li><li><a href="https://line25.com/tutorials/designing-an-infographic-with-html-css-and-jquery"><span class="crp_title">Designing an Infographic with HTML, CSS & jQuery</span></a></li><li><a href="https://line25.com/tutorials/coding-up-a-web-design-concept-into-html-css"><span class="crp_title">Coding Up a Web Design Concept into HTML & CSS</span></a></li><li><a href="https://line25.com/articles/top-html-css-editing-apps-for-mac-designers"><span class="crp_title">Top HTML & CSS Editing Apps For Mac Designers</span></a></li><li><a href="https://line25.com/articles/10-html-tag-crimes-you-really-shouldnt-commit"><span class="crp_title">10 HTML Tag Crimes You Really Shouldn't Commit</span></a></li><li><a href="https://line25.com/articles/25-interactive-html-websites-that-look-like-flash"><span class="crp_title">25 Interactive HTML Websites That Look Like Flash</span></a></li><li><a href="https://line25.com/articles/wordpress-html-templates-giveaway"><span class="crp_title">WordPress and HTML Templates Giveaway</span></a></li><li><a href="https://line25.com/ui-ux-design/html-basics-for-web-and-graphic-designers"><span class="crp_title">HTML Basics all Web and Graphic Designers Should Know</span></a></li></ul><div class="crp_clear"></div></div> </article> <!-- <div id="subscribe-form"> <a href="/subscribe" class="shadows"><img src="https://line25.com/wp-content/themes/Line25-V3/images/join-newsletter1.jpg" alt="100 HD Blurred Backgrounds" /></a> <div class="AW-Form-1820590983"></div> <script type="text/javascript">(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//forms.aweber.com/form/83/1820590983.js"; fjs.parentNode.insertBefore(js, fjs); }(document, "script", "aweber-wjs-0yd6fotsi")); </script> --> <!--<p>Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of <a href="/subscribe">100 HD Blurred Backgrounds + bonus 10 realistic web shadows</a>.</p> <a href="/subscribe" class="shadows"><img src="https://line25.com/wp-content/themes/Line25-V3/images/for-pop-up.jpg" alt="100 HD Blurred Backgrounds" /></a>--> <!-- </div> --> <div id="author"> <a href="" id="author-image"></a> <div id="author-bio"> <h4>Written by Iggy</h4> <p>Iggy is the main person behind Line25. Iggy is a designer who loves experimenting with new web design techniques, collating creative website designs and writing about latest design trends, inspiration, design freebies and more. You can follow Iggy on <a href="https://twitter.com/line25blog">Twitter</a>.</p> </div> </div> <div id="comments"> <strong>59 Comments</strong> <div id="respond"> <h3>Would you like to say something?</h3> <form action="https://line25.com/wp-comments-post.php" method="post" id="commentform"> <fieldset> <!-- <div class="fields"> <label for="author">Name:</label> <input type="text" name="author" id="author" value="" /> <label for="email">Email:</label> <input type="text" name="email" id="email" value="" /> <label for="url">Website:</label> <input type="text" name="url" id="url" value="" /> </div> --> <div class="message"> <label for="author">Your Name:</label> <input type="text" name="author" id="author" value="" /> <label for="comment">Your Comment:</label> <textarea name="comment" id="comment"></textarea> <input type="submit" class="commentsubmit" value="Submit Comment" /> </div> <input type='hidden' name='comment_post_ID' value='1825' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> <p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="f17c8e4e12" /></p><p style="display: none;"><input type="hidden" id="ak_js" name="ak_js" value="239"/></p> </fieldset> </form> <p class="cancel"><a rel="nofollow" id="cancel-comment-reply-link" href="/articles/youre-doing-it-wrong-common-html-tag-misuse#respond" style="display:none;">Cancel Reply</a></p> </div> <ol class="commentlist"> <li class="comment even thread-even depth-1" id="comment-272261"> <div id="div-comment-272261" class="comment-body"> <div class="comment-author vcard"> <cite class="fn">Jacques</cite> <span class="says">says:</span> </div> <div class="comment-meta commentmetadata"><a href="https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse#comment-272261"> March 17, 2017 at 5:23 pm </a> </div> <p>Really cool article ;) First time I read an article on this topic.</p> <p>I was still doing few of these common HTML tag and element misuses… I will try to correct my practice now.</p> <p>Big thanks ;)</p> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-272261' data-commentid="272261" data-postid="1825" data-belowelement="div-comment-272261" data-respondelement="respond" aria-label='Reply to Jacques'>Reply</a></div> </div> </li><!-- #comment-## --> <li class="comment odd alt thread-odd thread-alt depth-1" id="comment-128977"> <div id="div-comment-128977" class="comment-body"> <div class="comment-author vcard"> <cite class="fn">Thierry Ouellet</cite> <span class="says">says:</span> </div> <div class="comment-meta commentmetadata"><a href="https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse#comment-128977"> March 30, 2016 at 9:38 pm </a> </div> <p>Thanks for refreshing my memory regarding the label tag! That’s the problem of using WordPress plugins, you start forgetting the basics!</p> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-128977' data-commentid="128977" data-postid="1825" data-belowelement="div-comment-128977" data-respondelement="respond" aria-label='Reply to Thierry Ouellet'>Reply</a></div> </div> </li><!-- #comment-## --> <li class="comment even thread-even depth-1" id="comment-74385"> <div id="div-comment-74385" class="comment-body"> <div class="comment-author vcard"> <cite class="fn">Caro Creative Web Design Oxfordshire</cite> <span class="says">says:</span> </div> <div class="comment-meta commentmetadata"><a href="https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse#comment-74385"> October 19, 2015 at 7:30 am </a> </div> <p>Great tips collection. A mine gold I might say.</p> <p>Thanks,</p> <p>LC</p> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-74385' data-commentid="74385" data-postid="1825" data-belowelement="div-comment-74385" data-respondelement="respond" aria-label='Reply to Caro Creative Web Design Oxfordshire'>Reply</a></div> </div> </li><!-- #comment-## --> <li class="comment odd alt thread-odd thread-alt depth-1" id="comment-68506"> <div id="div-comment-68506" class="comment-body"> <div class="comment-author vcard"> <cite class="fn">Scott</cite> <span class="says">says:</span> </div> <div class="comment-meta commentmetadata"><a href="https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse#comment-68506"> October 1, 2015 at 7:54 am </a> </div> <p>clearly an old article based on the timestamp of the comments, but one major miss here is <i> which is commonly misused to render icons.</p> <p>per mdn:<br /> The HTML </i><i> Element represents a range of text that is set off from the normal text for some reason, for example, technical terms, foreign language phrases, or fictional character thoughts. It is typically displayed in italic type.</p> <p>not for icons…</i></p> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-68506' data-commentid="68506" data-postid="1825" data-belowelement="div-comment-68506" data-respondelement="respond" aria-label='Reply to Scott'>Reply</a></div> </div> </li><!-- #comment-## --> <li class="comment even thread-even depth-1" id="comment-15927"> <div id="div-comment-15927" class="comment-body"> <div class="comment-author vcard"> <cite class="fn">web design hessle</cite> <span class="says">says:</span> </div> <div class="comment-meta commentmetadata"><a href="https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse#comment-15927"> October 6, 2011 at 8:24 pm </a> </div> <p>Useful article, I didn't even know about the <small> tag</p> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-15927' data-commentid="15927" data-postid="1825" data-belowelement="div-comment-15927" data-respondelement="respond" aria-label='Reply to web design hessle'>Reply</a></div> </div> </li><!-- #comment-## --> <li class="comment odd alt thread-odd thread-alt depth-1" id="comment-15917"> <div id="div-comment-15917" class="comment-body"> <div class="comment-author vcard"> <cite class="fn">W3Spor</cite> <span class="says">says:</span> </div> <div class="comment-meta commentmetadata"><a href="https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse#comment-15917"> October 6, 2011 at 8:18 am </a> </div> <p>Thanks, useful information about correct coding… I need it!</p> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-15917' data-commentid="15917" data-postid="1825" data-belowelement="div-comment-15917" data-respondelement="respond" aria-label='Reply to W3Spor'>Reply</a></div> </div> </li><!-- #comment-## --> <li class="comment even thread-even depth-1" id="comment-15912"> <div id="div-comment-15912" class="comment-body"> <div class="comment-author vcard"> <cite class="fn">Christie</cite> <span class="says">says:</span> </div> <div class="comment-meta commentmetadata"><a href="https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse#comment-15912"> October 5, 2011 at 3:03 pm </a> </div> <p>I'll admit.. I use the small tag to make small text when I am lazy :D</p> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-15912' data-commentid="15912" data-postid="1825" data-belowelement="div-comment-15912" data-respondelement="respond" aria-label='Reply to Christie'>Reply</a></div> </div> </li><!-- #comment-## --> <li class="comment odd alt thread-odd thread-alt depth-1" id="comment-15910"> <div id="div-comment-15910" class="comment-body"> <div class="comment-author vcard"> <cite class="fn">Jo Cox</cite> <span class="says">says:</span> </div> <div class="comment-meta commentmetadata"><a href="https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse#comment-15910"> October 5, 2011 at 1:36 pm </a> </div> <p>Great article, never used the <address> tag before, you learn something new every day!</p> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-15910' data-commentid="15910" data-postid="1825" data-belowelement="div-comment-15910" data-respondelement="respond" aria-label='Reply to Jo Cox'>Reply</a></div> </div> </li><!-- #comment-## --> <li class="comment even thread-even depth-1" id="comment-15909"> <div id="div-comment-15909" class="comment-body"> <div class="comment-author vcard"> <cite class="fn">S3bY</cite> <span class="says">says:</span> </div> <div class="comment-meta commentmetadata"><a href="https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse#comment-15909"> October 5, 2011 at 9:05 am </a> </div> <p>Great tips collection! A mine gold I might say for a beginner!</p> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-15909' data-commentid="15909" data-postid="1825" data-belowelement="div-comment-15909" data-respondelement="respond" aria-label='Reply to S3bY'>Reply</a></div> </div> </li><!-- #comment-## --> <li class="comment odd alt thread-odd thread-alt depth-1" id="comment-15906"> <div id="div-comment-15906" class="comment-body"> <div class="comment-author vcard"> <cite class="fn">Majalah</cite> <span class="says">says:</span> </div> <div class="comment-meta commentmetadata"><a href="https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse#comment-15906"> October 5, 2011 at 4:08 am </a> </div> <p>ocassionally I still use <br / > for dirty solution :D</p> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-15906' data-commentid="15906" data-postid="1825" data-belowelement="div-comment-15906" data-respondelement="respond" aria-label='Reply to Majalah'>Reply</a></div> </div> </li><!-- #comment-## --> <li class="comment even thread-even depth-1" id="comment-15896"> <div id="div-comment-15896" class="comment-body"> <div class="comment-author vcard"> <cite class="fn">D</cite> <span class="says">says:</span> </div> <div class="comment-meta commentmetadata"><a href="https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse#comment-15896"> October 4, 2011 at 6:23 am </a> </div> <p>So…what, semantically, is a mailing address? Gotta admit I've been using <address>. It ain't a <p> or a <div>, etc… help?</p> <p>Great article!</p> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-15896' data-commentid="15896" data-postid="1825" data-belowelement="div-comment-15896" data-respondelement="respond" aria-label='Reply to D'>Reply</a></div> </div> </li><!-- #comment-## --> <li class="comment odd alt thread-odd thread-alt depth-1" id="comment-15895"> <div id="div-comment-15895" class="comment-body"> <div class="comment-author vcard"> <cite class="fn">Matthew Dickens</cite> <span class="says">says:</span> </div> <div class="comment-meta commentmetadata"><a href="https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse#comment-15895"> October 4, 2011 at 6:06 am </a> </div> <p>It drives me CRAZY when I see multiple <br> tags in a row!!<br /> <br><br><br /> This was a good article. Thank you.</p> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-15895' data-commentid="15895" data-postid="1825" data-belowelement="div-comment-15895" data-respondelement="respond" aria-label='Reply to Matthew Dickens'>Reply</a></div> </div> </li><!-- #comment-## --> <li class="comment even thread-even depth-1" id="comment-15870"> <div id="div-comment-15870" class="comment-body"> <div class="comment-author vcard"> <cite class="fn">matiangul</cite> <span class="says">says:</span> </div> <div class="comment-meta commentmetadata"><a href="https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse#comment-15870"> October 3, 2011 at 7:58 am </a> </div> <p>Thanks for lesson of semantic code. Great and short article.</p> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-15870' data-commentid="15870" data-postid="1825" data-belowelement="div-comment-15870" data-respondelement="respond" aria-label='Reply to matiangul'>Reply</a></div> </div> </li><!-- #comment-## --> <li class="comment odd alt thread-odd thread-alt depth-1" id="comment-15868"> <div id="div-comment-15868" class="comment-body"> <div class="comment-author vcard"> <cite class="fn">Clain Dsilva</cite> <span class="says">says:</span> </div> <div class="comment-meta commentmetadata"><a href="https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse#comment-15868"> October 3, 2011 at 5:41 am </a> </div> <p>Good article,</p> <p>I agree with the misuse of <BR> and <hr> tags.. I have seen many while I do a rework on already done websites. </p> <p>Another notorious one is use of "&nbsp;" to put more than one space.</p> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-15868' data-commentid="15868" data-postid="1825" data-belowelement="div-comment-15868" data-respondelement="respond" aria-label='Reply to Clain Dsilva'>Reply</a></div> </div> </li><!-- #comment-## --> <li class="comment even thread-even depth-1" id="comment-15863"> <div id="div-comment-15863" class="comment-body"> <div class="comment-author vcard"> <cite class="fn">Brad</cite> <span class="says">says:</span> </div> <div class="comment-meta commentmetadata"><a href="https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse#comment-15863"> October 2, 2011 at 7:40 pm </a> </div> <p>But..its so much easier to not understand them when its obvious they are self explanatory</p> <p>< / sarcasm off ></p> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-15863' data-commentid="15863" data-postid="1825" data-belowelement="div-comment-15863" data-respondelement="respond" aria-label='Reply to Brad'>Reply</a></div> </div> </li><!-- #comment-## --> <li class="comment odd alt thread-odd thread-alt depth-1" id="comment-15852"> <div id="div-comment-15852" class="comment-body"> <div class="comment-author vcard"> <cite class="fn">Mike</cite> <span class="says">says:</span> </div> <div class="comment-meta commentmetadata"><a href="https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse#comment-15852"> October 2, 2011 at 4:44 am </a> </div> <p>Great resource, so many times I see websites that are poorly built and I think you make your argument very clear.</p> <p>I also really don't like WYSIWYG editors that so badly encode pages, it breaks my heart! Ok maybe not that extreme, but still….</p> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-15852' data-commentid="15852" data-postid="1825" data-belowelement="div-comment-15852" data-respondelement="respond" aria-label='Reply to Mike'>Reply</a></div> </div> </li><!-- #comment-## --> <li class="comment even thread-even depth-1" id="comment-15849"> <div id="div-comment-15849" class="comment-body"> <div class="comment-author vcard"> <cite class="fn">web designer Abu dhabi</cite> <span class="says">says:</span> </div> <div class="comment-meta commentmetadata"><a href="https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse#comment-15849"> October 1, 2011 at 8:51 pm </a> </div> <p>Excellent article. thanks for doing this nice job!</p> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-15849' data-commentid="15849" data-postid="1825" data-belowelement="div-comment-15849" data-respondelement="respond" aria-label='Reply to web designer Abu dhabi'>Reply</a></div> </div> </li><!-- #comment-## --> <li class="comment odd alt thread-odd thread-alt depth-1" id="comment-15846"> <div id="div-comment-15846" class="comment-body"> <div class="comment-author vcard"> <cite class="fn">web site design</cite> <span class="says">says:</span> </div> <div class="comment-meta commentmetadata"><a href="https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse#comment-15846"> October 1, 2011 at 11:33 am </a> </div> <p>how come u know about the <small> ?</p> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-15846' data-commentid="15846" data-postid="1825" data-belowelement="div-comment-15846" data-respondelement="respond" aria-label='Reply to web site design'>Reply</a></div> </div> </li><!-- #comment-## --> <li class="comment even thread-even depth-1" id="comment-15814"> <div id="div-comment-15814" class="comment-body"> <div class="comment-author vcard"> <cite class="fn">JimJ</cite> <span class="says">says:</span> </div> <div class="comment-meta commentmetadata"><a href="https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse#comment-15814"> September 29, 2011 at 3:38 pm </a> </div> <p>Possibly "misuse" is a bit extreme in a couple of cases, but generally a good article. Cheers</p> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-15814' data-commentid="15814" data-postid="1825" data-belowelement="div-comment-15814" data-respondelement="respond" aria-label='Reply to JimJ'>Reply</a></div> </div> </li><!-- #comment-## --> <li class="comment odd alt thread-odd thread-alt depth-1" id="comment-15812"> <div id="div-comment-15812" class="comment-body"> <div class="comment-author vcard"> <cite class="fn">Chris F.A. Johnson</cite> <span class="says">says:</span> </div> <div class="comment-meta commentmetadata"><a href="https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse#comment-15812"> September 29, 2011 at 1:00 pm </a> </div> <p>Where did you get the idea that "The <small> HTML tag is reserved for defining “smallprint” or legal text"?</p> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-15812' data-commentid="15812" data-postid="1825" data-belowelement="div-comment-15812" data-respondelement="respond" aria-label='Reply to Chris F.A. Johnson'>Reply</a></div> </div> </li><!-- #comment-## --> <li class="comment even thread-even depth-1" id="comment-15807"> <div id="div-comment-15807" class="comment-body"> <div class="comment-author vcard"> <cite class="fn">Logo Blog</cite> <span class="says">says:</span> </div> <div class="comment-meta commentmetadata"><a href="https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse#comment-15807"> September 29, 2011 at 7:51 am </a> </div> <p>Very nice beginning information! Great way of explanation! which i like most! i will look forward for a new lesson! thanks for doing this nice job!</p> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-15807' data-commentid="15807" data-postid="1825" data-belowelement="div-comment-15807" data-respondelement="respond" aria-label='Reply to Logo Blog'>Reply</a></div> </div> </li><!-- #comment-## --> <li class="comment odd alt thread-odd thread-alt depth-1" id="comment-15808"> <div id="div-comment-15808" class="comment-body"> <div class="comment-author vcard"> <cite class="fn">Tony</cite> <span class="says">says:</span> </div> <div class="comment-meta commentmetadata"><a href="https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse#comment-15808"> September 29, 2011 at 8:31 am </a> </div> <p>Mistakes we all made in the beginning ;) I think….</p> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-15808' data-commentid="15808" data-postid="1825" data-belowelement="div-comment-15808" data-respondelement="respond" aria-label='Reply to Tony'>Reply</a></div> </div> </li><!-- #comment-## --> <li class="comment even thread-even depth-1" id="comment-15804"> <div id="div-comment-15804" class="comment-body"> <div class="comment-author vcard"> <cite class="fn">Xtreme Websites</cite> <span class="says">says:</span> </div> <div class="comment-meta commentmetadata"><a href="https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse#comment-15804"> September 28, 2011 at 6:36 pm </a> </div> <p>This was a great post. I was a good reminder of the complexities of web page design.</p> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-15804' data-commentid="15804" data-postid="1825" data-belowelement="div-comment-15804" data-respondelement="respond" aria-label='Reply to Xtreme Websites'>Reply</a></div> </div> </li><!-- #comment-## --> <li class="comment odd alt thread-odd thread-alt depth-1" id="comment-15797"> <div id="div-comment-15797" class="comment-body"> <div class="comment-author vcard"> <cite class="fn">German Translation</cite> <span class="says">says:</span> </div> <div class="comment-meta commentmetadata"><a href="https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse#comment-15797"> September 28, 2011 at 9:45 am </a> </div> <p>Excellent article as always.. The <br> tag is a pet peeve of mine ;)</p> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-15797' data-commentid="15797" data-postid="1825" data-belowelement="div-comment-15797" data-respondelement="respond" aria-label='Reply to German Translation'>Reply</a></div> </div> </li><!-- #comment-## --> <li class="comment even thread-even depth-1" id="comment-15792"> <div id="div-comment-15792" class="comment-body"> <div class="comment-author vcard"> <cite class="fn">Christian</cite> <span class="says">says:</span> </div> <div class="comment-meta commentmetadata"><a href="https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse#comment-15792"> September 27, 2011 at 6:47 pm </a> </div> <p>Speaking of HRs I see people use graphic elements on pages all the time that are just images inserted into the flow of the document when they should really be background images on an HR element.</p> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-15792' data-commentid="15792" data-postid="1825" data-belowelement="div-comment-15792" data-respondelement="respond" aria-label='Reply to Christian'>Reply</a></div> </div> </li><!-- #comment-## --> <li class="comment odd alt thread-odd thread-alt depth-1" id="comment-15791"> <div id="div-comment-15791" class="comment-body"> <div class="comment-author vcard"> <cite class="fn">Christian</cite> <span class="says">says:</span> </div> <div class="comment-meta commentmetadata"><a href="https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse#comment-15791"> September 27, 2011 at 6:37 pm </a> </div> <p>Back when XHTML started to get some visibility it included the promise of being able to create your own elements since it was a blend of HTML and XML. So I remember thinking (ten years ago) that if you created an element that was for surrounding a postal address on a contact page that element would very like be called . . . drum roll, please . . . ADDRESS. But people get on your case for using the ADDRESS element for marking up postal addresses but even with HTML5 there is no adequate mechanism for it apart from a generally messy combination of DIV and SPAN elements, such as the microformats generator churns out.</p> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-15791' data-commentid="15791" data-postid="1825" data-belowelement="div-comment-15791" data-respondelement="respond" aria-label='Reply to Christian'>Reply</a></div> </div> </li><!-- #comment-## --> <li class="comment even thread-even depth-1 parent" id="comment-15779"> <div id="div-comment-15779" class="comment-body"> <div class="comment-author vcard"> <cite class="fn">Kristan</cite> <span class="says">says:</span> </div> <div class="comment-meta commentmetadata"><a href="https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse#comment-15779"> September 27, 2011 at 11:41 am </a> </div> <p>The <small> tag should not be used to make text small??</p> <p>*doh*!</p> <p>Poorly chosen tag name, that.</p> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-15779' data-commentid="15779" data-postid="1825" data-belowelement="div-comment-15779" data-respondelement="respond" aria-label='Reply to Kristan'>Reply</a></div> </div> <ul class="children"> <li class="comment odd alt depth-2" id="comment-15783"> <div id="div-comment-15783" class="comment-body"> <div class="comment-author vcard"> <cite class="fn">Jason Lafferty</cite> <span class="says">says:</span> </div> <div class="comment-meta commentmetadata"><a href="https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse#comment-15783"> September 27, 2011 at 3:20 pm </a> </div> <p>I'd be interested to read more specifically about the < small > tag, as rather than being for legal text I'm guessing that it was designed for using with disclaimer text (ie. any declarations at the bottom of the page, legal or otherwise). Would provide a slightly wider use for the tag.</p> <p>I must point out that I never use it though! :)</p> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-15783' data-commentid="15783" data-postid="1825" data-belowelement="div-comment-15783" data-respondelement="respond" aria-label='Reply to Jason Lafferty'>Reply</a></div> </div> </li><!-- #comment-## --> </ul><!-- .children --> </li><!-- #comment-## --> <li class="comment even thread-odd thread-alt depth-1" id="comment-15772"> <div id="div-comment-15772" class="comment-body"> <div class="comment-author vcard"> <cite class="fn">georgecalm</cite> <span class="says">says:</span> </div> <div class="comment-meta commentmetadata"><a href="https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse#comment-15772"> September 27, 2011 at 5:38 am </a> </div> <p>Nice list. Thanks!</p> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-15772' data-commentid="15772" data-postid="1825" data-belowelement="div-comment-15772" data-respondelement="respond" aria-label='Reply to georgecalm'>Reply</a></div> </div> </li><!-- #comment-## --> <li class="comment odd alt thread-even depth-1 parent" id="comment-15777"> <div id="div-comment-15777" class="comment-body"> <div class="comment-author vcard"> <cite class="fn">Alex</cite> <span class="says">says:</span> </div> <div class="comment-meta commentmetadata"><a href="https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse#comment-15777"> September 27, 2011 at 9:42 am </a> </div> <p>Nice list, but still even you are not using the breakline tag correct.</p> <p>Because the correct tag is <br /> and not <br></p> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-15777' data-commentid="15777" data-postid="1825" data-belowelement="div-comment-15777" data-respondelement="respond" aria-label='Reply to Alex'>Reply</a></div> </div> <ul class="children"> <li class="comment even depth-2" id="comment-15793"> <div id="div-comment-15793" class="comment-body"> <div class="comment-author vcard"> <cite class="fn">Rasmus Lauridsen</cite> <span class="says">says:</span> </div> <div class="comment-meta commentmetadata"><a href="https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse#comment-15793"> September 27, 2011 at 7:47 pm </a> </div> <p>Only if he is doing XHTML.</p> <p>HTML defines <br> without closing the tag.<br /> XHTML on the other hand, being XML does not allow unclosed tags so it uses <br />.</p> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-15793' data-commentid="15793" data-postid="1825" data-belowelement="div-comment-15793" data-respondelement="respond" aria-label='Reply to Rasmus Lauridsen'>Reply</a></div> </div> </li><!-- #comment-## --> </ul><!-- .children --> </li><!-- #comment-## --> <li class="comment odd alt thread-odd thread-alt depth-1" id="comment-15776"> <div id="div-comment-15776" class="comment-body"> <div class="comment-author vcard"> <cite class="fn">ardianzzz</cite> <span class="says">says:</span> </div> <div class="comment-meta commentmetadata"><a href="https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse#comment-15776"> September 27, 2011 at 9:08 am </a> </div> <p>Yeah! validation nonsense without semantic code.</p> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-15776' data-commentid="15776" data-postid="1825" data-belowelement="div-comment-15776" data-respondelement="respond" aria-label='Reply to ardianzzz'>Reply</a></div> </div> </li><!-- #comment-## --> <li class="comment even thread-even depth-1" id="comment-15771"> <div id="div-comment-15771" class="comment-body"> <div class="comment-author vcard"> <cite class="fn">custom icon design</cite> <span class="says">says:</span> </div> <div class="comment-meta commentmetadata"><a href="https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse#comment-15771"> September 27, 2011 at 3:57 am </a> </div> <p>it's great resource, I have noticed I misused many tags. So I decide to re-study the css or html.</p> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-15771' data-commentid="15771" data-postid="1825" data-belowelement="div-comment-15771" data-respondelement="respond" aria-label='Reply to custom icon design'>Reply</a></div> </div> </li><!-- #comment-## --> <li class="comment odd alt thread-odd thread-alt depth-1" id="comment-15767"> <div id="div-comment-15767" class="comment-body"> <div class="comment-author vcard"> <cite class="fn">Ali Rowan</cite> <span class="says">says:</span> </div> <div class="comment-meta commentmetadata"><a href="https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse#comment-15767"> September 26, 2011 at 10:07 pm </a> </div> <p>Thanks for the tips! As someone who remembers learning HTML from the all-mighty Neopets at the age of ten and wants to pick it back up legitimately this time, I found this exceptionally helpful in how digestible you've made the information.</p> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-15767' data-commentid="15767" data-postid="1825" data-belowelement="div-comment-15767" data-respondelement="respond" aria-label='Reply to Ali Rowan'>Reply</a></div> </div> </li><!-- #comment-## --> <li class="comment even thread-even depth-1" id="comment-15759"> <div id="div-comment-15759" class="comment-body"> <div class="comment-author vcard"> <cite class="fn">Spencer</cite> <span class="says">says:</span> </div> <div class="comment-meta commentmetadata"><a href="https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse#comment-15759"> September 26, 2011 at 6:12 pm </a> </div> <p>This was a great refresher.</p> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-15759' data-commentid="15759" data-postid="1825" data-belowelement="div-comment-15759" data-respondelement="respond" aria-label='Reply to Spencer'>Reply</a></div> </div> </li><!-- #comment-## --> <li class="comment odd alt thread-odd thread-alt depth-1" id="comment-15758"> <div id="div-comment-15758" class="comment-body"> <div class="comment-author vcard"> <cite class="fn">vijay</cite> <span class="says">says:</span> </div> <div class="comment-meta commentmetadata"><a href="https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse#comment-15758"> September 26, 2011 at 6:10 pm </a> </div> <p>Nice article, Thanks to point out the misuse of these tags. specially <div> tag which is overused by many designers, now we can use new and more semantic HTML5 tags like <article>, <header>, <footer> etc.</p> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-15758' data-commentid="15758" data-postid="1825" data-belowelement="div-comment-15758" data-respondelement="respond" aria-label='Reply to vijay'>Reply</a></div> </div> </li><!-- #comment-## --> <li class="comment even thread-even depth-1" id="comment-15756"> <div id="div-comment-15756" class="comment-body"> <div class="comment-author vcard"> <cite class="fn">Katie</cite> <span class="says">says:</span> </div> <div class="comment-meta commentmetadata"><a href="https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse#comment-15756"> September 26, 2011 at 4:20 pm </a> </div> <p>I always use CSS to make my font small for legal text, but now I will definitely use "small". Didn't know it even existed. Thanks</p> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-15756' data-commentid="15756" data-postid="1825" data-belowelement="div-comment-15756" data-respondelement="respond" aria-label='Reply to Katie'>Reply</a></div> </div> </li><!-- #comment-## --> <li class="comment odd alt thread-odd thread-alt depth-1" id="comment-15765"> <div id="div-comment-15765" class="comment-body"> <div class="comment-author vcard"> <cite class="fn">antjanus</cite> <span class="says">says:</span> </div> <div class="comment-meta commentmetadata"><a href="https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse#comment-15765"> September 26, 2011 at 8:50 pm </a> </div> <p>I'm pretty sure that the address tag is irrelevant today and for the purposes of SEO and parsing by services, one should stick to microformats :)</p> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-15765' data-commentid="15765" data-postid="1825" data-belowelement="div-comment-15765" data-respondelement="respond" aria-label='Reply to antjanus'>Reply</a></div> </div> </li><!-- #comment-## --> <li class="comment even thread-even depth-1" id="comment-15762"> <div id="div-comment-15762" class="comment-body"> <div class="comment-author vcard"> <cite class="fn">Marco Berrocal</cite> <span class="says">says:</span> </div> <div class="comment-meta commentmetadata"><a href="https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse#comment-15762"> September 26, 2011 at 7:49 pm </a> </div> <p>I dislike designs that resort to using <br>, <small>, but maybe it's more of a pet peeve of mine.</p> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-15762' data-commentid="15762" data-postid="1825" data-belowelement="div-comment-15762" data-respondelement="respond" aria-label='Reply to Marco Berrocal'>Reply</a></div> </div> </li><!-- #comment-## --> <li class="comment odd alt thread-odd thread-alt depth-1" id="comment-15757"> <div id="div-comment-15757" class="comment-body"> <div class="comment-author vcard"> <cite class="fn">Nick West</cite> <span class="says">says:</span> </div> <div class="comment-meta commentmetadata"><a href="https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse#comment-15757"> September 26, 2011 at 5:37 pm </a> </div> <p>I would add that the IMG tag is also misused by using it for style elements rather than setting those style elements as a background-image in the CSS. </p> <p>IMG should be reserved for user content. If the image looks out of place or weird when you disable your style sheet, it probably shouldn't be an IMG or you should consider cutting it differently.</p> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-15757' data-commentid="15757" data-postid="1825" data-belowelement="div-comment-15757" data-respondelement="respond" aria-label='Reply to Nick West'>Reply</a></div> </div> </li><!-- #comment-## --> <li class="comment even thread-even depth-1" id="comment-15745"> <div id="div-comment-15745" class="comment-body"> <div class="comment-author vcard"> <cite class="fn">Marlou</cite> <span class="says">says:</span> </div> <div class="comment-meta commentmetadata"><a href="https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse#comment-15745"> September 26, 2011 at 12:01 pm </a> </div> <p>Thanks for this list.<br /> Is <small> still used in HTML5? I've actually never used the adress-tag before, shame on me. Should remember that one.</p> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-15745' data-commentid="15745" data-postid="1825" data-belowelement="div-comment-15745" data-respondelement="respond" aria-label='Reply to Marlou'>Reply</a></div> </div> </li><!-- #comment-## --> <li class="comment odd alt thread-odd thread-alt depth-1 parent" id="comment-15744"> <div id="div-comment-15744" class="comment-body"> <div class="comment-author vcard"> <cite class="fn">Emil Melgaard</cite> <span class="says">says:</span> </div> <div class="comment-meta commentmetadata"><a href="https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse#comment-15744"> September 26, 2011 at 11:17 am </a> </div> <p>It should be noted that the for attribute in the label tag can be left out if the label tag is wrapping around the input element.</p> <p>Fx.</p> <p><label><br /> A radio button<br /> <input type="radio" name="radio" title="radio" id="radio" /><br /> </label></p> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-15744' data-commentid="15744" data-postid="1825" data-belowelement="div-comment-15744" data-respondelement="respond" aria-label='Reply to Emil Melgaard'>Reply</a></div> </div> <ul class="children"> <li class="comment even depth-2 parent" id="comment-15755"> <div id="div-comment-15755" class="comment-body"> <div class="comment-author vcard"> <cite class="fn">Andy Feliciotti</cite> <span class="says">says:</span> </div> <div class="comment-meta commentmetadata"><a href="https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse#comment-15755"> September 26, 2011 at 4:11 pm </a> </div> <p>The for makes it work in IE/FireFox, just wrapping it only works in Chrome (at least for me)</p> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-15755' data-commentid="15755" data-postid="1825" data-belowelement="div-comment-15755" data-respondelement="respond" aria-label='Reply to Andy Feliciotti'>Reply</a></div> </div> <ul class="children"> <li class="comment odd alt depth-3" id="comment-15760"> <div id="div-comment-15760" class="comment-body"> <div class="comment-author vcard"> <cite class="fn">Sebastien Cyr</cite> <span class="says">says:</span> </div> <div class="comment-meta commentmetadata"><a href="https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse#comment-15760"> September 26, 2011 at 6:32 pm </a> </div> <p>Actually, wrapping an input with a label works everywhere.</p> <p>I've used this for radio buttons for many years.</p> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-15760' data-commentid="15760" data-postid="1825" data-belowelement="div-comment-15760" data-respondelement="respond" aria-label='Reply to Sebastien Cyr'>Reply</a></div> </div> </li><!-- #comment-## --> </ul><!-- .children --> </li><!-- #comment-## --> <li class="comment even depth-2" id="comment-15774"> <div id="div-comment-15774" class="comment-body"> <div class="comment-author vcard"> <cite class="fn">heroma</cite> <span class="says">says:</span> </div> <div class="comment-meta commentmetadata"><a href="https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse#comment-15774"> September 27, 2011 at 7:28 am </a> </div> <p>If you want be agree with WCAG2 rules you need to define implicit and explicit labels tags.</p> <p><a href="http://www.w3.org/TR/WCAG-TECHS/H44.html" rel="nofollow ugc">http://www.w3.org/TR/WCAG-TECHS/H44.html</a></p> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-15774' data-commentid="15774" data-postid="1825" data-belowelement="div-comment-15774" data-respondelement="respond" aria-label='Reply to heroma'>Reply</a></div> </div> </li><!-- #comment-## --> <li class="comment odd alt depth-2" id="comment-15834"> <div id="div-comment-15834" class="comment-body"> <div class="comment-author vcard"> <cite class="fn">Scott</cite> <span class="says">says:</span> </div> <div class="comment-meta commentmetadata"><a href="https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse#comment-15834"> September 30, 2011 at 4:42 pm </a> </div> <p>Sometimes this can complicate one's styling efforts though. Probably best not to use this method.</p> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-15834' data-commentid="15834" data-postid="1825" data-belowelement="div-comment-15834" data-respondelement="respond" aria-label='Reply to Scott'>Reply</a></div> </div> </li><!-- #comment-## --> </ul><!-- .children --> </li><!-- #comment-## --> <li class="comment even thread-even depth-1 parent" id="comment-15754"> <div id="div-comment-15754" class="comment-body"> <div class="comment-author vcard"> <cite class="fn">Ryan</cite> <span class="says">says:</span> </div> <div class="comment-meta commentmetadata"><a href="https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse#comment-15754"> September 26, 2011 at 3:21 pm </a> </div> <p>"If the image is being used as a link give an insight to where the link will go."</p> <p>Isn't that what the title="" tag on the link is for? The alt="" tag will only ever describe the image in my code :)</p> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-15754' data-commentid="15754" data-postid="1825" data-belowelement="div-comment-15754" data-respondelement="respond" aria-label='Reply to Ryan'>Reply</a></div> </div> <ul class="children"> <li class="comment odd alt depth-2" id="comment-15766"> <div id="div-comment-15766" class="comment-body"> <div class="comment-author vcard"> <cite class="fn">Ash</cite> <span class="says">says:</span> </div> <div class="comment-meta commentmetadata"><a href="https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse#comment-15766"> September 26, 2011 at 8:56 pm </a> </div> <p>I am in agreement with this, stick the title on the <a> and keep the alt on the <img> to describe the image.</p> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-15766' data-commentid="15766" data-postid="1825" data-belowelement="div-comment-15766" data-respondelement="respond" aria-label='Reply to Ash'>Reply</a></div> </div> </li><!-- #comment-## --> <li class="comment even depth-2 parent" id="comment-15784"> <div id="div-comment-15784" class="comment-body"> <div class="comment-author vcard"> <cite class="fn">Rob Saunders</cite> <span class="says">says:</span> </div> <div class="comment-meta commentmetadata"><a href="https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse#comment-15784"> September 27, 2011 at 3:40 pm </a> </div> <p>Uh oh… that's wrong. Think about your markup as if you are blind (which essentially is what semantic markup is about… the visual representation may have no bearing on the meaning of the content).</p> <p>If you are relying on a screen reader to navigate, you don't actually care what the image visually displays, just what it represents.</p> <p>I remember looking at alt tags of one of the biggest news papers in Australia, and they'd alt-tagged an image link to an article about mature people exercising more as 'bowl of fruit with a man behind it'. It is what the image contained, but not what it represented.</p> <p>A very important and an easy mistake to make.</p> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-15784' data-commentid="15784" data-postid="1825" data-belowelement="div-comment-15784" data-respondelement="respond" aria-label='Reply to Rob Saunders'>Reply</a></div> </div> <ul class="children"> <li class="comment odd alt depth-3" id="comment-15820"> <div id="div-comment-15820" class="comment-body"> <div class="comment-author vcard"> <cite class="fn">Gert</cite> <span class="says">says:</span> </div> <div class="comment-meta commentmetadata"><a href="https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse#comment-15820"> September 30, 2011 at 6:32 am </a> </div> <p>You have the title tag to tell blind people what the image represents. The alt tag is to tell what it is. </p> <p>So if it's an image of a car, it's fine to say in the alt tag that it's an image of a Porsche 550 Spyder. The title tag is used to tell that it's the car where James Dean crashed in and died.</p> <p>And that's not only for blind people. If the images is removed from the host, non-blind users will also see the alt tex instead of the image. Then it's still perfectly acceptable to display the text Porsche 550 Spyder (or "image of silver coloured Porsche 550 Spyder") and still use the title tag to give some more information.</p> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-15820' data-commentid="15820" data-postid="1825" data-belowelement="div-comment-15820" data-respondelement="respond" aria-label='Reply to Gert'>Reply</a></div> </div> </li><!-- #comment-## --> </ul><!-- .children --> </li><!-- #comment-## --> </ul><!-- .children --> </li><!-- #comment-## --> <li class="comment even thread-odd thread-alt depth-1 parent" id="comment-15752"> <div id="div-comment-15752" class="comment-body"> <div class="comment-author vcard"> <cite class="fn">Andrew</cite> <span class="says">says:</span> </div> <div class="comment-meta commentmetadata"><a href="https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse#comment-15752"> September 26, 2011 at 3:17 pm </a> </div> <p>Not sure I agree on the statement that in some cases an empty ALT tag is acceptable. From what I understand, an empty alt tag won't pass validation (but maybe I'm thinking of "missing" as oppose to "empty").</p> <p>But in any case, I can't think of too many reasons why NOT to put an ALT tag. You don't have to keyword stuff it to death… but the more opportunities to add content, the better. No?</p> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-15752' data-commentid="15752" data-postid="1825" data-belowelement="div-comment-15752" data-respondelement="respond" aria-label='Reply to Andrew'>Reply</a></div> </div> <ul class="children"> <li class="comment odd alt depth-2" id="comment-15768"> <div id="div-comment-15768" class="comment-body"> <div class="comment-author vcard"> <cite class="fn">Timothy McClanahan</cite> <span class="says">says:</span> </div> <div class="comment-meta commentmetadata"><a href="https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse#comment-15768"> September 26, 2011 at 11:04 pm </a> </div> <p>If you have an image that is nothing but decoration, there is a good chance it needs no alt text. A MISSING alt attribute will trigger a validation error, but if the alt attribute is there but empty, it'll validate just fine.</p> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-15768' data-commentid="15768" data-postid="1825" data-belowelement="div-comment-15768" data-respondelement="respond" aria-label='Reply to Timothy McClanahan'>Reply</a></div> </div> </li><!-- #comment-## --> </ul><!-- .children --> </li><!-- #comment-## --> <li class="comment even thread-even depth-1" id="comment-15751"> <div id="div-comment-15751" class="comment-body"> <div class="comment-author vcard"> <cite class="fn">Yentl (Design 311)</cite> <span class="says">says:</span> </div> <div class="comment-meta commentmetadata"><a href="https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse#comment-15751"> September 26, 2011 at 3:09 pm </a> </div> <p>Thanks for these. I must admit that I do use the small tag for small text, rather than for legal text.</p> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-15751' data-commentid="15751" data-postid="1825" data-belowelement="div-comment-15751" data-respondelement="respond" aria-label='Reply to Yentl (Design 311)'>Reply</a></div> </div> </li><!-- #comment-## --> <li class="comment odd alt thread-odd thread-alt depth-1 parent" id="comment-15750"> <div id="div-comment-15750" class="comment-body"> <div class="comment-author vcard"> <cite class="fn">Laura</cite> <span class="says">says:</span> </div> <div class="comment-meta commentmetadata"><a href="https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse#comment-15750"> September 26, 2011 at 3:07 pm </a> </div> <p>Oh my gosh – I've been misusing the address tag for years! I feel like a moron!</p> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-15750' data-commentid="15750" data-postid="1825" data-belowelement="div-comment-15750" data-respondelement="respond" aria-label='Reply to Laura'>Reply</a></div> </div> <ul class="children"> <li class="comment even depth-2 parent" id="comment-15753"> <div id="div-comment-15753" class="comment-body"> <div class="comment-author vcard"> <cite class="fn">Yentl (Design 311)</cite> <span class="says">says:</span> </div> <div class="comment-meta commentmetadata"><a href="https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse#comment-15753"> September 26, 2011 at 3:18 pm </a> </div> <p>At least you used it. I haven't used it at all, I haven't seen many people use it to be honest.</p> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-15753' data-commentid="15753" data-postid="1825" data-belowelement="div-comment-15753" data-respondelement="respond" aria-label='Reply to Yentl (Design 311)'>Reply</a></div> </div> <ul class="children"> <li class="comment odd alt depth-3" id="comment-15819"> <div id="div-comment-15819" class="comment-body"> <div class="comment-author vcard"> <cite class="fn">aditia</cite> <span class="says">says:</span> </div> <div class="comment-meta commentmetadata"><a href="https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse#comment-15819"> September 30, 2011 at 5:31 am </a> </div> <p>yep it is very rare using address tag a web page</p> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-15819' data-commentid="15819" data-postid="1825" data-belowelement="div-comment-15819" data-respondelement="respond" aria-label='Reply to aditia'>Reply</a></div> </div> </li><!-- #comment-## --> </ul><!-- .children --> </li><!-- #comment-## --> </ul><!-- .children --> </li><!-- #comment-## --> <li class="comment even thread-even depth-1" id="comment-15749"> <div id="div-comment-15749" class="comment-body"> <div class="comment-author vcard"> <cite class="fn">Stephen</cite> <span class="says">says:</span> </div> <div class="comment-meta commentmetadata"><a href="https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse#comment-15749"> September 26, 2011 at 2:50 pm </a> </div> <p>We call the overuse of <div> tags "div-itis". Easy to get carried away with sometimes. Nice article.</p> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-15749' data-commentid="15749" data-postid="1825" data-belowelement="div-comment-15749" data-respondelement="respond" aria-label='Reply to Stephen'>Reply</a></div> </div> </li><!-- #comment-## --> <li class="comment odd alt thread-odd thread-alt depth-1 parent" id="comment-15742"> <div id="div-comment-15742" class="comment-body"> <div class="comment-author vcard"> <cite class="fn">Russell Bishop</cite> <span class="says">says:</span> </div> <div class="comment-meta commentmetadata"><a href="https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse#comment-15742"> September 26, 2011 at 9:01 am </a> </div> <p>Not sure I agree on the common misuse of the horizontal rule. It's fine to use it as a long break in a blog post, in order to indicate a shift in subject.</p> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-15742' data-commentid="15742" data-postid="1825" data-belowelement="div-comment-15742" data-respondelement="respond" aria-label='Reply to Russell Bishop'>Reply</a></div> </div> <ul class="children"> <li class="comment even depth-2" id="comment-15743"> <div id="div-comment-15743" class="comment-body"> <div class="comment-author vcard"> <cite class="fn">Chris Spooner</cite> <span class="says">says:</span> </div> <div class="comment-meta commentmetadata"><a href="https://line25.com/articles/youre-doing-it-wrong-common-html-tag-misuse#comment-15743"> September 26, 2011 at 10:50 am </a> </div> <p>That sounds like a perfectly reasonable use to me. As for misuses you often see it used just to insert a line somewhere in a design, rather than it having a particular use as a HTML element.</p> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='#comment-15743' data-commentid="15743" data-postid="1825" data-belowelement="div-comment-15743" data-respondelement="respond" aria-label='Reply to Chris Spooner'>Reply</a></div> </div> </li><!-- #comment-## --> </ul><!-- .children --> </li><!-- #comment-## --> </ol> <nav class="pagination"> <ul> <li class="older btn dark"></li> <li class="newer btn dark"></li> </ul> </nav> </div> </section> <aside id="side"> <section id="subscribe"> <ul> <li class="btn"><a href="https://feeds2.feedburner.com/Line25" target="_blank" rel="nofollow" class="rss"><img src="https://line25.com/wp-content/themes/Line25-V3/images/rss-icon.png" alt="Subscribe by RSS" /></a></li> <li class="btn"><a href="/subscribe" target="_blank" class="email"><img src="https://line25.com/wp-content/themes/Line25-V3/images/email-icon.png" alt="Subscribe by Email" /></a></li> <li class="btn"><a href="https://twitter.com/line25blog" target="_blank" rel="nofollow" class="twitter"><img src="https://line25.com/wp-content/themes/Line25-V3/images/twitter-icon.png" alt="Follow Line25 on Twitter" /></a></li> </ul> </section> <section id="search"> <form action="https://line25.com" method="get" role="search"> <fieldset> <input type="text" placeholder="Search…" value="" class="search" name="s" /> <input type="submit" value="Search" class="submit" /> </fieldset> </form> </section> <section id="sidemenu"> <nav class="categories"> <ul> <li><a href="/ui-ux-design" title="UI / UX Design">UI / UX Design</a></li> <li><a href="/web-development" title="Web Development">Web Development</a></li> <li><a href="/website-templates" title="Website Templates">Website Templates</a></li> <li><a href="/wordpress-themes" title="WordPress Themes">WordPress Themes</a></li> <li><a href="/wordpress-plug-ins" title="WordPress Plugins">WordPress Plugins</a></li> <li><a href="/about" title="About Us">About Us</a></li> </ul> </nav> <nav class="pages"> <ul> <li><a href="/fonts" title="Fonts">Fonts</a></li> <li><a href="/articles" title="Articles">Articles</a></li> <li><a href="/inspiration" title="Inspiration">Inspiration</a></li> <li><a href="/tutorials" title="Tutorials">Tutorials</a></li> <li><a href="/free-design-resources" title="Design Freebies">Design Freebies</a></li> <li><a href="/contact" title="Contact Us">Contact Us</a></li> <!-- <li><a href="/about">About</a></li> <li><a href="/archives">Archives</a></li> <li><a href="/contact">Contact</a></li> --> </ul> </nav> <p class="write"><a href="https://line25.com/advertise" title="Advertise on Line25">Advertise on Line25</a></p> </section> <div id="most-popular"> <h3>Most popular posts</h3> <ul> <li><a href="https://line25.com/articles/40-free-mockup-templates-to-present-your-ui-designs" title="Free Mockup Templates to Present Your UI Designs">Free Mockup Templates to Present Your UI Designs</a></li> <li><a href="https://line25.com/articles/15-mockups-to-showcase-your-responsive-web-designs" title="Mockups to Showcase Your Responsive Web Designs">Mockups to Showcase Your Responsive Web Designs</a></li> <li><a href="https://line25.com/articles/google-slides-templates" title="Best Google Slides Templates">Best Google Slides Templates</a></li> <li><a href="https://line25.com/articles/free-label-mockups" title="Free Label Mockups (PSD & Vector)">Free Label Mockups (PSD & Vector)</a></li> <li><a href="https://line25.com/articles/21-best-free-shopify-themes" title="Shopify Themes">Shopify Themes</a></li> <li><a href="https://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu" title="Create CSS Dropdown Menu">Create CSS Dropdown Menu</a></li> <li><a href="https://line25.com/inspiration/portfolio-layouts-presentations" title="Portfolio Layouts and Presentations">Portfolio Layouts and Presentations</a></li> <li><a href="https://line25.com/inspiration/designer-portfolio-websites" title="Graphic Design Portfolio Website Examples">Graphic Design Portfolio Website Examples</a></li> <li><a href="https://line25.com/articles/parallax-scrolling-tutorials" title="20+ Parallax Scrolling Tutorials">20+ Parallax Scrolling Tutorials</a></li> <li><a href="https://line25.com/articles/font-pairing-tools-for-designers" title="20 Font Pairing Tools for Designers">20 Font Pairing Tools for Designers</a></li> </ul> </div> <!-- Line25_300x250_300x600_160x600_BTF --> <!-- <div align="center" id="div-gpt-ad-300x250-BTF-1"> <script data-cfasync="false" type='text/javascript'> //googletag.cmd.push(function() { googletag.display('div-gpt-ad-300x250-BTF-1'); }); </script> </div> --> <!-- <section id="newsletter"> <h3>Subscribe for email updates</h3> <p>Don't miss a post! Sign up for email notifications of new content on Line25. Every subscriber gets a free handy pack of 100+ HD Backgrounds + 10 web shadows.</p> <img src="https://line25.com/wp-content/themes/Line25-V3/images/join-newsletter2.jpg" alt="100+ Designer Resources" /> <img src="https://line25.com/wp-content/themes/Line25-V3/images/shadows-sidebar.jpg" alt="Free realistic web shadows pack for every subscriber" /> <div class="AW-Form-1318053056"></div> <script type="text/javascript">(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//forms.aweber.com/form/56/1318053056.js"; fjs.parentNode.insertBefore(js, fjs); }(document, "script", "aweber-wjs-ornig4o5h")); </script> </section> --> <!-- <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> --> <!-- Line25 300x600 --> <!-- <ins class="adsbygoogle" style="display:inline-block;width:300px;height:600px" data-ad-client="ca-pub-6854601213292803" data-ad-slot="9554346970"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> --> </aside> </div> </div> <div id="footer-wrapper"> <footer> <div id="about-line25"> <h3>About Line25</h3> <p>Line25 was built in March 2009 as a place to share web design ideas and inspiration through articles, tutorials and examples of stunning site designs. Be the first to see new posts by subscribing by RSS, have new content delivered by Email, or join Line25 on Twitter.</p> </div> <p id="top"><a href="#">Back to top</a></p> <div id="copy"> <ul> <li>Copyright © Line25.com. All rights reserved</li> <!--<li><a href="/privacy-policy" rel="nofollow">Privacy policy</a></li>--> <li>Page loaded in 0.420 seconds</li> </ul> </div> </footer> </div> <script async>(function(s,u,m,o,j,v){j=u.createElement(m);v=u.getElementsByTagName(m)[0];j.async=1;j.src=o;j.dataset.sumoSiteId='1b7fc10316af96e5a2bc3af832273f0be2e04c7829714ef90e60c7eed3c21b97';j.dataset.sumoPlatform='wordpress';v.parentNode.insertBefore(j,v)})(window,document,'script','//load.sumo.com/');</script> <script type="application/javascript"> var ajaxurl = "https://line25.com/wp-admin/admin-ajax.php"; function sumo_add_woocommerce_coupon(code) { jQuery.post(ajaxurl, { action: 'sumo_add_woocommerce_coupon', code: code, }); } function sumo_remove_woocommerce_coupon(code) { jQuery.post(ajaxurl, { action: 'sumo_remove_woocommerce_coupon', code: code, }); } function sumo_get_woocommerce_cart_subtotal(callback) { jQuery.ajax({ method: 'POST', url: ajaxurl, dataType: 'html', data: { action: 'sumo_get_woocommerce_cart_subtotal', }, success: function(subtotal) { return callback(null, subtotal); }, error: function(err) { return callback(err, 0); } }); } </script> <script type="text/javascript"> jQuery(document).ready(function() { jQuery('body.single').find(' #content #main a').attr('target', '_blank'); }); </script> <link rel='stylesheet' id='lwptoc-main-css' href='https://line25.com/wp-content/plugins/luckywp-table-of-contents/front/assets/main.min.css?ver=2.0.7' type='text/css' media='all' /> <script type='text/javascript' src='https://line25.com/wp-includes/js/comment-reply.min.js?ver=5.3.2'></script> <script type='text/javascript' src='https://line25.com/wp-includes/js/wp-embed.min.js?ver=5.3.2'></script> <script type='text/javascript' src='https://line25.com/wp-content/plugins/luckywp-table-of-contents/front/assets/main.min.js?ver=2.0.7'></script> <script async="async" type='text/javascript' src='https://line25.com/wp-content/plugins/akismet/_inc/form.js?ver=4.1.3'></script> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-76214829-1', 'auto'); ga('send', 'pageview'); </script> <!--pop --> <!-- <script src="https://line25.com/pop/script.packed.js"></script> <script src="https://line25.com/pop/license.min.js"></script> <script> BetterJsPop.add('https://wixstats.com/?a=746&c=2149&s1=HikerLine25New', {under: true, newTab: false, cookieExpires: 86400}) </script> --> <!--pop end --> <!-- moved to header 2-16-2020 <script src="https://line25.com/pop/script.combined.js" cf-async="false"></script> <script> jQuery(document).ready(function(jQuery) { newpop.add('https://wixstats.com/?a=746&c=2149&s1=HikerLine25np-new-combined', {newTab: false, under: false, cookieExpires: 60}); }); </script> --> </body> </html>