Before We Begin...

• This is for Beginners
• Little to no CSS
• We will focus on HTML5 only


What is HTML?

• HTML stands for Hyper Text Markup Language
• NOT a programming Language
• Used to create and present webpages / documents
• Building blocks of the Web


What We Need to Start?

• A web browser (Pick one)
◇ Google Chrome
◇ Mozilla Firefox
◇ Safari
◇ Edge
◇ IE (please don't)
• A text editor (Pick one)
◇ Sublime text
◇ Brackets
◇ Notepad++ (Windows)
◇ TextMate (Mac)


Creating an HTML File

• Does NOT need a server
• Files must be end with the .html extension
• Runs in a web browser (Chrome, Firefox etc.)
index.html is the root / home page of a website


Tag Syntax

• Elment names surrounded by angle brackets
• Normally come in pairs (start tag and end tag)
• End tag is usually the same but with a forward slash
• Some tags close themselves (Remnant of XHTML)

<!-- Tag Syntax -->

<!-- Examples -->
<h1>About Us</h1>
<p>This is a paragraph</p>

<br />  <!-- self enclosing tag (XTHML sytle) -->
<!-- or -->
<br> <!-- fine in HTML5 -->


HTML Page Structure

<!-- html page structure -->
<!DOCTYPE html>
<h1>My first Heading</h1>
<p>My first paragraph</p>


• Explains what type of document the page is
• HTML4, HTML5, XHTML etc.

<!-- HTML5 -->
<!DOCTYPE html>

<!-- HTML4.01 Strict -->

<!-- XHTML1.0 Strict -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Strict//EN" "">


Inline vs. Block Level Elements

Inline Elements

• Do not start on a new line
• Take only the necessary width
• Examples: <div>, <h1> - <h6>, <p>, <form>

Block Elements

• Start on a new line
• Take full width available
• Examples: <span>, <img>, <a>


Tag Attributes

• All tags can have attributes
• Provide information about an element
• Placed within the start tag
Key / value pairs (id="someid")

<!--Syntax: tag attributes -->
<tag_name attribute_name="attribute_value"">content</tag_name>

<!-- Example: tag attrbiutes -->
<h1 title="My company">About Us</h1>

• Use attribute target="_blank" to open a link in new tab

<!-- Link example-->
<a href="https://some/" target="_blank">Click</a>


HTML5 Semantic Tags

• A semantic element clearly describes its meaning to both the browser and the developer
• Put these witin the <body> tag

<!-- Structure: HTML5 Semantic Tags-->
<header></header> <!--Logo / social media links -->

</article> <!-- blog article -->
</article> <!-- blog article -->

<aside> <!-- sidebar content -->
<nav> <!-- Navigation items -->

<footer> <!-- copyright / privacy policy link -->

<!-- Other HTML5 Semantic Tags -->


• The blog.html contains examples of the HTML5 semantic tags. In addtion, it shows the use of <small> and <meta> tags


Meta Tags

• Used by search engine
• Found within the <head> tags

<!-- Meta tags -->
<meta name="description" content="Awesome blog by Traversy Media">
<meta name="keywords" content="web design blog, web dev blog, traversy media">


HTML Cheat Sheet

• The cheat sheet examples of the following elements:

Header<h1> to <h6>
Ordered List<li> <ol>
Unordered List<li> <ul>
Horizontal Rule<hr>
Citation<cite> italic style