Why this technology is relevant and what the scope.
HTML is the foundation of all web pages. Without HTML, you wouldn’t be able to organize text or add images or videos to your web pages. HTML is the beginning of everything you need to know to create engaging web pages!
After following this resource what you will learn.
Summary of what learn to get started.
The Five Most Common HTML Tags
To learn HTML coding for beginners, here are the five tags you do want to remember:
Details about the technology and learning materials.
THE <P> TAG
This is the most common HTML tag used. This tag is used to divide blocks of text, also known as paragraphs. In HTML, "P" stands for "paragraph." Using the <P> tag is the same as hitting the Enter key on your keyboard twice.
If you do manually enter a P tag in the WordPress Text tab, it will look like this:
<p>Donec semper convallis vehicula. Suspendisse potenti. Ut non nulla magna.</p>
And here’s the same code as it displays in any web browser:
Donec semper convallis vehicula. Suspendisse potenti. Ut non nulla magna.
Note the open P and close P tag, as described above, opens then closes this double tag set. And how the close P tag is preceded by a forward-slash, </p>.
THE <A> TAG
This tag is probably the most complex to remember. However, it’s most often used in one simple way, as a link wrapped around an image or piece of text content.
The A or anchor tag includes a couple parameters, or settings, to define the link:
<a href="<http://yoursite.com>" target="_blank">click here</a>
The two basic settings work as follows:
And here’s the same code as it displays in any web browser:
[click here](<http://yoursite.com/>)
In the example above, notice how the open and close A tags wrap around the text, “click here.” The text easily could be an image.
THE <STRONG> TAG
This tag bolds any and all content between the open STRONG and close STRONG tags. Here’s an example:
<strong>Gee, this text is bold!</strong>
And here’s the same code as it displays in any web browser:
Gee, this text is bold!
THE <EM> TAG
To italicize text, use this tag. It works exactly the way the STRONG tag works:
<em>Amazing, this text is in italics!</em>
And here’s the same code as it displays in any web browser:
Amazing, this text is in italics!
Presumably you’ve noticed EM tag wraps the content and the forward-slash prefix for the close EM tag?
THE <H1> TO <H6> TAGS
This tag, like the A tag, is slightly complicated. Instead of settings like the A tag, however, the complexity lies in how heading tags are used. In a mass of content, heading tags are used to indicate the relationships between chunks of content. Headings also can be used to indicate relationships within a complete web page, navigation and content included.
For example, the site name of a website could be tagged with the <H1> tag, to indicate it is the top-most heading and, therefore, all content is subservient to it. The page title would be tagged with the <H2> and sub-headings in the content would be tagged with <H3> through <H6> tags, as appropriate.
If heading tags are used only within content on a page, the page title is tagged with the <H1> tag and the <H2> through <H6> tags are used to tag any sub-headings.
Here’s an example of using heading tags with only content:
<h1>Fruits</h1>
<h2>Bananas</h2>
<h2>Apples</h2>
<h3>Granny Smith Apples</h3>
<h3>Newtown Pippin Apples</h3>
<h2>Grapes</h2>
Note how the main topic is Fruits (H1) with Bananas, Apples, and Grapes as sub-topics (H2). The Apple sub-topic has its own sub-topics (H3), Granny Smith and Newtown Pippin Apples. An article about fruits might use this heading structure with HTML heading tags to organize content about each sub-topic. You could achieve the same effect in more obscure and complicated ways. However, HTML heading tags are far simpler to use.
And here’s the same code as it might display in most web browsers, with H1 coded to be bigger than H2 which is bigger than H3:
Fruits
Bananas
Apples
Granny Smith Apples
Newtown Pippin Apples
Grapes
<aside> 👶 Level: Beginner
</aside>
<aside> 💼 Career Path: ‣
</aside>
This site lets you practice live with code as you learn.
HTML Help by The Web Design Group
This ancient site has all the canonical details about every HTML tag.
Abid Aboobaker
Gopi Krishnan