Introduction to HTML: Basic Structure, Tags and Attributes
HTML, or HyperText Markup Language, is the standard markup language for creating web pages and applications. Understanding the basic structure of HTML, as well as tags and attributes, is critical for any front-end developer. In this chapter, we will explore these concepts in detail.
Basic structure of HTML
An HTML document is made up of HTML elements, which are indicated by tags. Each HTML document begins with the document type declaration , which tells the browser that the document is an HTML5 file. The tag <html> that involves the entire content of the page.
<!DOCTYPE html> <html> ... </html>
Within the <html> tag, we have two main parts: the <head> and <body>. The <head> contains metadata about the document, such as the page title (<title> tag), links to CSS stylesheets (<link> tag), and JavaScript scripts (<script> tag). The <body> contains the actual content of the page that is visible to users.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
Page content...
</body>
</html>
HTML Tags
HTML tags are used to define elements in an HTML document. They are surrounded by angle brackets (< and >). Most tags come in pairs and wrap around the content they are affecting. For example, the <p> is used to create a paragraph:
<p>This is a paragraph.</p>
There are many HTML tags, each with its own purpose. Some of the most common include <h1> to <h6> for headers, <a> for links, <img> for images, <ul> and <li> for lists, and <div> and <span> to group elements.
HTML Attributes
HTML attributes are used to provide additional information about an element. They are always specified at the beginning of the opening tag and usually come in name/value pairs. For example, the <a> generally uses the href attribute to specify the link URL:
<a href="https://www.example.com">This is a link</a>
Other common attributes include src to specify the font of an image, alt to specify alternative text for an image, and style to add CSS styles to an element.
In short, HTML is the backbone of any web page. Understanding the basic structure of HTML, as well as tags and attributes, is the first step to becoming an effective front-end developer. In the next chapter, we will explore CSS and how it is used to style HTML elements.
