An HTML file is made of elements. These elements are responsible for creating web pages and defining content on that webpage. An HTML element usually consists of a start tag <tag name>, a close tag </tag name>, and content inserted between them.
HTML Elements
<tagname>Content</tagname>
Examples of some HTML Elements:
<h1>Heading<h1>
<p>Paragraph<p>
<div>
<button>Click here</button>
</div>
<Head>
The <head> element is a container of <title> , <style>, <meta>, <link>, <script> , and <base>. Metadata is data about the HTML document.
<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>
Metadata is not displayed in the browser
<Title>
The <title> element defines the title of the document. It is shown in a browser's title bar for a page's tab. It only contains text.
<title>HTML Elements</title>
<body>
The <body> Element represents the content of an HTML Document. There can be only one <body> element in a document.
<body></body>
<Header>
The <header> element represents introductory content. It may contain some heading elements, a logo, a search form, an author name, and other elements.
<header>
<h1>Heading</h1>
<p>Paragraph</p>
</header>
<Footer>
The <footer> element represents a footer for a document or a section. A <footer> typically contains information about the author of the section, copyright data, or links to related documents.
<footer>
<p>Author: Shon L</p>
<p><a href="mailto:shon@example.com">shon@example.com</a></p>
</footer>
<Article>
The <article> element represents an independent, self-contained composition in a document, page, application, or site. Examples include a forum post; a magazine or newspaper article, a blog entry, or any other independent content item.
<article>
<h2>User Interface</h2>
<p>User Interface (UI) defines the way humans interact with the information systems! Every app and every website has a user interface.</p>
</article>
<article>
<h2>JavaScript</h2>
<p>JavaScript, often abbreviated as JS, is an interpreted programming language that conforms to the ECMAScript specification. JavaScript is high-level, often just-in-time compiled, and multi-paradigm.</p>
</article>
<article>
<h2>React JS</h2>
<p>React is a JavaScript library for building user interfaces. React was first created by Jordan Walke, a software engineer working for Facebook</p>
</article>
<Section>
The <section> element represents a standalone section of a document. Sections should always have a heading, with very few exceptions.
<section>
<h2>HTML Elements</h2>
<p>An HTML file is made of elements. These elements are responsible for creating web pages and defining content on that webpage. An element in HTML usually consist of a start tag <tag name>, a close tag </tag name>, and content inserted between them.</p>
</section>
<section>
<h2>CSS Selectors</h2>
<p>CSS selectors define the pattern to select elements to which a set of CSS rules are then applied.</p>
</section>
<P>
The <p> element represents a paragraph. Browsers automatically add a single blank line before and after each <p> element.
<p>This is paragraph.</p>
<div>
The <div> element is a division in an HTML document. It has no effect on the content or layout until styled in some way using CSS. <div> tag is used as a container for HTML documents. it is easily styled by using the class or id attribute. Any content can be put inside the <div> tag!
<div class="container">
<h2>Heading</h2>
<p>Paragraph</p>
<button>Click here</button>
</div>
<Span>
The <span> element is an inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes using the class or id attributes. <span> is very much like an <div> element, but <div> is a block lever element whereas a <span> is an inline element.
<p>I love <span style="color:green">coding!</span></p>
<!--span is inline element-->
<span>shon</span>
<span>shon</span>
<Img>
The <img> HTML elements embed an image into the document.
The <img> tag has two required attributes:
src - Specifies the path to the image
alt - Specifies an alternate text for the image, if the image for some reason cannot be displayed
<img width="450px" src="./image.jpg" alt="image" />
<Aside>
The <aside> element represents a portion of a document whose content is only indirectly related to the document's main content. Asides are frequently presented as sidebars or call-out boxes.
<p>The 'div' tag is used as a container for HTML elements - which is then styled with CSS.</p>
<aside>
<h4>CSS</h4>
<p>Cascading Style Sheets, fondly referred to as CSS, is a simply designed language intended to simplify the process of making web pages presentable. CSS allows you to apply styles to web pages.</p>
</aside>
<audio>
The <audio> element is used to embed sound content in documents. It may contain one or more audio sources, represented using the src attribute or the source element: the browser will choose the most suitable one.
There are three supported audio formats in HTML: MP3, WAV, and OGG.
<audio controls>
<source src="./music/song05.mp3" type="audio/mp3">
<source src="./music/song05.mp3" type="audio/ogg">
</audio>
<br>
Use the HTML <br> element to insert a single line break in a text. The <br> tag has no end tag.
<p class="description">
Build trust to connect your brand to billions of users <br> and grow
your revenue through SEO.
</p>
<del>
The <del> tag defines the text that has been deleted from a document. Browsers will usually strike a line through the deleted text.
<h2>Example of 'del' Tag</h2>
<p>The old price is to be <del> deleted </del>.</p>
<Details>
The <details> tag is often used to create an interactive widget that the user can open and close. By default, the widget is closed. When open, it expands and displays the content within. The contents of the <summary> element used as the label for the disclosure widget.
<details>
<summary>Countdown Sale</summary>
<p>Save upto 60% on selected Xbox games</p>
</details>
<Progress>
The <progress> HTML elements display an indicator showing the completion progress of a task typically displayed as a progress bar.
<label for="file">Downloading progress:</label>
<progress id="file" value="60" max="100"> 60% </progress>
<Video>
The <video> HTML elements embed a media player which supports video playback into the document.
<video width="350" controls autoplay src="./Mountains-91545.mp4">
</video>
<ul>
The <ul> element represents an unordered list of items, typically rendered as a bulleted list.
<li>
The <li> element is used to represent an item in a list. It must be contained in a parent element.
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
</ul>
<ol>
The <ol> HTML element represents an ordered list of items - typically rendered as a numbered list.
<ol>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
</ol>
Thank you,
Shon.