Popular Tags in HTML

<p> is a container element used to introduce a paragraph. The content goes between the start and the end tag, and browsers display different paragraphs with line breaks between them.

It would be best to use the <p> tag when starting a new idea or introducing a new point. "Ok, but why can't I just use line breaks for that?" Because the <p> tag gives you much more control over the content as you can add HTML attributes to HTML elements and style each paragraph separately. Another reason is that assistive technologies like screen readers recognize paragraphs, allowing users to skim through them or skim them at their convenience.

There are different ways to style your text in HTML, and one of the basic ones is to add formatting tags. The paired <b> tag makes the text bold without any extra importance — it's usually used for emphasis.

Don't use the <b> tag to mark headings — instead, make headings with special heading tags from <h1> to <h6> as they also structure the content.

The paired <i> tag is a formatting tag that makes the text inside it italic. It's mostly used for titles and names of particular works to make them stand out from the web's surrounding sentence. You can also use it for emphasis, although bold is a more popular option.

The primary function of heading tags is to create a visual and logical hierarchy of the page. There are 6 heading elements from <h1> to <h6>, with <h1> being the most and <h6> the least important.

Visually, headings stand out from the body text with a more prominent and bolder font and paragraph breaks before and after. Logically, search engines use the headings to index the structure and content of the web page. This helps sighted and assistive technology users quickly skim through the page and find the information they need.

The <a> tag ("a" stands for "anchor") defines a hyperlink. It has a required attribute href that defines the link's destination — without it, the link simply won't work.

The link text goes between the start and the closing tags — that's how the link's name will be displayed to your users. You can also use other elements as links — for example, images or buttons (we'll talk more about that in the lesson about links).

The target attribute specifies where to open the linked document. By default, all links open inside the same window but specifying the attribute target="_blank" will open it in a new window or tab.^[1]

There are several ways to organize lists with HTML. The most common are numbered or bulleted lists. A list as a component consists of two main elements: the tag that identifies the type of list and tags that define the items it contains. The relationship between these elements is called nesting. The parent tag contains children tags, similar to how a box of assorted chocolate contains different chocolate pieces. In this case, we mark out chocolates with the item tag <li>, which is nested inside the list type tag <ol> or <ul>.

The type of list tag defines the type of list, duh. Numbered and bulleted are the most common ones.

Numbered — or ordered — lists are introduced with the tag <ol>. It works together with list item tag <li> nested within it. Every item you put within <li> element will be displayed with a number, depending on its position in the code. As you can probably guess, ordered lists are for cases where the order of items is important — for example, cooking recipes or driving directions.

Unordered list tag <ul> introduces a list marked with bullet points. Like other types of list tags, it doesn't work by itself, but rather together with item tags <li>, nested within it. The unordered list tag <ul> works like a drawer here, while the item tags <li> are not dissimilar to the array of socks lying within it. Use unordered lists when the order of items is not important — the most common scenario is shopping lists.

Separating the space into smaller containers gives you more control over each area, and that's what the <div> tag does on a webpage. It acts like a container that separates a webpage into sections, the most common being the header, navigation, content, sidebar, and footer.^[2]By adding other tags, you can style each section differently without changing the look of other sections. Keep in mind that it's a block-level tag, meaning that it separates its section from the rest of the page with line breaks.

The <span> element is similar to the <div> element — both are used to separate a part of the text to which you want to apply different styles. The <span> element has no required attributes, but style, class, and id are common. This element's only difference from the <div> element is that it's an inline element — it doesn't force a line break and only takes up as much width as necessary.

The <img> tag is used to insert images in the HTML documents — most commonly a BMP, GIF, PNG, or JPG file. <img> is an empty element and contains attributes only. The required attribute is src, indicating the location of the image linked. However, the best practice is to add the alt text attribute alt with a meaningful description of the image and width and height for better loading.

Most modern browsers support embedding SVG vector images with the <img> tag. If you need to support an older browser, you can check the compatibility.

The <svg> (an abbreviation for "Scalable Vector Graphics") element allows you to insert SVG vector images inside a webpage.^[3]People familiar with design already know that bitmap images consist of pixels, while vector images are more like mathematic formulas that tell the software how to render an image in real-time.

Because of that, browsers process bitmap and vector images differently. The <svg> tag allows you to embed vector graphics directly into your page.

The <iframe> element allows embedding another webpage within your page. The most common uses are embedding Youtube videos, ads, or third-party widgets such as social networks' Like and Share buttons.

The most important attribute of this element is src that defines the path to the embedded webpage. It's also a good idea to determine the size with the width and height attributes.

The <table> element comes in handy when arranging data in rows and columns. Table elements usually include several nested tags. The most common are the <tr> element to create rows, and the <td> element to create columns inside a row. You can also define a cell as a header for a group of table cells using the <th> element.

The correct table markup is especially important for assistive technology users — screen readers have a special mode for tabular content, allowing assistive technology users to skim information easily. Always use the <table> element for tabular data.