INTRODUCTION

02.02 HTML5 Tags and Syntax TO HTML

HTML5 Tags and Syntax!

My first big disappointment to you!

 INTRODUCTION
02.02 HTML5 Tags and Syntax TO HTML

HTML tags!

I cant teach you all of the tags!

!
I cant teach you all of the tags!
!
You dont want me to teach you all of the
tags!
!
 INTRODUCTION
02.02 HTML5 Tags and Syntax TO HTML

Finally, some tags!

Tags have a beginning and an end!

<h1>Hello World</h1>
Start tag Closing tag

<img src=x.gif />

Self-closing tag

Some tags have attributes (src, href, etc..)!

 INTRODUCTION
02.02 HTML5 Tags and Syntax TO HTML

Display!
One of the most important attributes of an element
is its display. The two most common are block and
inline!
!
block (can take width and height)!
Newline is inserted before and after, e.g. it Takes up whole
width!
inline (can not take width and height)!
Only uses as much space as needed to contain the element.!
 INTRODUCTION
02.02 HTML5 Tags and Syntax TO HTML

Common Tags!
Headings (block)!
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>!
These tags have syntax and semantics!
Paragraphs (block)!
<p> . </p> !
Should only contain inline elements!
Divs (block)!
<div>...</div>!
Generic section that is larger than a paragraph!
 INTRODUCTION
02.02 HTML5 Tags and Syntax TO HTML

More tags!
Ordered lists! Unordered lists!
!
<ol> ! <ul> !
<li> Item One </li>! <li> Item One </li>!
! !
<li> Item Two </li>! <li> Item Two </li>!
! !
</ol>! </ul>!
! !
!
Line breaks! !
!
<br>! !
!
 INTRODUCTION
02.02 HTML5 Tags and Syntax TO HTML

Attributes!
Attributes provide additional information !
about an element!
!
Always specified in the start tag!

Attributes come in name/value pairs!

 INTRODUCTION
02.02 HTML5 Tags and Syntax TO HTML

Images!
Images (inline)!
<img src = myPicture.jpg alt = Image of Colleen/>!
Images rarely work the first time!
Show a broken link, too big, too small, etc.!
Save yourself heartache and size/carefully name your
picture before you use it.!
 INTRODUCTION
02.02 HTML5 Tags and Syntax TO HTML

Images!
<img src=logo.jpg Image filename
Info for screen readers,
alt="company logo" broken links

title = "AAA1 LLC" Displays on hover

class = "thumbnail"/> Extra formatting (height,

width, position, etc.)
 INTRODUCTION
02.02 HTML5 Tags and Syntax TO HTML

More Attributes!
As you learn the tags, you learn their specific attributes.
Some apply to any tag!
class applies special properties to groups of elements!
id specifies a unique id to one element on the page!
style specifies a certain visual style (avoid this one!!!)!
accesskey a shortcut key to activate an element!
tabindex the order elements will come into focus
using the tab key.!
 INTRODUCTION
02.02 HTML5 Tags and Syntax TO HTML

Special Entities!

Tags always start with a bracket (<)!

What if you want the browser to display a
bracket, not start a tag?!
 INTRODUCTION
02.02 HTML5 Tags and Syntax TO HTML

Special Entities!
If you want. Then use
< &lt;
> &gt;
&copy;
blank space &nbsp;
&cent;
& &amp;
 INTRODUCTION
02.02 HTML5 Tags and Syntax TO HTML

Review!

How do you know the difference between

a tag and an attribute?!

What two symbols end a self-closing tag?!

 INTRODUCTION
02.02 HTML5 Tags and Syntax TO HTML

Acknowledgements/Contributions!
These slides are Copyright 2015- Colleen van Lent as part of http://
www.intro-webdesign.com/ and made available under a Creative
Commons Attribution-NonCommercial 4.0 License. Please maintain
this last slide in all copies of the document to comply with the
attribution requirements of the license. If you make a change, feel free
to add your name and organization to the list of contributors on this
page as you republish the materials.!
!
Initial Development: Colleen van Lent , University of Michigan School of
Information!
!