Tutorial 2 – Using HTML5 Tags
This lesson is part of a series introducing topics for web development. In this tutorial, we will continue our journey into coding by exploring additional HTML5 tags using Notepad on Windows.
HTML5 Tags
Below are some commonly used HTML5 tags used in creating a web page:
DOCTYPE Declaration
<!DOCTYPE html> defines the document type and version of HTML.
HTML Tag
<html> is the root element of an HTML document.
Head Tag
<head> contains meta-information about the HTML document, such as its title and links to CSS stylesheets.
Title Tag
<title> sets the title of the webpage, displayed in the browser’s title bar or tab.
Style Tag
<style> contains CSS to style the HTML content.
Body Tag
<body> contains the content of the HTML document.
Div and Span Tags
<div> defines a division or a section in an HTML document, while <span> is used to group inline elements. The <div> tag is a block-level element, and the <span> tag is an inline element.
<div>This is a division</div> <span>This is a span</span>
Heading Tags
<h1> to <h6> are used to define HTML headings. <h1> is the most important heading, and <h6> is the least important.
<h1>This is a heading</h1> <h2>This is a sub-heading</h2>
Paragraph Tag
<p> defines a paragraph of text.
<p>This is a paragraph.</p>
Anchor Tag
<a> defines a hyperlink, which is a link to another webpage or a resource.
<a href="https://example.com">This is a link</a>
Image Tag
<img> embeds an image in the document. The src attribute specifies the path to the image, and the alt attribute provides alternative text for the image.
<img src="https://via.placeholder.com/150" alt="Placeholder Image">
List Tags
<ul> defines an unordered list and <ol> defines an ordered list. Each item in the list is defined with the <li> tag.
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
Table Tags
<table> defines a table. A table is divided into rows (<tr>), and each row is divided into header cells (<th>) or data cells (<td>).
<table>
<tr>
<th>Header</th>
</tr>
<tr>
<td>Data</td>
</tr>
</table>
Form Tags
<form> defines an HTML form for user input. The <label> tag defines a label for an <input> element, and the <input> tag is used to create various types of input fields. The <br> tag inserts a line break.
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br>
<input type="submit" value="Submit">
</form>
Semantic Tags
Semantic tags clearly define their content, making the structure of the web page more understandable. Examples include <header>, <nav>, <section>, and <footer>.
<header>Header content</header> <nav>Navigation links</nav> <section>Section content</section> <footer>Footer content</footer>
Multimedia Tags
<audio> and <video> tags are used to embed audio and video content respectively. The <source> tag specifies the media file and its type.
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<video controls width="250">
<source src="video.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
Blockquote and Cite Tags
<blockquote> is used for longer quotes, while <cite> is used to reference the source of the quote.
<blockquote>This is a blockquote.</blockquote> <cite>This is a citation.</cite>
Strong Tag
<strong> is used to define text with strong importance, typically displayed in bold.
<strong>This text is important.</strong>
Code Tag
<code> is used to define inline code snippets.
<code>This is inline code</code>
Preformatted Text Tag
<pre> is used to display preformatted text, preserving whitespace and line breaks.
<pre>
<code>
function helloWorld() {
console.log('Hello, world!');
}
</code>
</pre>
Creating an HTML Document with Explanations
Let’s create an HTML document that incorporates these tags with explanations. Follow these steps:
Open Notepad
- Press the
Windowskey. - Type
Notepadand pressEnter.
Write Your HTML Code
<!DOCTYPE html>
<html>
<head>
<title>My Enhanced Web Page</title>
</head>
<body>
<header>
<h1>Welcome to My Web Page</h1>
<nav>
<ul>
<li><a href="#about">About Me</a></li>
<li><a href="#hobbies">My Hobbies</a></li>
<li><a href="#contact">Contact Me</a></li>
</ul>
</nav>
</header>
<section id="about">
<h2>About Me</h2>
<p>I am learning HTML to create amazing websites!</p>
<img src="https://via.placeholder.com/150" alt="Placeholder Image">
<blockquote>This is an inspiring quote that I like.</blockquote>
<cite>Author of the quote</cite>
</section>
<section id="hobbies">
<h3>My Hobbies</h3>
<ul>
<li>Coding</li>
<li>Reading</li>
<li>Traveling</li>
</ul>
<h4>Favorite Coding Languages</h4>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<span>These are some of the languages I enjoy working with.</span>
<pre>
<code>
function helloWorld() {
console.log('Hello, world!');
}
</code>
</pre>
<strong>Coding is fun and powerful!</strong>
</section>
<section id="contact">
<h3>Contact Me</h3>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br>
<input type="submit" value="Submit">
</form>
</section>
<section id="multimedia">
<h3>Multimedia Content</h3>
<h4>Audio Example</h4>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<h4>Video Example</h4>
<video controls width="250">
<source src="video.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
</section>
<footer>
<p>Thank you for visiting!</p>
</footer>
</body>
</html>
Save Your HTML File
- Click on
Filein the menu bar. - Select
Save As.... - In the
Save as typedropdown, selectAll Files. - Name your file
index.htmland clickSave.
View Your Web Page
- Navigate to the location where you saved your file.
- Double-click on
index.html.
Congratulations! You have created an enhanced web page using additional HTML5 tags with explanations.
