Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Semantische Elemente

html
by

Simon Schipper

on 21 November 2016

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Semantische Elemente

Was sind semantische Elemente?
Beispiele für
nicht- semantische
Elemente:
HTML 5
Beispiele für
semantische
Elemente:
Semantische Elemente (Tags)
Beispiele der Veränderung HTML 4-->5
Warum semantische Elemente?
Neue semantische Elemente in HTML 5
Ein semantisches Element beschreibt klar seinen
Nutzen bzw. seine Bedeutung zum Browser
sowohl als auch zum Entwickler.
<form>
<table>
<article>
<div>
<span>
In HTML 4 benutzten Entwickler ihre eigenen id/ class Namen um ihre Elemente zu benennen.
z.B header, top, bottom, footer, menu, navigation, main, container, concent, article, sidebar, topnav etc.
Das hat es für Suchmaschinen unmöglich gemacht den richtigen Webseiten- Inhalt korrekt zu identifizieren.
Im neuen HTML 5 sind diese Elemente als <header>, <footer>, <nav>, <section>, <article> etc. definiert, was das ganze viel einfacher und unkomplizierter macht.
<article>
Definiert einen Artikel
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
Definiert Inhalt abgesehen vom Webseiteninhalt
Definiert additionale Details (unsichtbar)
Definiert einen Titel für ein <figure>- Tag
Präzisiert unabhängigen Inhalt, wie Fotos, Dias usw.
Definiert eine Fußzeile für ein Dokument o. Bereich
Definiert eine Kopfzeile für ein Dokument o. Bereich
Präzisiert den Hauptinhalt eines Dokuments
Definiert markierten/ hervorgehobenen Text
Definiert navigations- Links
HTML 4 HTML 5
<div id="header">
<header>
<div id="menu">
<nav>
<div id="content">
<section>
<div class="article">
<article>
<div id="footer"
<footer>
Quellen
Gliederung
Veranschaulichung HTML 4/5
https://wiki.selfhtml.org/wiki/Startseite

https://developer.mozilla.org/de/docs/Web/HTML/HTML5/HTML5_element_list
http://www.w3schools.com/html/html5_semantic_elements.asp
https://homepages.thm.de/~hg8957/ibs/
https://www.w3.org/TR/html5-diff/
http://www.w3schools.com/html/html5_migration.asp
1. Was sind semantische Elemente?
3. Beispiele für
nicht
- semantische Elemente
2. Beispiele für semantische Elemente
4. Warum semantische Elemente?
5. HTML 5
6. Neue semantische Elemente in HTML 5
7. Beispiele der Veränderung HTML 4--->5
8. Veranschaulichung HTML 4/5
9. Quellen
Full transcript