HTML5 Tutorial
Table of Contents
Introduction
HTML5 is the latest version of HTML (HyperText Markup Language).
HTML is a markup language, and it uses element tags to create HTML documents. Therefore, we can use to add contents (e. g. text, Lists, Images, and Videos) to our web pages.
Types of Tags
Some elements consist of opening and closing tags, and between it contains content, e. g. h1 tag:
<h1>Content HERE!</h1> The H1 is heading tag that usually displayed large and bold letters, heading tag have six more types of tags, which are h1, h2, h3, h4, h5, and h6, h1 is the larger and h6 is the smaller:
<h1>SAMPLE H1</h1>
<h2>SAMPLE H2</h2>
<h3>SAMPLE H3</h3>
<h4>SAMPLE H4</h4>
<h5>SAMPLE H5</h5>
<h6>SAMPLE H6</h6>Output:
The other tags are not required to have a closing tag which is also called “self-closing” tags, e. g. Image tag:
<img src="{path}/logo-1.png" />Output:
For further details, we are going to cover a lot of element tags with a description. For the above examples, I just described the different types of tags.
From HTML file to Web page
To create HTML file, just add .html or .htm extension when saving the file. to display the file in the browser, copy and paste the path of the file on browser’s search bar.
The tags will not display on the web page, only the content inside of the element’s opened and closed tags will be displayed.
The web browsers used browser engines to parse HTML files and convert them into HTML documents for the browser’s web page.
Let’s create a new HTML file then open it into the browser, to reflect with the sample image above:
- Create an HTML file name “home.html” and save it in your local directory.
- Open the home.html file to your text editor and copy and paste the code below:
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>LGeratech.com</title>
</head>
<body>
<header>
<h1>Welcome to LGeratech.com!</h1>
<p>Home page.</p>
</header>
<nav>
<ul>
<li><a href = "home.html">Home</a></li>
<li><a href = "profile.html">Profile</a></li>
</ul>
</nav>
<footer>
<p>Created on Novembe 2019, by <a href = "http://lgeratech.com/">LGeratech.com</a></p>
</footer>
</body>
</html> - 3. Then type your home.html file’s path into your browser’s search bar:
- e. g.
C:\Users\PC\Desktop\home.html
- And the output will look like the image below:
HTML documents
<!DOCTYPE html>DOCTYPE stands for document type, and it is not an HTML element, it is used to specify the standard and version of the HTML document on the browser. The <DOCTYPE html> is only used to create an HTML5 version of the web documents, see the following examples below for the other DOCTYPE of HTML document:
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">Tags and Descriptions
<html> Tag
<html>
...
</html>The <html> element tag is the root and container of all element tags in the HTML document and it tells the browser that this is an HTML document.
<head> Tag
<head>
...
</head>The <head> element tag is the container of metadata (data describes other data), HTML use metadata to define the web pages title, character sets, style, script, etc..
Here are the following elements to define metadata: <title>, <style>, <meta>, <link>, <script>, and <base>.
In our example code above, we use <meta> and <title> to define the metadata for the charter set and the title.
<meta> Tag
The <meta> element tag can also define the author, description, keywords of the web page:
<meta charset = "utf-8">
<meta name="description" content="HTML5 Tutorial">
<meta name="keywords" content="HTML,CSS, JavaScript">
<meta name="author" content="Joe"><title> Tag
The <title> element tag defines the title of the web page, that also shown on the browser’s tabs:
<title>LGeratech.com</title> For the other head element tags, we are going to talk about them later in the next topic.
<body> Tag
<body>
...
</body>The <body> element tag contains all of the contents of an HTML document, including text, images, tables, list, etc. The most commonly used body tags are: <h1>, <p>, <div>, <input>, <button> etc., and we are going to talk about more tags on our next topic.
<header> Tag
<header>
...
</header> The <header> element tag is a container that used to add contents at the top of the web page. On our example we used the header tag to define the title and subtitle of our home page:
<p> Tag
<h1>Welcome to LGeratech.com!</h1>
<p>Home page.</p>The <p> element tag is used to define a paragraph in the web page document.
<footer> Tag
<footer>
...
</footer>The <footer> element tag is a container that used to add contents at the bottom of the web page, and It can be used to define authorship information and copyright information of the web page.
Note: The <header> and the <footer> are actually not required in HTML document, unlike <body>, <head> and <html> tags, these element tags are necessary to build a whole HTML document.
<nav>
<ul>
<li><a href = "home.html">Home</a></li>
<li><a href = "profile.html">Profile</a></li>
</ul>
</nav>the <nav> is used to define navigator blocks, the blocks are containing menu items, submenu items and links used to navigate to other pages.
The <ul> tag is used to define the unordered list on the web page, <li> tag is used inside of <ul> tag to create an item for an unordered list and <a> tag used to add a hyperlink to the item, the link is used to navigate the page to another page.
The <ul> and <li> tags are used to create an unordered list for the navigator blocks.
Conclusion
For the next tutorial, we are going to discuss more example tags for creating web pages and we going to learn CSS3 to put style into it. Keep our example file, which is home.html for the next tutorial.
ultra boost
An impressive share, I simply given this onto a colleague who was doing a little analysis on this. And he actually bought me breakfast because I discovered it for him.. smile. So let me reword that: Thnx for the deal with! But yeah Thnkx for spending the time to discuss this, I really feel strongly about it and love studying more on this topic. If attainable, as you develop into expertise, would you mind updating your weblog with more particulars? It’s extremely useful for me. Massive thumb up for this weblog publish!
jordan 11
A lot of thanks for all of the effort on this website. My mum take interest in working on research and it is simple to grasp why. Most of us learn all concerning the compelling medium you deliver invaluable tips and hints via this website and as well as foster participation from other ones on the area so our own daughter is without question being taught a lot. Enjoy the rest of the new year. You’re carrying out a dazzling job.