4. Introduction to HTML: basic structure, tags and attributes
Page 4 | Listen in audio
Introduction to HTML
HTML, or Hyper Text Markup Language, is the standard markup language for creating web pages and applications. It describes the structure of a web page and consists of a series of HTML elements, also known as tags, that the browser uses to render content.
Basic structure
A basic HTML document follows a specific structure. It starts with the document type which tells the browser that this is an HTML5 document. Next, we have the <html> which involves the entire content of the page. Within this tag, we have two main parts: the <head> and the <body>.
The <head> contains metadata about the document, such as the page title (displayed in the browser tab), links to CSS files, character definitions, and other information that is not visible to the user.
The <body> This is where we place all the content that we want to be visible to users when they visit our page. This can include text, images, videos, links, lists, tables and more.
Tags
HTML tags are the foundation of any web page. They tell the browser how content should be interpreted and displayed. Tags are enclosed in angle brackets (< and >) and most tags have an opening and closing tag, with the content between them. For example, the <p> is used for paragraphs of text. To create a paragraph, you would enclose your text between the opening tag <p> and the closing tag </p>.
There are many HTML tags, each with its own purpose and use. Some of the most common include <h1> to <h6> for headers, <a> for links, <img> for images, <ul> and <li> for unordered lists, and <table>, <tr> and <td> for tables.
Attributes
HTML attributes are used to provide additional information about an element. They are placed in the opening tag and consist of an attribute name and an attribute value, separated by an equals sign. For example, the image tag <img> uses the 'src' attribute to specify the URL of the image that should be displayed, and the 'alt' attribute to provide alternative text that will be displayed if the image cannot be loaded.
Other common attributes include 'id' and 'class' for CSS styling, 'href' for specifying the URL of a link, and 'style' for adding CSS directly to an element.
Understanding the basic structure, tags and attributes of HTML is the first step towards becoming a front-end developer. With this foundation, you can start exploring CSS and JavaScript to add style and functionality to your web page.
Now answer the exercise about the content:
What is the function of the <head> in an HTML document?
You are right! Congratulations, now go to the next page
You missed! Try again.
Next page of the Free Ebook: