New Elements

Semantic Elements

Semantic Elements give meaning to the document. Below are some common examples:

1. Navigation

The navigation region defines navigation links. This is a common semantic element that is used to organize and present all of the different pages on a site. It usually goes at the top of a web page and is consistent and present on all pages of the site.

  <nav role="navigation">
  <a href="about.html">About</a> 
  <a href="contact.html">Contact</a> 
  <a href="faq.html">Frequently Asked Questions</a> 
</nav>

2. Section

Defines different sections on a site.

  <section>
  <h1>WWF<</h1>
  <p>The World Wide Fund for Nature (WWF) is....</p>
  </section>

3. Article

The article tag defines an article. The <article> element specifies independent, self-contained content. An article should make sense on its own, and it should be possible to read it independently from the rest of the web site. Examples of where an <article> element can be used:

• Newspaper article
• Forum post
• Blog post

<article>
  <h1>What Does the World Wildlife Fund (WWF) Do?</h1>
  <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article>

4. Footer

Defines a footer for a document or section. The footer goes at the bottom of an html page and often contains authoring information and links that are secondary to the navigation.

<footer>
	<p>Posted by: Claire </p>
	<p>Contact information: 
	<a href="mailto:claire@example.com">claire@example.com</a>.</p>
</footer>

The button element defines a clickable button.

<button onclick="alert('button activated')">native HTML</button>

Images can be rendered using links to URL images, or image files. They do not need a closing tag and should always include an alt attribute.

<img src="smiley.gif" alt="Smiley face" height="42" width="42">

Forms define HTML forms for user input. Labels are used in forms to define a label for an input element. The input tag specifies an input field where the user can enter data. The input varies depending on the type attribute that it is given.

• The example below defines a radio button form that allows users to select their gender:

<form action="/action_page.php">
  <label for="male">Male</label>
  <input type="radio" name="gender" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="gender" id="female" value="female"><br>
  <label for="other">Other
  <input type="radio" name="gender" id="other" value="other"><br><br>
  <input type="submit" value="Submit">
</form>

• The example below defines a text field form that allows users to type their first and last names.

<form action="/action_page.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit">
</form>

a dropdown list allows users to select from options in a drop-down focusable list

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

The <table> tag defines an HTML table. An HTML table consists of the <table> tag and one or more <tr>, <th>, and <td> tags. The <tr> element defines a table row, the <th> element defines a table header, and the <td> element defines a table cell.

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

The span tags are used to group inline-elements in a document and provides a way to add a hook to a part of a text or a part of a document.

<p>My mother has <span style="color:blue">blue</span> eyes.</p>

The div tag defines a division or a section in an HTML document. The div tag is used to group block-elements to format them with CSS.

<div style="color:#0000FF">
  <h3>This is a heading
  <p>This is a paragraph.

</div>

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
</pre>

Style tags define the style information for a document and allow you to add CSS changes right in your html file.

<html>
<head>
<title>my cool page</title>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>