4.20. Introduction to HTML: basic structure, tags and attributes
HTML, which stands for Hyper Text Markup Language, is the standard markup language for creating web pages and applications. Along with CSS and JavaScript, HTML is a fundamental technology used by most websites to create visually appealing web pages, user interfaces for web applications, and user interfaces for many mobile applications.
Basic structure of an HTML document
An HTML document has a tree structure, where each element and its content is represented as an object in the Document Object Model (DOM).
<!DOCTYPE html> <html> <head> <title>Page title</title> </head> <body> <h1>This is a header</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>
The <!DOCTYPE html> is the document type declaration and helps browsers display web pages correctly. It should only appear once, at the top of the page (before any HTML tags).
The <html> is the root of an HTML page. The <head> contains metainformation about the HTML document. The <title> specifies a title for the HTML document (which is shown in the browser title bar or page tab).
The <body> defines the body of the document and is a container for all visible parts of the HTML document.
HTML Tags and Attributes
HTML tags are the foundation of any web page. They are used to define and organize content on a web page. Each HTML tag has a specific syntax that must be followed so that the browser can interpret it correctly.
An HTML element is defined by a start tag and, usually, an end tag. The content of the element is everything between the start tag and the end tag. Some examples of HTML elements include <h1>, <p>, <div>, <body>, <head>, <title>, etc.
HTML attributes are used to provide additional information about elements. They are always specified in the starting element and usually come in name/value pairs like: name="value". For example, the 'class' attribute is used to specify one or more classes for an HTML element. The 'id' attribute is used to specify a unique id for an HTML element.
Positioning in CSS
CSS, which stands for Cascading Style Sheets, is a style sheet language used to describe the appearance of a document written in HTML. CSS is used to control the layout of multiple web pages at once.
Positioning in CSS is an important concept that allows you to control where and how HTML elements are positioned on the web page. There are several positioning properties in CSS that you can use to control positioning, such as: 'static', 'relative', 'fixed', 'absolute' and 'sticky'.
By default, elements are positioned 'static', which means they are displayed on the page in the order they appear in the HTML code. If you want to move an element relative to its normal position, you can use 'relative' position. If you want to position an element relative to the viewport, you can use the 'fixed' position. If you want to position an element relative to the nearest parent element (instead of 'static' positioned), you can use 'absolute' position. If you want to position an element based on user scrolling, you can use 'sticky' position.
Also, you can use the 'top', 'bottom', 'left' and 'right' properties to move the element from its original position when you use the 'relative', 'absolute', 'positions fixed' or 'sticky'.
