4.21. Introduction to HTML: basic structure, tags and attributes: Flexbox and Grid
Page 25 | Listen in audio
4.21. Introduction to HTML: basic structure, tags and attributes: Flexbox and Grid
HTML, which stands for HyperText Markup Language, is the standard markup language for creating web pages and applications. Combined with technologies like CSS and JavaScript, HTML is essential for web development. In this section, we'll dive into the basic structure of HTML, its tags and attributes, as well as explore the concepts of Flexbox and Grid.
Basic structure of HTML
Every HTML document follows a basic structure, which includes the document type declaration (), which informs the browser that this is an HTML5 document. Following the document type declaration, we have the root tag <html>. Within this tag, we have two main parts: <head> and <body>.
The <head> contains metainformation about the document, such as its title, which is displayed in the browser's title bar. The <body> contains the main content of the HTML document, including text, images, videos, games, playback scripts, or any other content that is displayed to users.
HTML tags and attributes
HTML tags are the basis of HTML markup. They define the type of content being inserted and tell the browser how to display that content. For example, the <p> is used for paragraphs of text, while the <img> is used to insert images.
Each HTML tag can have attributes, which are used to provide additional information about the element. For example, the <img> usually has a "src" attribute that specifies the URL of the image to be loaded and an "alt" attribute that provides alternative text for the image if it cannot be loaded.
Flexbox and Grid
Flexbox and Grid are two CSS modules that provide efficient ways to design, align, and distribute space between items in a container, even when their sizes are unknown or dynamic. Both offer more precise and flexible control over layouts compared to traditional layout methods.
Flexbox is ideal for layouts of one-dimensional components - i.e. rows or columns. It is used to design responsive web and user interfaces with flexible and efficient layouts. On the other hand, the Grid is ideal for two-dimensional layouts - that is, rows and columns at the same time. It is used to design complex and responsive page layouts.
With Flexbox, you can control the direction, alignment, size and order of elements. In Grid, you can control the position, size and layer of elements. Both are powerful and flexible, and choosing between them depends on your specific layout needs.
In conclusion, HTML is the foundation of web development. Understanding the basic structure of HTML, its tags and attributes, as well as mastering concepts such as Flexbox and Grid, are essential skills for any front-end developer. We hope this course provides you with a solid understanding of these concepts and helps you become a more efficient and effective web developer.
Now answer the exercise about the content:
What is the function of the <img> in HTML and what attributes does it generally have?
You are right! Congratulations, now go to the next page
You missed! Try again.
Next page of the Free Ebook:
26Introduction to HTML: basic structure, tags and attributes: Media Queries
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!
