4.31. Introduction to HTML: basic structure, tags and attributes: AJAX and Fetch API
Page 35 | Listen in audio
4.31. Introduction to HTML: basic structure, tags and attributes: AJAX and Fetch API
HTML, or HyperText Markup Language, is the standard markup language for documents designed to be displayed in a web browser. HTML is the cornerstone of any web developer. It is the basic structure of any web page. A web page without HTML is like a building without a foundation. Therefore, a solid understanding of HTML is crucial to becoming a front-end developer.
Basic structure of HTML
The basic structure of HTML consists of tags that are used to define and organize content on the web page. Each HTML document begins with the document type declaration. This is followed by the html tag that encapsulates the entire content of the web page. Within this html tag, we have two main parts: the head tag and the body tag.
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
</head>
<body>
Page content
</body>
</html>
The head tag contains metadata about the web page, such as the page title, links to CSS and JavaScript, and various other information that is not displayed directly on the web page. The body tag contains the actual content of the web page that is displayed in the browser.
HTML Tags and Attributes
HTML tags are the foundation of HTML. They define and organize the content on the web page. Each tag begins with a angle bracket (<) followed by the tag name and ends with an angle bracket (>). Most HTML tags come in pairs, meaning they have an opening tag and a closing tag. The closing tag is similar to the opening tag, but it has a forward slash (/) before the tag name. For example, the paragraph tag is written as <p> to open and </p> to close.
HTML attributes are used to provide additional information about HTML tags. They are always specified in the opening tag and usually come in name/value pairs. For example, the link tag (<a>) uses the href attribute to specify the URL of the link.
<a href="https://www.example.com">This is a link</a>
AJAX and Fetch API
AJAX, or Asynchronous JavaScript and XML, is a technique that allows web pages to be updated asynchronously, sending and receiving data from the server without interfering with the display and behavior of the existing page. This means you can update parts of a web page without reloading the entire page.
The Fetch API provides an interface for fetching resources (including cross-origin resources) on the web. It is a more modern and flexible alternative to AJAX, with a more powerful and easier to use API. The Fetch API returns promises and uses cleaner, more elegant syntax, making the code more readable and easier to maintain.
fetch('https://api.exemplo.com/dados')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
In short, HTML is the markup language we use to structure and give meaning to our content on the web, defining what is a header, a paragraph, a link, etc. HTML tags and attributes are the foundation of HTML, while AJAX and the Fetch API are powerful techniques that allow you to create dynamic, interactive user experiences on the web.
Now answer the exercise about the content:
What is the Fetch API and how does it relate to AJAX?
You are right! Congratulations, now go to the next page
You missed! Try again.
Next page of the Free Ebook:
36Introduction to HTML: basic structure, tags and attributes: Introduction to ES6+
3 minutes
Earn your Certificate for this Course for Free! by downloading the Cursa app and reading the ebook there. Available on Google Play or App Store!
