HTML Document +-----------------------------------+ | | | +----------------------------+ | | | Head Section | | | +----------------------------+ | | | | +----------------------------+ | | | Body Section | | | +----------------------------+ | | | +-----------------------------------+
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Title</title>
</head>
<body>
</body>
</html>
Elements are designators that define the structure and content of objects within a page.

Block Type Elements are those that take up the full width available on a web page, effectively blocking out any other elements from sitting next to it on the left or right.
Common block type elements: Paragraphs (<p>), Headers (<h1> through <h6>), Divisions (<div>), List and List Items (<ol>, <ul>, <li>), Forms (<form>)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Block Elements</title>
</head>
<body>
<div>First</div><div>Second</div><div>Third</div>
</body>
</html>
Inline Type Elements are those who only take up as much width as is needed to display the contents of the element, thereby allowing other elements to be in line with the inline element.
Common inline type elements: Spans (<span>), Images (<img>), Anchors (<a>)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inline Element</title>
</head>
<body>
<img src="http://placekitten.com/300/450" alt="Kitten 1">
<img src="http://placekitten.com/300/500" alt="Kitten 2">
<img src="http://placekitten.com/350/600" alt="Kitten 3">
</body>
</html>
The HTML DOCTYPE, or Document Type Declaration, is a required preamble found at the very top of all HTML documents. Its primary purpose is to inform the web browser which version of HTML the document is written in, thus triggering the correct rendering mode.
It must only appear once, at the top of the page (before any HTML tags).
The <!DOCTYPE> declaration is not case sensitive.
The <!DOCTYPE> declaration for HTML5 is:
<!DOCTYPE html>
The HTML <html> tag represents the root element of an HTML document. It serves as the container for all other HTML elements (with the exception of the <!DOCTYPE> declaration, which precedes it).
<html>
<head>
...
</head>
<body>
...
</body>
</html>
The HTML <body> tag is a fundamental element in an HTML document, serving as a container for all the visible content of a web page. It encloses everything that users see and interact with, including text, images, videos, forms, and other multimedia elements.
<html>
<head>
...
</head>
<body>
...
</body>
</html>
The HTML <head> tag defines the head section of an HTML document. This section contains metadata, which is data about the HTML document itself, rather than content that is directly displayed on the webpage. The information within the <head> tag is used by browsers, search engines, and other web technologies to understand and process the page.
<html>
<head>
...
</head>
<body>
...
</body>
</html>
The HTML <title> tag is a crucial element within the <head> section of an HTML document, defining the title of the web page. This title serves multiple important functions:
Browser Tab/Window Title: The text within the <title> tag appears in the browser's title bar or the tab of the web page, providing a clear identifier for the user.
Search Engine Optimization (SEO): Search engines use the title tag as a primary factor in understanding the page's content and relevance. It typically forms the clickable headline in search engine results pages (SERPs), influencing click-through rates.
Bookmarks/Favorites: When a user bookmarks or adds a page to their favorites, the content of the <title> tag is often used as the default name.
Social Media Sharing: When a link to the web page is shared on social media platforms, the title tag's content is frequently used as the headline for the shared link.
...
<head>
<title>Document Title</title>
</head>
HTML <meta> tags provide metadata about an HTML document. Metadata is data about data, and in this context, it provides information about the webpage itself, rather than the content displayed on the page. These tags are always placed within the <head> section of an HTML document.
Common uses of <meta> tags include:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A brief description of the webpage content.">
<meta name="author" content="[developer name]">
<meta meta http-equiv="refresh" content="5;url=https://example.com">
HTML headings are used to define the titles and subtitles of sections within a webpage, creating a hierarchical structure for the content. There are six levels of headings, ranging from <h1> to <h6>, with <h1> representing the most important or main heading and <h6> representing the least important.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Headings Example</title>
</head>
<body>
<h1>Main Page Title</h1>
<p>This is the introductory content of the page.</p>
<h2>Section 1: Introduction</h2>
<p>Details about the first section.</p>
<h3>Subsection 1.1: Overview</h3>
<p>More specific information within Subsection 1.1.</p>
<h2>Section 2: Conclusion</h2>
<p>Concluding remarks for the page.</p>
</body>
</html>
This is the introductory content of the page.
Details about the first section.
More specific information within Subsection 1.1.
Concluding remarks for the page.
HTML paragraphs are fundamental elements used to structure and display text
content on a web page. They are defined using the <p> tag, which is a block-level element.
The html <p> defines a paragraph. Note: Browsers automatically add some white space (a margin) before and after a paragraph.
The <p> tag offers a way to structure your text into different paragraphs. Each paragraph of text should go in between an opening <p> and a closing </p> tag as shown below:
<!DOCTYPE html>
<html>
<head>
<title>Paragraphs Example</title>
</head>
<body>
<h1>Paragraph Example</h1>
<!-- Create 3 paragraphs -->
Here is the first paragraph of text.
Here is the second paragraph of text.
Here is the third paragraph of text.