Scribd
Upload
73 views

Common HTML 5 Tags: Defines A Comment

html tags for begginers

Uploaded by

satish
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
73 views

Common HTML 5 Tags: Defines A Comment

html tags for begginers

Uploaded by

satish
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

Common HTML 5 tags

<!--...--> Defines a comment


The comment tag is used to insert a comment in the source code. A comment will be
ignored by the browser. You can use comments to explain your code, which can help
you when you edit the source code at a later date.

Example of an HTML comment:


<!--This is an example of a comment. Comments are not displayed in the browser-->
<p>This is an example of a paragraph and will be displayed in the browser.</p>

<!DOCTYPE> Defines the document type


The <!DOCTYPE> declaration must be the very first thing in your HTML5 document,
before the <html> tag. This tag tells the browser which HTML specification the
document uses.
The doctype declaration is not an HTML tag; it instructs the web browser about the
version of the markup language the page is written in.
You must specify the doctype in all HTML documents, so that the browser knows
what type of document to expect.
The <!DOCTYPE> tag does not have an end tag and the <!DOCTYPE> declaration is
not case sensitive..

A common HTML 4 document An HTML5 document with the


with the doctype. doctype.
<!DOCTYPE HTML PUBLIC -//W3C// <!DOCTYPE HTML>
DTD HTML 4.01 Transitional//EN <html>
http://www.w3.org/TR/html4/loose.
dtd> <head>
<html> <meta http-equiv="Content-Type"
content="text/html; charset=UTF-8">
<head> <title>Untitled Document</title>
<meta http-equiv=Content-Type </head>
content=text/html; charset=UTF-8>
<body>
<title>Untitled Document</title>
</head> (Your content goes between the
body tags.)
<body> </body>
(Your content goes between the </html>
body tags.)
</body>
</html>

Introduction to Web Design 1 HTML Tags


<html> Defines an html document
The <html> tag tells the browser that this is an HTML document and is the outermost
element in HTML documents.

<head> Defines information about the document


The head element is a container for all the head elements. Elements inside <head>
can include scripts, instruct the browser where to find style sheets, provide meta
information, and more.

<head>
<meta http-equiv=Content-Type content=text/html; charset=UTF-8>
<title>Untitled Document</title>
</head>

<title> Defines the document title


This element defines the title of the document. It is listed within the head. You can
NOT have more then one <title> element in a document.
<head>
<meta http-equiv=Content-Type content=text/html; charset=UTF-8>
<title>Untitled Document</title>
</head>

<meta> Defines meta information


The <meta> element provides meta-information about your page, such as descriptions
and keywords for search engines and refresh rates. It always goes in the <head> section
of your document.

<body> Defines the body element


The <body> tag defines the document's body and contains all the contents of an
HTML document, such as text, hyperlinks, images, tables, lists, etc. For an example,
see <!doctype> above.

<header> Defines a header for a section or page


The <header> tag defines an introduction to the document and is new in HTML5.

<header>
<h1>Carl Nestor</h1>
<img src="_images/apples.jpg" alt="Masthead Image" width="940" height="198">
</header>

<aside> Defines content aside from the page content


The <aside> is new in HTML5 and this tag defines some content aside from the
content it is placed in.
The aside content should be related to the surrounding content. The <aside> content is
often used as a sidebar in an article.
Introduction to Web Design 2 HTML Tags
<nav> Defines navigation links
The <nav> tag defines a section of navigation and is new in HTML5.

<nav>
<li> <a href="http://www.carlnestor.com/web">Web Design</a></li>
<li> <a href="http://www.carlnestor.com/vc">Visual Communications</a></li>
<li> <a href="http://www.carlnestor.com/resources">Resources</a></li>
</nav>

<div> Defines a section in a document


The <div> tag defines a division or a section in an HTML document and is often used
to group block-elements to format them with styles. The div element is very often used
to style with CSS.
A section in a document that will display a sidebar:
<div id="mainContent">
<h3>This is a third level header</h3>
<p>This is a paragraph.</p>
</div>

<span> Defines a section in a document


The <span> tag is used to group inline-elements in a document and provides no visual
change by itself. Use the <span> tag to group inline-elements to format them with
styles. For example, text with a span element that is styled with CSS:
<p>My mother has <span style="color:#5CBEFF">light blue</span> eyes.</p>

h1> to <h6> Defines header 1 to header 6


The <h1> to <h6> tags define headers. <h1> defines the largest header. <h6> defines
the smallest header. There should only be one <h1> header on a page. (helps with
google.) but can be as many other "h" heads as needed.
The six different HTML headings:
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<h3>This is header 3</h3>
<h4>This is header 4</h4>
<h5>This is header 5</h5>
<h6>This is header 6</h6>

