Scribd
Upload
58 views3 pages

h1 h1 h2 h2 h3 h3: Big and Important Header Slightly Less Big Header Sub-Header

The document provides information on common HTML tags used to structure and format web page content. It explains tags for page structure like <html>, <head>, <body>, as well as text formatting tags like <h1>-<h6> for headings, <p> for paragraphs, and <strong> and <em> for emphasis. Other tags covered include links with <a>, lists with <ol> and <ul>, images with <img>, and tables with <table>.

Uploaded by

Shikha Arya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
58 views3 pages

h1 h1 h2 h2 h3 h3: Big and Important Header Slightly Less Big Header Sub-Header

The document provides information on common HTML tags used to structure and format web page content. It explains tags for page structure like <html>, <head>, <body>, as well as text formatting tags like <h1>-<h6> for headings, <p> for paragraphs, and <strong> and <em> for emphasis. Other tags covered include links with <a>, lists with <ol> and <ul>, images with <img>, and tables with <table>.

Uploaded by

Shikha Arya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

1. <!DOCTYPE html> The <h1> tag defines a level-one header on your page.

This
will usually be the title, and there will ideally only be one on
each page.
You’ll need this tag at the beginning of every HTML
document you create. It ensures that a browser knows that it’s
reading HTML, and that it expects HTML5, the latest version. <h2> defines level-two headers such as section headers, <h3>
level-three sub-headers, and so on, down to <h6>. As an
example, the names of the tags in this article are level-two
Even though this isn’t actually an HTML tag, it’s still a good
headers.
one to know.

<h1>Big and Important Header</h1>


2. <html>
<h2>Slightly Less Big Header</h2>
This is another tag that tells a browser that it’s reading HTML. <h3>Sub-Header</h3>
The <html> tag goes straight after the DOCTYPE tag, and you
close it with a </html> tag right at the end of your file. Result:
Everything else in your document goes between these tags.

3. <head>

The <head> tag starts the header section of your file. The stuff
that goes in here doesn’t appear on your webpage. Instead, it
contains metadata for search engines, and info for your
browser.

For basic pages, the <head> tag will contain your title, and
that’s about it. But there are a few other things that you can
include, which we’ll go over in a moment.
As you can see, they get smaller at each level.

4. <title>
8. <p>

This tag sets the title of your page. All you need to do is put
The paragraph tag starts a new paragraph. This usually inserts
your title in the tag and close it, like this (I’ve included the
two line breaks.
header tags, as well):
Look, for example, at the break between the previous line and
<head>
this one. That’s what a <p> tag will do.
<title>My Website</title>
</head> <p>Your first paragraph.</p>
<p>Your second paragraph.</p>
That’s the name that will be displayed as the tab title when it’s
opened in a browser. Result:

6. <body> Your first paragraph.

After you close the header section, you get to the body. You Your second paragraph.
open this with the <body> tag, and close it with the </body>
tag. That goes right at the end of your file, just before the You can also use CSS styles in your paragraph tags, like this
</html> tag. one which changes the text size:

All of the content of your webpage goes in between these tags. <p style="font-size: 120%;">20% larger text</p>
It’s as simple as it sounds:
Result:
<body>
Everything you want displayed on your page. 20% larger text
</body>
To learn how to use CSS to style your text, check out
these HTML and CSS tutorials.
7. <h1>
9. <br> Result:

The line break tag inserts a single line break: Go to MakeUseOf

<p>The first line.<br> The “href” attribute identifies the destination of the link. In
many cases, this will be another website. It could also be a
The second line (close to the first one).</p> file, like an image or a PDF.

Result: Other useful attributes include “target” and “title.” The target
attribute is almost exclusively used to open a link in a new tab
The first line. or window, like this:
The second line (close to the first one).
<a href="//www.makeuseof.com/" target="_blank">Go to
Working in a similar way is the <hr> tag. This draws a MakeUseOf in a new tab</a>
horizontal line on your page and is good for separating
sections of text. Result:

