Inline vs Block Elements
Basic Elements
A text header, denoted using the<h1>,<h2>,<h3>,<h4>,<h5>,<h6>tags.
A paragraph, denoted using the<p>tag.
A horizontal ruler, denoted using the<hr>tag.
A link, denoted using the<a>(anchor) tag.
A list, denoted using the<ul>(unordered list),<ol>(ordered list) and<li>(list element) tags.
An image, denoted using the<img>tag
A divider, denoted using the<div>tag
A text span, denoted using the<span>tag
Text headers and paragraphs
There are 6 different types of text header you can choose from h1, h2, h3, h4, h5, h6 with h1 being the topmost heading with the largest text.
Best SEO practices indicate that there should be only ONE h1 tag per page
<!DOCTYPE html><html> <head> </head> <body> <h1>My First Page</h1> <p>This is my first page.</p> <h2>A secondary header.</h2> <p>Some more text.</p> </body></html>Links
A link ("anchor") is a small span of text that will direct you to a different section on the page, or to a different page.
<a href="[<https://www.google.com>](<https://www.google.com/>)">A link to Google</a>Link can also point to email, phone number
<a [href="<mailto:[emailprotected]>](mailto:href=%22mailto:[emailprotected])">Jon Doe</a><a href="tel:5551234567">Call (555)123-4567</a>Link can also point to any element on the same page (HTML document)
<!-- <a> element links to the section below --><p><a href="#Section_further_down"> Jump to the heading below</a></p><!-- Heading to link to --><h2 id="Section_further_down">Section further down</h2>Lists
HTML provides a way to create both an ordered list (with elements counting up, 1, 2, 3...) and an unordered list with bullets instead of numbers.
Order list:
<p>Here is a list of ordered items:</p><ol> <li>First item</li> <li>Second item</li> <li>Third item</li></ol>Un-ordered list:
<p>Here is a list of unordered items:</p> <ul style="list-style-type: disc"> <li>First item</li> <li>Second item</li> <li>Third item</li></ul>List can be nested inside each other:
<ul> <li>Coffee</li> <li>Tea <ol> <li>Black tea</li> <li>Green tea</li> </ol> </li> <li>Milk</li></ul>Images
Images in HTML are inline elements that can be placed within a paragraph.
<img src="/static/img/code.jpg" width="100"><img src="/static/img/code.jpg" style="width: 100px">(There is also the picture element but we will not discuss it here)
Videos
Videos in HTML are inline elements that can be placed within a paragraph.
<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg">Your browser does not support the video tag.</video>Note The video element is new, some older browsers may not support it.
Divs
The<div>tag defines a division or a section in an HTML document. Div is a block element.
The<div>tag is used as a container for HTML elements - which are then styled with CSS or manipulated with JavaScript.
The<div>tag is easily styled by using the class or id attribute.
Any sort of content can be put inside the<div>tag!
Spans
The<span>tag is an inline container used to mark up a part of a text, or a part of a document.
The<span>tag is easily styled by CSS or manipulated with JavaScript using the class or id attribute.
The<span>tag is much like the<div>element, but <div> is a block-level element and<span>is an inline element.
Tables
The HTML <table> element represents tabular data — that is, the information presented in a two-dimensional table comprised of rows and columns of cells containing data.
<table> <thead> <tr> <th colspan="2">The table header</th> </tr> </thead> <tbody> <tr> <td>The table body</td> <td>with two columns</td> </tr> </tbody></table>
The table element can be easily abused for layout purposes!!!
In version 5 of HTML (the latest version), some new elements are introduced. These new elements can be used to describe the purpose of the data/content the element holds.
Some important elements
<article>: Defines an article
<aside>: Defines content aside from the page content
<details>: Defines additional details that the user can view or hide
<figcaption>: Defines a caption for a <figure> element
<figure>: Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<footer>: Defines a footer for a document or section
<header>: Specifies a header for a document or section
<main>: Specifies the main content of a document
<mark>: Defines marked/highlighted text
<nav>: Defines navigation links
<section>: Defines a section in a document
<summary>: Defines a visible heading for a <details> element
<time>: Defines a date/time
