4.29. Introduction to HTML: basic structure, tags and attributes: DOM manipulation
Page 33 | Listen in audio
Introduction to HTML: basic structure, tags and attributes
HTML (HyperText Markup Language) is the fundamental language used to develop web pages. It is a markup language, which means it structures the content on the page using tags. These tags are used to create elements such as headings, paragraphs, lists, links, images, and more.
Basic structure of HTML
A basic HTML page has a specific structure. It starts with a document type declaration () to tell the browser that it is an HTML5 page. The page is then wrapped with the <html> tag, which contains two main sections: <head> and <body>.
The <head> contains information about the page, such as the title (which is displayed in the browser's title bar or tab) and links to CSS (Cascading Style Sheets) or JavaScript, if necessary. The <body> This is where the visible content of the page is placed.
HTML tags and attributes
HTML tags are used to create elements on the page. Each tag has a specific name and is written between angle brackets (< and >). Most tags have an opening tag and a closing tag, with the content in between. For example, the <p> is used to create a paragraph.
HTML attributes are used to provide additional information about an element. They are included in the opening tag and have a name and value. For example, the <a> (which creates a link) can have an "href" attribute that defines the URL of the link.
DOM manipulation
The DOM (Document Object Model) is a representation of the HTML page as a tree structure of objects. Every element on the page is an object in the DOM, and we can manipulate them using JavaScript.
Selecting elements
We can select elements in the DOM using various methods. The most common are getElementById (which selects an element with a specific id), getElementsByClassName (which selects elements with a specific class) and getElementsByTagName (which selects elements with a specific tag).
Changing elements
After selecting an element, we can change it in several ways. We can change the content of an element using the innerHTML property, change the style of an element using the style property, and change the attributes of an element using the setAttribute and removeAttribute methods.
Adding and removing elements
We can also add and remove elements in the DOM. To add an element, we create a new element using the createElement method, set its content and attributes as needed, and then add it to the page using the appendChild or insertBefore method. To remove an element, we first select the element and then use the removeChild method.
DOM manipulation is a fundamental part of front-end development, as it allows you to create dynamic and interactive websites. By combining HTML, CSS, and JavaScript, you can create virtually any type of website or web application you can imagine.
Now answer the exercise about the content:
What is the function of the <head> in an HTML page?
You are right! Congratulations, now go to the next page
You missed! Try again.
Next page of the Free Ebook:
34Introduction to HTML: basic structure, tags and attributes: Events in JavaScript
4 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!