Introduction to Web Design 3 HTML Tags


<p> Defines a paragraph
The <p> tag defines a paragraph. The p element automatically creates some space
before and after itself. The space is automatically applied by the browser, or you can
specify it with CSS. You should not use the <p> element when other elements are more
appropriate.

<p>The p element automatically creates some space before and after itself. The space is
automatically applied by the browser, or you can specify it with CSS. You should not
use the p element when other elements are more appropriate. </p>

<em> Defines emphasized text


It will render the text in italics or oblique.

<strong> Defines strong text


It will render the text as bold type.

<br> Inserts a single line break


The <br> tag inserts a single line break. The <br> tag is an empty tag which
means that it has no end tag. Use the <br> tag to enter blank lines, not to separate
paragraphs.
A line break is marked up as follows:
This text contains<br />a line break.

<blockquote> Defines a long quotation


The <blockquote> tag defines a block of quotation that is taken from another source.
Browsers usually render the text from <blockquote> elements with paragraph breaks.
The blockquote element should only be used for quotes from another source. Tip: Use
the <q> element for shorter quotes that does not require paragraph breaks.

Attribute Value Description


cite URL URL of the quote, if it is taken from the web
An example of a blockquote:
<blockquote cite="http://dev.w3.org/html5/spec-author-view/#auto-toc-4">
This is a strict subset of the HTML5 specification that omits user-agent (UA) implementation
details. It is targeted toward Web authors and others who are not UA implementors and who
want a view of the HTML specification that focuses more precisely on details relevant to using
the HTML language to create Web documents and Web applications. Because this document
does not provide implementation conformance criteria, UA implementors should not rely on
it, but should instead refer to the full specification.
</blockquote>

Introduction to Web Design 4 HTML Tags


<ol> Defines an ordered list
<ul> Defines an unordered list
<li> Defines a list item
The <ol> tag defines the start of an ordered list. Use together with the <li> tag to define
list items.
<ol>
<h3>How to Make Hot Chocolate:</h3>
<li>Heat milk in saucepan, until hot.</li>
<li>Add cocoa and sugar to taste.</li>
<li>Pour into mug and enjoy.</li>
</ul>
The <ul> tag defines an unordered list. Use together with the <li> tag to define list
items.
<ul>
<h3>At each visit the sitter will:</h3>
<li>Exercise and play with your dog or cat</li>
<li>Feed pets following your instructions</li>
<li>Provide fresh water</li>
</ul>
Unordered lists are often used for navagation.
<ul>
<li><a href="WebDesign.html">Web Design I</a></li>
<li><a href="visualC.html">Principles of Visual Communication</a></li>
<li><a href="promoDesign.html">Promotion Design</a></li>
<li><a href="typography.html">Typography</a></li>
<li><a href="photoJ.html"> Photo Journalism</a></li>
<li><a href="visualStory.html">Visual Storytelling</a></li>
</ul>

<dl> Defines a definition list


<dt> Defines a definition term
<dd> Defines a definition description

The <dl> tag defines a definition list. The <dl> tag is used in conjunction with the <dl>
and <dd> tags. The <dt> defines the item in the list and the <dd>describes the item in
the list.

<dl>
<dt>Dr. Roger Snyder,</dt> <dd>President</ddt>
</dd><dt>Robert Brown, R.N.,BSN, MSN, </dt><dd>Vice President</dd>
<dt>Karen Smith, Ph.D, </dt> <dd>Secretary</dd>
<dt> James Jones,</dt> <dd> Treasurer</dd>
</dl>

Introduction to Web Design 5 HTML Tags


<footer> Defines a footer for a section or page
The <footer> tag is new in HTML5 and defines the footer of a section or document.
Typically contains the name of the author, the date the document was written and/or
contact information.
An example of a footer in a document:
<footer>

 Copyright 2011. CarlNestor. All rights reserved. Designed and built by <a href="http://
www.nestorwebdesign.com" >NestorWebDesign.com</a>
</footer>

<img> Defines an image


The <img> tag defines an image in an HTML page. Images are not technically inserted
into an HTML page but are linked to HTML pages. The <img> tag creates a holding
space for the referenced image.
<img src="apples.png" alt="Apples" />

Attribute Value Description


alt text Defines a short description of the image
src URL The URL of the image to display
height pixels Defines the height of an image
%
ismap ismap Defines the image as a server-side image map
usemap #mapname Defines the image as a client-side image map. Used together
with the <map> and <area> tags
width pixels Sets the width of an image
%

<link> Defines a resource reference


The <link> element goes only in the head section, but it can appear any number of
times. It defines the relationship between a document and an external resource and is
mostly used to link to style sheets. The link element is an empty element, it contains
attributes only.
An example <link> element linking to an external style sheet:
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

