Video: Semantic Web (Bulgarian) - Nikolay Kostov's Blog

Topics covered:

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

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

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

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

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

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

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>

<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, …)

<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

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)?
- Use Modernizr or HTML5shiv

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
- Web Content Accessibility Guidelines (WCAG) - http://www.w3.org/WAI/intro/wcag
- Section 508 - http://www.section508.gov
Tools
- Will never replace manual testing, but may help
- WAVE - http://wave.webaim.org/

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

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:
- Microdata and RDFa
  - Define new HTML attributes
    - More info: http://schema.org/docs/gs.html#microdata_how
- JSON-LD
  - Newest and simplest markup format
  - Embed a block of JSON data inside a script tag
    - Specification: http://www.w3.org/TR/json-ld /
    - Examples: http://json-ld.org/playground /