html
HTML stands for HyperText Markup Language. It is used to structure web pages and their content using a markup language. It is like a skeleton of web pages. Hypertext is used as a link to connect web pages. A Series of HTML elements are used for constructing web pages to look a certain way.
HTML is a tree of nodes consisting of elements and text nodes.
HTML elements have an opening tag, content, and closing tag. Tags are wrapped with angle brackets. Some elements do not have a closing tag. Elements can also have attributes.
Markup is what HTML tags do to the text inside of them; they mark it as a specific type of text.
Below is the basic HTML page structure.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
<!DOCTYPE> - All HTML documents must start with a declaration. The declaration is not an HTML tag. It is "information" to the browser about what document type to expect.
<html></html> - This element wraps all the content on the entire page and is sometimes known as the root element.
<head></head> - This element describes the page and includes stuff you want in your page that is not content.
<meta charset="utf-8"> - This element sets the character set your document should use.
<meta name="viewport" content="width=device-width"> — This element ensures the page renders at the width of the viewport, preventing mobile browsers from rendering pages wider than the viewport and then shrinking them down.
<title></title> - This sets the title of your page, which appears in the browser tab. It is also used when bookmarking a page.
<body></body> - This contains all the content that you want to show on the web page. That could be text, images, video, or audio content
Example of HTML element:
<p>This is a content of paragraph</p>
<p> is opening tag, </p> is closing tag and content goes between them.
<p class="paragraph">This is a content of paragraph</p>
The element attribute is placed inside the opening tag.
<p class="paragraph">This is a <strong>content</strong> of paragraph</p>
The element can be nested within another element. Most of the elements have a closing tag but there are some exemptions.
The void or singleton element does not require a closing tag. One of them is <img> tag. It is used for adding images to web pages. Another one is the <input> tag, which aims to capture visitor information. To link the document with external resources <link> tag is used. To break the line there is a <br> tag and to add a horizontal rule <hr> tag. There are several more void tags, but these are the most common.
HTML element has a default display value depending on what type of element it is. There are two values: block-level and inline elements.
Block-level elements take the full width of their parents. The two most used are <div> and <p>. The complete list of block elements: address, article, aside, blockquote, canvas, dd, div, dl, dt, fieldset, figcaption, figure, footer, form, h1-h6, header, hr, li, main, nav, noscript, ol, p, pre, section, table, tfoot, ul, video. Block-level elements start at the new line.
Inline elements take as much width as necessary. Does not starts at the new line. Most common are <a>, <button>, and <span>. The list of inline elements: a, abbr, acronym, b, bdo, big, br, button, cite, code, dfn, em, i, img, input, kbd, label, map, object, output, q, samp, script, select, small, span, strong, sub, sup, textarea, time, tt, var.
Here are some of the most commonly used HTML tags:
<html>- Defines an HTML document<head>- Defines the document head, which contains meta information<title>- Defines the document title, which appears in the browser's title bar or tab<body>- Defines the document body, which contains the visible page content<h1>to<h6>- Defines headings of different levels (h1 being the most important and h6 the least important)<p>- Defines a paragraph of text<a>- Defines a hyperlink to another web page, file, or location on the same page<img>- Defines an image<ul>- Defines an unordered list<ol>- Defines an ordered list<li>- Defines a list item<table>- Defines a table<tr>- Defines a table row<td>- Defines a table cell<form>- Defines a form for user input<input>- Defines an input field where the user can enter data<button>- Defines a clickable button<div>- Defines a section of the document that can be styled separately from the rest of the page<span>- Defines a small section of text that can be styled separately from the rest of the paragraph
These are just a few examples of the many HTML tags that are available. Learning how to use these tags effectively will help you create well-structured and visually appealing web pages.