Introduction to Web Design 6 HTML Tags


<a> Defines a hyperlink
The <a> tag defines a hyperlink, which is used to link from one page to another. The
most important attribute of the a element is the href attribute, which indicates the
links destination.
Unless changed with CSS, by default, links will appear as follows in all browsers:
A
 n unvisited link is underlined and blue
A visited link is underlined and purple and
An active link is underlined and red
"target" is where to open the target URL
_blank - the target URL will open in a new window
_self - the target URL will open in the same frame as it was clicked
_parent - the target URL will open in the parent frameset
_top - the target URL will open in the full body of the window
An example of a link to carlnestor.com:
<a href="http://www.carlnestor.com.com" target="self " >Carl Nestor's Website</a>

<q> Defines a short quotation


The <q> tag defines the start of a short quotation. Browsers often insert quotation
marks around the quotation. Use the cite attribute to define a reference to where the
quotation was taken from. Use the blockquote element to mark up long quotations.

Attribute Value Description


cite url Defines a citation for the quotation

Mark up a short quotation:


<p>The goal of Carl Nestor's website
<q cite="http://www.carlnestor.com">is to help students with the resources they need.
</q>Check the website daily.</p>

Introduction to Web Design 7 HTML Tags


<style> Defines a style definition
The <style> tag is used to define style information for an HTML document. In the
style element you specify how HTML elements should render in a browser. To link to
an external style sheet, use the <link> tag.

Attribute Value Description


type text/css Defines the content-type
media screen The destination medium for the style information
tty
tv
projection
handheld
print
braille
aura
scoped scoped If present, the styles should ONLY apply to the style elements parent
element and its child elements. Note: If the scoped attribute is NOT
defined, the <style> element must be placed in the <head> section.
The scoped attribute is new in HTML5, which allows you to define
styles for a specified section of your document, instead of the entire
document.
If the "scoped" attribute is present, the styles only apply to the style
elements parent element and its child elements.
<html>
<head>
<style type="text/css"> h1 {color:red} p {color:blue}
</style>
</head>
<body>
</body>
</html>

Introduction to Web Design 8 HTML Tags


<video> Defines a video
The <video> tag defines video, such as a movie clip or other video streams and is
new in HTML5. Tip: You can write text between the start and end tags, to show older
browser that they do not support this tag.
<video src="movie.ogg" controls="controls">
your browser does not support the video tag
</video>

Attribute Value Description


audio muted Defining the default state of the the audio. Currently, only
"muted" is allowed
autoplay autoplay If present, then the video will start playing as soon as it is ready
autoplay
controls controls If present, controls will be displayed, such as a play button
controls
height pixels Sets the height of the video player
loop loop If present, the video will start over again, every time it is
finished
preload preload If present, the video will be loaded at page load, and ready to
preload run. Ignored if "autoplay" is present
src url The URL of the video to play
width pixels Sets the width of the video player

<audio> Defines sound content


The <audio> tag defines sound, such as music or other audio streams. The <audio> tag
as well as the attributes are new in HTML5. You can write text inside the start and end
audio tags, to show older browser that they do not support this tag.

Attribute Value Description

autoplay autoplay If present, the audio will start playing as soon as it is ready.

controls controls If present, controls will be displayed, such as a play button.

loop loop If present, the audio will start over again, every time it is finished.

preload auto Specifies if the audio should be loaded when the page loads. Ignored if
metadata autoplay is present.
none

src url Defines the URL of the audio to play

<audio src="horse.ogg" controls="controls">


Your browser does not support the audio element.
</audio>

Introduction to Web Design 9 HTML Tags


<embed> Defines external interactive content or plugin
The <embed> tag defines embedded content, such as a plug-in and is new in HTML5

Attribute Value Description


heightNew pixels Sets the height of the embedded content
srcNew url The URL of the embedded content
typeNew type Defines the type of the embedded content
widthNew pixels Sets the width of the embedded content
<embed src="carlnestor.swf " />

<wbr> Defines a possible line-break


The <wbr> tag defines where in a word it would be ok to add a line-break and is new
with HTML5. When a word is too long, or you are afraid that the browser will break
your lines at the wrong place, use the <wbr> element as a line-break opportunity.
A text with a line-break opportunity:
<p>
If you are using a long paragraph and e-mail is near the sentence
and you are afraid of breaking the line at e-mail, place a <wbr>
where you want a breakso it will less likely break at e-mail,<wbr>
as in this example.
</p>

<bdo> Defines the direction of text display


bdo stands for bidirectional override.
The <bdo> tag allows you to specify the text direction.

Attribute Value Description


dir ltr, rtl Defines the text direction. This attribute is required

Introduction to Web Design 10 HTML Tags

You might also like