Semantic Markup

  • Semantic HTML or semantic markup is HTML that introduces meaning to the web page rather than just presentation. For example, a <p> tag indicates that the enclosed text is a paragraph. This is both semantic and presentational, because people know what paragraphs are and browsers know how to display them.
    On the flip side of this equation, tags like <b> and <i> are not semantic, because they define only how the text should look (bold or italic) and do not provide any additional meaning to the markup.
  • The benefit of writing semantic HTML stems from what should be the driving goal of any web page— the desire to communicate. That clarity is also communicated with search engines, ensuring that the right pages are delivered for the right queries.
  • Semantic HTML Tags:
  • <abbr> Abbreviation
    <acronym> Acronym
    <blockquote> Long quotation
    <dfn> Definition
    <address> Address for author(s) of the document
    <cite> Citation
    <code> Code reference
    <tt> Teletype text
    <div> Logical division
    <span> Generic inline style container
    <del> Deleted text
    <ins> Inserted text
    <em> Emphasis
    <strong> Strong emphasis
    <h1> First-level headline
    <h2> Second-level headline
    <h3> Third-level headline
    <h4> Fourth-level headline
    <h5> Fifth-level headline
    <h6> Sixth-level headline
    <hr> Thematic break
    <kbd> Text to be entered by the user
    <pre> Pre-formatted text
    <q> Short inline quotation
    <samp> Sample output
    <sub> Subscript
    <sup> Superscript
    <var> Variable or user defined text

  • Here's what they look like...