1.1: HTML
- 1.HTML is a set of tags that defines elements on all web pages
- 2.Understand basic HTML document structure
- 3.Understand how to use common tags
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>My First Header</h1>
<p>My first paragraph</p>
</body>
</html>
HTML (HyperText Markup Language) defines elements on web pages. All web pages, even the most complex ones rely on HTML to represent their elements. In upcoming modules we will learn how to use CSS and JS to apply styling and interactivity to HTML elements.
HTML comprises tags and content between them. Web browsers read HTML and render content between tags based on tag specifications. For example, browsers will render content between "Header 1" (
h1
) opening (<h1>
) and closing (</h1>
) tags as large headers, and content between opening and closing "Paragraph" tags (p
) in paragraph format. <h1>My First Heading</h1>
<p>My first paragraph.</p>
All HTML documents generally start with the following declaration to use the latest version of HTML.
<!DOCTYPE html>
After the
DOCTYPE
declaration is typically a set of html
opening and closing tags surrounding all page content.<!DOCTYPE html>
<html>
Page content
</html>
The first set of tags within the outermost
html
tags is usually the head
tags. head
tags contain important site metadata such as title (what's displayed in the browser tab bar), SEO metadata and links to stylesheets for styling and JavaScript for interactivity.<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
</html>
body
tags typically follow head
tags. body
tags contain the content of the page. The following example includes body
tags with h1
and p
tags within them, specifying content to render on the page.<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>My First Header</h1>
<p>My first paragraph</p>
</body>
</html>
That is the basic structure of all HTML pages. Feel free to play around with live examples on W3Schools.
The following are common HTML tags we are most likely to use and encounter. Block elements occupy full page width and inline elements only occupy width of their content.
Tag name | Description | Block vs inline |
---|---|---|
div | Divider tag. Serves as group for other tags. | Block |
span | Span tag. Apply styles to inline content. | Inline |
h1 , h2 , ..., h6 | Header tags. h1 is largest and h6 is smallest. | Block |
p | Paragraph tag. Used to separate paragraphs of text. | Block |
b , i | Bold and italicise tags. | Inline |
a | Anchor tag. Link to another page with a URL. | Inline |
img | Image tag. Render an image. | Inline |
ol , ul , li | Ordered list, unordered list, list item. Render a list. | Block |
table , tr , td | Table, table row, table data. Render a table. | Block |
Anchor tags link to other webpages and require an
href
parameter that contains a URL. <a href="rocketacademy.co">Best Coding Bootcamp</a>
To make the link open in a new tab, include the parameter
target="_blank"
.<a href="rocketacademy.co" target="_blank">Best Coding Bootcamp</a>
Image tags are self-closing and do not have separate opening and closing tags. They require
src
and alt
parameters representing the source of the image and alternate text describing the image for accessibility, SEO and to display if the image is not available. src
can be either a file path or a URL.<img src="images/rocketrocks.png" alt="Rocket rocks!" />
We can wrap tags in each other to combine their functionality. For example, we can make an image a link by wrapping an
img
tag with an a
tag.<a href="rocketacademy.co" target="_blank">
<img src="images/rocketrocks.png" alt="Rocket rocks!" />
</a>
Wrap lists with
ol
(ordered) or ul
(unordered) and wrap each list item with li
.Ordered List
<ol>
<li>Study</li>
<li>Practise</li>
<li>Success</li>
</ol>
Unordered List
<ul>
<li>Great students</li>
<li>Great teachers</li>
<li>Great school</li>
</ul>
Wrap tables with
table
, table rows with tr
, table headers in the 1st row with th
and table data in subsequent rows with td
.<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
Last modified 1yr ago