Loading course content...
Loading course content...
Code Playground is only enabled on larger screen sizes.
HTML and CSS are the foundations of a webpage.
HTML defines the structure and content of the webpage, while CSS enhances the style and appearance, and together, they create the webpages we see today.
In this chapter, we’ll explore the fundamentals of HTML and CSS, giving you the skills to start building your own webpages.
HTML stands for HyperText Markup Language. It defines the structure of webpages using HTML elements.
To start writing HTML code, try the code demo below in the Code Playground:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="/styles.css" />
</head>
<body>
<p>Hello, World!</p>
</body>
</html>Modify the source code directly to see how it affects the webpage. For example, change the content between <p>...</p>:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="/styles.css" />
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
</html>Click the Run button, and the webpage should be updated.
A typical HTML document always has the following structure:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- . . . -->
</head>
<body>
<!-- . . . -->
</body>
</html>The <!DOCTYPE html> tag defines the document type.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- . . . -->
</head>
<body>
<!-- . . . -->
</body>
</html>When the web browser encounters <!DOCTYPE html>, it understands that the page should be parsed and displayed according to the specifications of HTML5.
This ensures that modern browsers interpret the webpage's content and layout correctly.
Everything else in the file should be enclosed inside an <html> element, defined by an opening tag (<html>) and a closing tag (</html>).
<!DOCTYPE html>
<html lang="en">
<head>
<!-- . . . -->
</head>
<body>
<!-- . . . -->
</body>
</html>lang is called an attribute, and it has the value "en" in our example.
This tells the browser as well as the search engine that English is the primary language used for this webpage.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- . . . -->
</head>
<body>
<!-- . . . -->
</body>
</html>Inside the <html> element, there are two child elements, <head> and <body>:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- . . . -->
</head>
<body>
<!-- . . . -->
</body>
</html><head> contains metadata and other information about the HTML document.
This information will not be displayed in the browser but is often used by search engines for SEO (Search Engine Optimization) purposes.
<body>, on the other hand, contains the main content of the webpage that is visible to the users, and for that reason, it is also the part of the HTML file we are going to focus on in this chapter.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="/styles.css"> </head> <body> <p>Hello, World!</p> </body> </html>