10. <strong> Go to MakeUseOf in a new tab

This tag defines important text. In general, that means it will The “title” attribute creates a tooltip. Hover over the link
be bold. However, it’s possible to use CSS to make <strong> below to see how it works:
text display differently.
<a href="//www.makeuseof.com/" title="This is a tool
However, you can safely use <strong> to bold text. tip">Hover over this to see the tool tip</a>

<strong>Very important things you want to say.</strong> Result:

Result: Hover over this to see the tool tip

Very important things you want to say. 13. <img>

If you’re familiar with the <b> tag for bolding text, you can If you want to embed an image in your page, you’ll need to
still use it. There’s no guarantee it will continue to work in use the image tag. You’ll normally use it in conjunction with
future versions of HTML, but for now, it works. the “src” attribute. This specifies the source of the image, like
this:
11. <em>
<img src="wp-content/uploads/2019/04/sunlit-birds.jpg">
Like <b> and <strong>, <em> and <i> are related. The <em>
tag identifies emphasized text, which generally means it will Result:
get italicized. Again, there’s the possibility that CSS will make
emphasized text display differently.

<em>An emphasized line.</em>

Result:

An emphasized line.

The <i> tag still works, but again, it’s possible that it will be
deprecated in future versions of HTML.

12. <a> Other attributes are available, such as “height,” “width,” and
“alt.” Here’s how that might look:
The <a>, or anchor, tag lets you create links. A simple link
looks like this: <img src="wp-content/uploads/2019/04/sunlit-birds.jpg"
alt="the name of your image">
<a href="//www.makeuseof.com/>Go to MakeUseOf</a>
As you might expect, the “height” and “width” attributes set  Second item
the height and width of the image. In general, it’s a good idea  Third item
to only set one of them so the image scales correctly. If you
use both, you could end up with a stretched or squished image. Unordered lists also have “type” attributes, and you can set it
to “disc,” “circle,” or “square.”
The “alt” tag tells the browser what text to display if the image
can’t be displayed and is a good idea to include with any 16. <table>
image. If someone has an especially slow connection or an old
browser, they can still get an idea of what should be on your
page. While using tables for formatting is frowned upon, there are
plenty of times when you’ll want to use rows and columns to
14. <ol> segment information on your page. Several tags are needed to
get a table to work. Here’s the sample HTML code:

The ordered list tag lets you create an ordered list. In general, <table>
that means you’ll get a numbered list. Each item in the list
needs a list item tag (<li>), so your list will look like this: <tbody>
<tr>
<ol>
<th>1st column</th>
<li>First thing</li>
<th>2nd column</th>
<li>Second thing</li>
</tr>
<li>Third thing</li>
<tr>
</ol>
<td>Row 1, column 1</td>
Result: <td>Row 1, column 2</td>
</tr>
1. First thing
2. Second thing <td>Row 2, column 1</td>
3. Third thing <td>Row 2, column 2</td>

In HTML5, you can use <ol reversed> to reverse the order of </tbody>
the numbers. And you can set the starting value with the start </table>
attribute.
The <table> and </table> tags specify the start and end of the
The “type” attribute lets you tell the browser which type of table. The <tbody> tag contains all the table content.
symbol to use for the list items. It can be set to “1,” “A,” “a,”
“I,” or “i,” setting the list to display with the indicated symbol Each row of the table is enclosed in a <tr> tag. Each cell
like this: within each row is wrapped in either <th> tags for column
headers, or <td> tags for column data. You need one of these
<ol type="A"> for each column on each row.

15. <ul> Result:

The unordered list is much simpler than its ordered 1st column 2nd column
counterpart. It’s simply a bulleted list.
Row 1, column 1 Row 1, column 2
<ul> Row 2, column 1 Row 2, column 2
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>

Result:

 First item

You might also like