<html>
<head>
<title> <title>
</head>
<body>
</body>
</html>
<p>Paragraph text goes here</p>
HTML has six different kinds of headings to structure text on a page. h1 tags are for top level items, like the title of a page. You only want to use this once per page.h2-h6 headings describe a different level of content. You can use these as much and as often as you like, but they should follow in order, that is, h3 will come under h2, and h2 will come under h1. your screen reader identifies each level as living under the one above it, so it's important to keep these structured.
<h1>This is a top level heading</h1>
<h2>This is a heading level 2</h2>
<h3>This is a heading level 3</h3>
<h4>This is a heading level 4</h4>
<h5>This is a heading level 5</h5>
<h6>This is a heading level 6</h6>
This identifies a list item, or one element of a list.
<li>Corn</li>
this element identifies that an unordered list is going to follow. A list is made up of any number of items.
<ul>
<li>Corn</li>
<li>Tomatoes</li>
<li>Beans</li>
<li>Onions</li>
<li>Garlic</li>
</ul>
this element identifies that an ordered list is going to follow. this type of list will automatically add an ascending number to each element in the list
<ol>
<li>Add corn</li>
<li>Dice and add tomatoes</li>
<li>Add beans</li>
<li>Chop and sautee onions</li>
<li>Mince and add garlic</li>
</ol>
<a href="https://www.google.com">Google</a>
Strong and emphasis identify a selection of text that has a strong importance you can change your JAWS settings to read these differently.
<em>Very Important</em>
<strong>Important</strong>
You can leave notes for yourself in HTML that the browser will ignore, and won't be rendered on the page
<!-- This comment is hidden from the browser -->
Defines sound content <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> </audio>
the br tag defines a single line break and has no closing tag
<br>
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 tags define a client-side script. You can use these to add javascript right in your html file.
<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>
Semantic Elements give meaning to the document. Below are some common examples:
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>
Defines different sections on a site.
<section> <h1>WWF<</h1> <p>The World Wide Fund for Nature (WWF) is....</p> </section>
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:
<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>
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 Volpe</p> <p>Contact information: <a href="mailto:claire@example.com">claire@example.com</a>.</p> </footer>