An HTML document consists of several parts that together determine how a webpage is displayed in a browser. The HTML document begins with a <!DOCTYPE html> declaration, which informs the browser that it is an HTML5 document. After this, there is the <html> element, which tells the browser that all the content of the document is HTML code.
Next come the <head> and <body> elements.
HTML Head
The head element contains information that is not visible in the browser but is important for building the document. For example, meta tags can be added to the head element to determine the page's language and character set. In addition, link and script elements can be added to the head element to bring CSS style sheets and JavaScript code to the page.
HTML Body
The body element contains all the content that is visible in the browser. In addition to the text and other content of the page, various HTML elements can be added to the body element, such as images, links, tables, lists, and forms. The closing tag for an HTML document is used as </html> identifier.
Putting the pieces together
The following is an example of a simple HTML document that contains the basic structure:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title> HTML document</title><link href="style.css" rel="stylesheet" type="text/css" /></head><body> This is a properly formatted HTML page.<script src="script.js"></script></body></html>Do not worry if you do not yet understand the purpose of all the tags, we will cover them. What is important now is to get a basic idea of the structure of an HTML document.
But here's briefly if you're curious:
- The meta tags inside the head section determine the character set of the document so that, for example, special characters work correctly, and inform the browser to scale the website according to the screen size.
- The title tag inside the head section determines the text that is displayed in the browser's tab.
- The link tag inside the head section links to a stylesheet that provides colors and fonts, for example, to the website.
- The script tag inside the body section downloads a JavaScript file to the page and executes its code.
Practice
Valitettavasti Replit-palvelu on muuttnut lennosta eikä enää anna suorittaa näitä koodeja suoraan selaimessa. Voit klikata alla olevaa "Open in Replit" linkkiä ja avata koodin Replit-palvelussa. Meillä on työn alla etsiä Replitille korvaaja.
Ready to become an ethical hacker?
Start today.
As a member of Hakatemia you get unlimited access to Hakatemia modules, exercises and tools, and you get access to the Hakatemia Discord channel where you can ask for help from both instructors and other Hakatemia members.