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.
Continue in our app.
You can listen to the audiobook with the screen off, receive a free certificate for this course, and also have access to 5,000 other free online courses.
Or continue reading below...
Download the app
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.
