PROWAREtech
Hyper-text Markup Language: Tutorial - Page 4
Special Tags: DIV and SPAN
The <div> tag is a block, meaning it puts a line break before and after it. It divides a document
into smaller discrete blocks of content, grouping other tag elements like a headline (<h1>), paragraphs
(<p>) and even other <div> elements. The <div> can be
turned into an HTML editor by setting the contenteditable attribute to true. For example:
The <span> tag is inline to a block of text.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Hello, World</title>
</head>
<body>
<div id="header">
<img alt="company logo" width=110 height=50 src="companylogo.gif" />
</div>
<div id="main">
<h1>Document Heading</h1>
<p><cite>Hello, World!!!</cite></p>
<p>This is inline <code>programming code</code>.
This is a <a href="http://www.google.com/">link to Google</a>.
</p>
<pre>
//this is a block of programming code
int x = 3 + 2 * 4; // comment</pre>
<ol>
<li>bullet 1</li>
<li>bullet 2</li>
<li>bullet 3</li>
</ol>
<blockquote>
this is a block quote
</blockquote>
</div>
<div id="footer">
<small>Copyright 2007 (this is small text)</small>
</div>
</body>
</html>
Document Heading
Hello, World!!!
This is inline
programming code. This is a link to Google.//this is a block of programming code int x = 3 + 2 * 4; // comment
- bullet 1
- bullet 2
- bullet 3
this is a block quoteCopyright 2007 (this is small text)
New HTML5 Tags
There are several new HTML5 specific tags.
The <header>, <footer> and <summary> tags are self-explanatory.
The <section> tag is a grouping of related content.
The <article> tag contains a complete composition, or an "article", so it, too, is self-explanatory.
The <main> tag is for the main content of the document and my contain several articles or none at all. There would typically be only one of these tags in a document.
The <aside> tag is to or toward the side of the main article.
The <nav> tag is used to contain navigation links.
The <figure> tag is used for an illustrative figure. An <img> tag can be used inside it and a <figcaption> is also used inside it which explains the photo or illustration.
The <time> tag flags a valid date or time in the document's text. It has two attributes: datetime and pubdate. For example: <time datetime="2014-01-01 17:00" pubdate>Jan 1st at 5:00 p.m.</time>. pubdate refers to the publication date of the article or document, if applicable.
The <mark> tag is used to highlight text.
