Topics covered:

  • Web Page
    • HTML, CSS and JavaScript
  • The Semantic HTML
  • HTML5 Semantic Tags
  • Other Semantics
  • Accessibility
  • Search Engine Optimization
  • Structured Data Markup

Video (in Bulgarian)

Presentation Content

The Elements of a Web Page

  • A Web page consists of:
    • HTML markup
    • CSS rules
    • JavaScript code
      • JS libraries
    • Images
    • Other resources
      • Fonts, audio, video, Flash, Silverlight, etc…

The Elements of a Web Page: HTML Markup

  • The HTML is used to definethe content of a Web page
    • Not the layout
    • Not the decorations
  • HTML’s role is to present theinformation in a meaningful manner
    • Like a paper document
    • Define headers, paragraphs, textboxes, etc…
    • Not define size, color and/or positioning

The Elements of a Web Page: CSS Rules

  • Cascading Style Sheets ( CSS ) is the way to make a Web page look pretty
    • Define styling rules
      • Fonts, colors, positioning, etc.
    • Define the layout of the elements
    • Define the presentation
  • The CSS files are attached to a web page and the browser applies these styles to elements

The Elements of a Web Page: JavaScript Code

  • JavaScript is the programminglanguage for the Web
    • Makes the Web pages dynamic
    • Dynamically adding / removingHTML elements, applying styles, etc.
    • Modern JavaScript UI libraries provide UI components like dialog boxes, grids, tabs, etc.
  • Like CSS the JavaScript files are attached to a web page

The Elements of a Web Page: Other Resources

  • Other resources are needed for a Web page to run properly
    • Images, fonts (glyph icons), audio, video files
    • Flash / Silverlight / ActiveX objects

Semantic HTML

  • Semantic HTML is:
    • The use of HTML markup to reinforce the semantics of the information in Web pages
      • Make the content understandable for computers
    • Rather than merely to define its presentation
    • A kind of metadata about the HTML content
  • Semantic HTML is processed by regular Web browsers and other user agents
    • CSS is used to suggest itspresentation to human users

Why Use Semantic HTML?

  • Semantic HTML is:
    • Easier to read by developers,parsers, bots, machines, AIs
    • A way to show the searchengines the correct content

How To Write Semantic HTML?

  • Just follow some guidelineswhen creating a Web site
    • Use HTML5 semantic tags
      • <header> , < nav > , <section> , <article> , <aside> , <footer>
    • Use Headings when you needto structure the content into sub-headings
      • In increasing order, staring with <h3>
    • Do not use empty tags
      • Like a clearing <div>

HTML5 Semantic Tags

  • HTML5 introduces semantic structure tags
    • Imagine the following site:
    • This is a common Web page structure
      • Used in 90% of the web sites
  • This can be created usingall kind of HTML elements
    • <div> , <span> , even <p>
    • Browsers will render invalid / wrong / pseudo valid HTML
  • The correct way: use the HTML 5 semantic tags:
    • <header> … </header>
    • <nav> … </nav>
    • <main> … </main>
    • <article> … </article>
    • <section> … </section>
    • <aside> … </aside>
    • <footer> … </footer>

HTML5 Structure Tags

  • <main>
    • Specifies the main content of a document (info)
    • There must not be more than one <main> element in a document
  • <header>
    • Site header or section header or article header
    • Could include navigation (<nav>)
  • <footer>
    • Site footer (sometime can be a section footer)
    • Providing author, copyright data, etc.
  • <nav>
    • Defines a set of navigation links.
    • E.g. site navigation (usually in the header)
  • <aside>
    • Content slightly related to primary content
    • E.g. sidebar (usually on the left or on the right)
  • <section>
    • Grouping of content usually with a heading, similar to chapters
    • Site section (e.g. news, comments, links, …)

HTML5 Content Tags

  • <article>
    • Independent content such as blog post or an article (e.g. news item)
  • <details> + <summary>
    • Specifies additional details that the user can view or hide on demand (accordion-like widget)
  • <time>
    • Specifies date / time (for a post / article / news)
  • <mark>
    • Defines marked/highlighted text
  • <figure>
    • Grouping stand-alone content (video or image)
    • Figure (a figure, e.g. inside an article)
  • <figcaption>
    • A caption of a figure (inside the <figure> tag)
  • <video> (info)
    • Video element (uses the built-in player)
  • <audio> (info)
    • A standard for playing audio files (built-in player)
  • <dialog>
    • Defines a dialog box or window
  • <meter> / <progress>
    • Defines a scalar measurement within a known range (a gauge) or task progress
  • <output>
    • Defines the result of a calculation
  • <wbr>
    • Defines a possible line-break

Other Semantics

  • Headings
    • Always use headings ( <h3 ><h6> ) when you need a heading or title
      • Like in a MS Word document
      • Google uses it to mark important content
  • Strong <strong> vs. Bold <b>
    • <b> does not mean anything
      • It just makes the text bolder
    • <strong> marks the text is " stronger " than the other, surrounding text
  • Emphasis <em> vs. Italic <i>
    • Emphasis does not always mean, that the code should be italic
      • It could be bolder, italic and underlined
    • The styles for the emphasis text should be set with CSS
      • Not by HTML
  • Old browsers (like IE6)?

Accessibility

  • Craft content minding disabled users
    • Blind - include text equivalents of images, use labels in forms
    • Colorblind - do not convey information using color only
    • Visually impaired - avoid small font sizes
    • Epileptic - avoid flashing content (3Hz or more)
    • Physical disabilities - avoid functionality that relies only on the mouse or keyboard
  • Why implement accessibility?
    • Some accessibility features are mandatory for government sites in some countries (US, NL, SW)
    • “Everyone gets visited by a very important blind user, named Google”
    • Some SEO and accessibility considerations overlap
  • Standards
  • Tools

Search Engine Optimization

  • Search engines use so-called “ crawlers ” to get the content of the page and index it
  • The crawlers weigh the data on the page
    • <title> , page URL and headings have great weight
    • Links from highly valued pages to your page increase its value (Google Page Rank )
    • Add alt text to images
    • Use relevant keywords in the content and <meta> tags
  • No SEO technique will replace good content

Structured Data Markup

  • A standard way to annotate your content so machines can understand it
  • Google (and other search engines) can
    • use that data to index your content better
    • present it more prominently in search results
    • Provide answers from the Knowledge Graph
  • Three alternative formats: