HTML (HyperText Markup Language) is used to give content to a web page and instructs web browsers on how to structure that content.
HTML can use six different levels of heading elements. The heading elements are ordered from the highest level h1 to the lowest level h6.
<h1>Meezan!</h1>
<h2>Meezan!</h2>
<h3>Meezan!</h3>
<h4>Meezan!</h4>
<h5>Meezan!</h5>
<h6>Meezan!</h6>
The "li" list item element create list items inside: Ordered lists ol Unordered lists ul
Ordered lists
<ol>
<li>Head east on Prince St</li>
<li>Turn left on Elizabeth</li>
</ol>
Unordered lists
<ul>
<li>Cookies</li>
<li>Milk</li>
</ul>
The "src"attribute will contain the URL to the video. Adding the controls attribute will display video controls in the media player.
<video src="test-video.mp4" controls>
Video not supported
</video>
The "em"emphasis element emphasizes text and browsers will usually italicize the emphasized text by default.
<p>This <em>word</em> will be emphasized in italics.</p>
Element is used as a container that divides an HTML document into sections and is short for “division”
<div>
<h1>A section of grouped elements</h1>
<p>Here’s some text for the section</p>
</div>
<div>
<h1>Second section of grouped elements</h1>
<p>Here’s some text</p>
</div>
HTML is organized into a family tree structure. HTML elements can have parents, grandparents, siblings, children, grandchildren, etc.
<body>
<div>
<h1>It's div's child and body's grandchild</h1>
<h2>It's h1's sibling</h2>
</div>
</body>
be added to the opening tag of an HTML element to configure or change the behavior of the element.
<elementName name="value"></elementName>
line break element will create a line break in text
A line break haiku.<br>
Poems are a great use case.<br>
Oh joy! A line break.
Elements embed images in documents
<img src="image.png">
Paragraph element contains and displays a block of text.
<p>This is a block of text! Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
In HTML, specific and unique id attributes can be assigned to different elements in order to differentiate between them.
<h1 id="A1">Hello World</h1>
HTML attributes are values added to the opening tag of an element to configure the element or change the element’s default behavior.
<p id="my-paragraph" style="color:green;">Here’s some text for a paragraph that is being altered by HTML attributes</p>
he alternative text will be displayed if an image fails to render due to an incorrect URL, if the image format is not supported by the browser
<img src="path/to/image" alt="text describing image" />
Element is an inline container for text and can be used to group text for styling purposes
<p><span>This text</span> may be styled differently than the surrounding text.</p>
Element highlights important, serious, or urgent text and browsers will normally render this highlighted text in bold by default.
<p>This is <strong>important</strong> text!</p>
Anchor element is used to create hyperlinks in an HTML document. The hyperlinks can point to other webpages, files on the same server, a location on the same page, or any other URL via the hyperlink reference attribute, href. The href determines the location the anchor element points to.
<!-- Creating text links -->
<a href="https://harismalik.netlify.app">Visit this site</a>
<!-- Creating image links -->
<a href="https://harismalik.netlify.app">
<img src="logo.jpg">Click this image
</a>
A target value of "_blank" will tell the browser to open the hyperlink in a new tab in modern browsers, or in a new window in older browsers
<a href="https://harismalik.netlify.app/" target="_blank">This anchor element links to google and will open in a new tab or window.</a>
Content inside of comments will not be rendered by browsers, and are usually used to describe a part of code or provide other details.
<!-- Main site content -->
<div>Content</div>
The title is displayed in the browser’s title bar or tab in which the HTML page is displayed.
<!DOCTYPE html>
<html>
<head>
<title>Title of the HTML page</title>
</head>
</html>
The table data element, "td", can be nested inside a table row element, "tr", to add a cell of data to a table.
<table>
<tr>
<td>cell one data</td>
<td>cell two data</td>
</tr>
</table>
The table head element, "thead", defines the headings of table columns encapsulated in table rows.
<table>
<thead>
<tr>
<th>heading 1</th>
<th>heading 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>col 1</td>
<td>col 2</td>
</tr>
</tbody>
</table>
Similar to colspan, the rowspan attribute on a table header or table data element indicates how many rows that particular cell should span within the table.
<table>
<tr>
<th>row 1:</th>
<td>col 1</td>
<td>col 2</td>
</tr>
<tr>
<th> rowspan="2">row 2 (this row will span 2 rows):</th>
<td>col 1</td>
<td>col 2</td>
</tr>
<tr>
<td>col 1</td>
<td>col 2</td>
</tr>
<tr>
<th>row 3:</th>
<td>col 1</td>
<td>col 2</td>
</tr>
</table>
A semantic element that will contain all table data other than table heading and table footer content.
<table>
<tbody>
<tr>
<td>row 1</td>
</tr>
<tr>
<td>row 2</td>
</tr>
<tr>
<td>row 3</td>
</tr>
</tbody>
</table>
The table heading element, "th", is used to add titles to rows and columns of a table and must be enclosed in a table row element, "tr".
<table>
<tr>
<th>column one</th>
<th>column two</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
The colspan attribute on a table header "th" or table data "td" element indicates how many columns that particular cell should span within the table. The colspan value is set to 1 by default and will take any positive integer between 1 and 1000.
<table>
<tr>
<th>row 1:</th>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
</tr>
<tr>
<th>row 2:</th>
<td> colspan="2">col 1 (will span 2 columns)</td>
<td>col 2</td>
<td>col 3</td>
</tr>
</table>
The table footer element,
, uses table rows to give footer content or to summarize content at the end of a table.<table>
<thead>
<tr>
<th>heading 1</th>
<th>heading 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>col 1</td>
<td>col 2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>summary of col 1</td>
<td>summary of col 2</td>
</tr>
</tfoot>
</table>
In HTML, the "table" element has content that is used to represent a two-dimensional table made of rows and columns.
<table>
<!-- rows and columns will go here -->
</table>
When using an HTML input element, the type="checkbox" attribute will render a single checkbox item. To create a group of checkboxes related to the same topic, they should all use the same name attribute. Since it’s a checkbox, multiple checkboxes can be selected for the same topic.
<input type="checkbox" name="breakfast" value="bacon" />Bacon 🥓<br />
<input type="checkbox" name="breakfast" value="eggs" />Eggs 🍳<br />
<input type="checkbox" name="breakfast" value="pancakes" />Pancakes 🥞<br />
The textarea element is used when creating a text-box for multi-line input (e.g. a comment section). The element supports the rows and cols attributes which determine the height and width, respectively, of the element.
<textarea rows="10" cols="30" name="comment"></textarea>
form can contain various input elements. When a user submits the form, information in these input elements is passed to the source which is named in the action attribute of the form.
<form method="post" action="http://server1">
Enter your name:
<input type="text" name="fname" />
<br />
Enter your age:
<input type="text" name="age" />
<br />
<input type="submit" value="Submit" />
</form>
Once we have collected information in a form we can send that information somewhere else by using the action and method attribute. The action attribute tells the form to send the information
<form action="/index3.html" method="PUT"></form>
<input type="number" name="balance" />
<input type="text" name="username" />
<input type="password" name="password" />
<input type="number" name="rating" min="1" max="10">
<input type="text" name="username" minlength="6" />
The table row element, "tr", is used to add rows to a table before adding table data and table headings.
<table>
<tr>
...
</tr>
</table>