In this article, I'll introduce HTML5 approaching what is HTML5, what is a tag, and it parts, Doctype HTML5, basic structure.
What is HTML and HTML5?
HTML stands for Hypertext Markup Language, and as the name suggests, it is a markup language rather than a programming language. HTML forms the foundation for developing web pages and web systems. It enables the delineation of different parts of a web page, such as headers, footers, menus, lists, paragraphs, images, buttons, and more. However, HTML doesn't handle element positioning; CSS is used for that purpose.
HTML5 is the fifth iteration of HTML and is the current version. It introduces new features, primarily focused on enhancing web semantics.
How HTML5 Works
HTML and HTML5 function akin to XML files, resembling trees where elements have children (other elements). Each element, known as a Tag, is opened and closed, and elements can be nested within each other.
Consider the following example of an HTML file:
<!DOCTYPE html>
<html>
<head>
</head>
<body lang="en">
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Observe that the HTML <html> tag is opened in the second line and closed in the last line. Inside the HTML element, there are head and body tags, which are siblings. These two tags are children of the html tag.
The body tag includes an attribute called lang, with a value of en.
Within the body section, there are two tags, h1 and p. Proper indentation enhances code readability.
The first line contains the DOCTYPE tag, unique because it doesn't have a closing tag. This tag indicates that the document adheres to HTML5 standards.
Anatomy of an HTML Tag
As mentioned earlier, a tag may have attributes, each with corresponding values. The structure of a tag is as follows:
<element attribute1="value1" attribute2="value2">inner content</element>
Where:
-
<element ...opens the element tag. -
attribute1="value1"is an attribute of the tag, representing characteristics like color, size, or other properties. - inner content: This area can contain other tags, values (such as text or numbers), or nothing.
-
</element>closes the tag.
Self-Closing Tags
Most tags (except DOCTYPE) require a closing tag, but some can be self-closed within the opening tag. Two common cases include:
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<head>
<img src="image.png" alt="description" />
</head>
Notice the trailing slash / at the end of the opening tag, signifying self-closure.
Basic Structure and Your First HTML5 Code
Create index.html and use the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- External files (CSS, JS), and metadata -->
<meta charset="utf-8" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<!-- Prefer class over id for CSS; id is mainly for JS -->
<header class="header" id="header">
Page Header
</header>
<nav class="nav">
Menu
</nav>
<main class="content">
<!-- Only one per page/document -->
Main Content
</main>
<footer class="footer">
</footer>
</body>
</html>
-
<!DOCTYPE html>: This indicates that the document is in HTML format. -
htmlelement: It contains all elements in an HTML document. -
headelement: It contains elements for page configuration (such as title, description, etc.), external files (such as JavaScript and CSS files), and favicon. There can only be one per page. -
bodyelement: It's the body of the document; here are all elements directly related to user interaction. There can only be one per page. -
headerelement: It contains elements, including texts and images, for the page header. Usually, it is the top visible part on a site. There can only be one per section (one perbody, one persection, one perarticle). -
navelement: It contains a navigation menu. There can be multiple per page, for example, one in theheaderand one in thefooteror a primary and a secondary menu. -
mainelement: It contains the main content of the page. There can only be one per page. -
footerelement: It contains elements, including texts and images, for the page footer. Usually, it is the bottom visible part on a site. There can only be one per section (one perbody, one persection, one perarticle). -
classattribute in an HTML element: It assigns one or more classes to an element. Think of classes like categories in the real world; you can be in the student class, developer class, or human class, for example. In a later text, we'll learn more about this.
Comments in HTML
As evident from the above code, HTML allows the inclusion of comments. The syntax is simple: start with <!-- and end with -->. For instance:
<!-- This is a comment message -->
What Lies Ahead
In upcoming articles, you will delve into block tags, semantic web concepts (including semantic tags), and techniques for identifying tags. Stay tuned!
Top comments (0)