Page Title

HTML Tags

HTML tags can be considered hidden keywords or commands incorporated in HTML, which can define how your browser will display the content and format of the web page. Most tags of HTML have two sections: an opening and a closing portion, and any text is written within that has its effect based on the working of the tag. The most common example is the tag, which has both a starting tag and ending tag.

HTML Documents

  • All HTML documents begin with .
  • The HTML document begins with and ends with .
  • HTML code that is written inside the and tags of an HTML document are not visible in the web browser.
  • Only the content inside the and tags are displayed in the browser.

HTML Tag

HTML tag which is usually written as …. or …. is the only tag that is a must for writing HTML pages. HTML tag has both an opening and a closing tag . The closing of tags is done by a forward slash (/) at the very start of the tag name.

Читайте также:  Java image to icon image

Tags with opening and closing tags are called container tags, and tags with only one opening tag and no closing tag are called empty tags.

HEAD Tag

The tag is another important tag used to add the header in HTML. It is used to give various additional information about the web page along with description and title to your page, which gets displayed in the title bar or acts as an indicator of what information to use or on which page you are currently in. The Tag is written within this tag.

Here’s a simple example of html, head, and title tags:

BODY Tag

HTML tag is used to give the body, i.e., the visible section of the HTML document. All formatting and writing of content are done in this section within the opening and the closing tag. If your HTML code does not have a body tag associated with it, the HTML code will still run as written in the above example (only show the title in the title bar). This tag contains the information and formatting that will be seen in the main web browser on a web page. It is to be noted that, together, these three necessary tags, , , and , make up the skeleton of an XHTML document, and these are the only foundation tags upon which all web pages are created or developed.

     

This is page heading.

This is my first paragraph text.

Источник

HTML Cheat Sheet – HTML Elements List Reference

Ihechikara Vincent Abba

Ihechikara Vincent Abba

HTML Cheat Sheet – HTML Elements List Reference

In this tutorial, we will go over commonly used HTML tags, elements, and attributes. We’ll also see examples of how these tags, elements, and attributes work.

You can use this article as a reference guide whether you’re a beginner or experienced developer.

What Makes Up an HTML Document?

The following tags define the basic HTML document structure:

  • tag – This tag acts as a container for every other element in the document except the html> tag.
  • tag– Includes all the document’s metadata.
  • tag – Defines the title of the document which is displayed in the browser’s title bar.
  • tag – Acts as a container for the document’s content that gets displayed on the browser.

Here’s what all that looks like:

html> specifies that we are working with an HTML5 document.

The following tags give additional information to the HTML document:

  • tag – This tag can be used to define additional information about the webpage.
  • tag – Used to link the document to an external resource.
  • tag – Used for defining styles for the document.
  • tag – Used to write code snippets (usually JavaScript) or to link the document to an external script.
      *  

HTML Document Structure

When you’re fleshing out your HTML document, you’ll use certain tags to create the structure.

The to tags show different levels of headings in a document, with being the largest and being the smallest.

 

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

You use the

tag to create a paragraph.

The tag can be used to divide and style separate sections of the document. It also acts as a parent container for other elements. Here’s how it works:

 

This is the news section

Welcome to the news section!

This is the contact us section

Hello world!

We also have the tag. This is similar to but you use it as an inline container.

There’s the
tag, which we use for creating line breaks. This has no closing tag.

The


tag is used to create a horizontal line. It also has no closing tag.

Images in HTML

In HTML, we use the tag to display images.

Here are some attributes of the tag:

  • src is used to specify the path to the location of the image on your computer or the web.
  • alt defines an alternate text that displays if the image cannot be rendered. The alt text is also good for screen readers.
  • height specifies the height of the image.
  • width specifies the width of the image.
  • border specifies the thickness of the borders, which is set to 0 if no border is added.

Text Formatting in HTML

We have many ways to format text in HTML. Let’s go over them now briefly.

  • displays text in italics.
  • displays text in bold.
  • displays text in bold. Used to make important emphasis.
  • another emphasis tag that displays text in italics.
  • defines subscript text, like the two atoms of oxygen in CO₂.
  • defines a superscript like the power of a number, 10².
  • reduces the size of text.
  • defines deleted text by striking a line through the text.
  • defines inserted text which is usually underlined.
  • is used to enclose a section of text quoted from another source.
  • is used for shorter inline quotes.
  • is used for citing the author of a quote.
  • is used for showing the author’s contact information.
  • denotes an abbreviation.
  • displays code snippets.
  • highlights text.

italic text

bold text

strong text

strong text

subscripted text

superscripted text

small text

deleted text

inserted text

quoted text

short quoted text

cited text

address

inserted text

code snippet

marked text

Here are some attributes of the tag:

  • href specifies the URL the link takes the user to when clicked.
  • download specifies that the target or resource clicked is downloadable.
  • target specifies where the link is to be opened. This could be in the same or separate window.

Lists

    tag defines an ordered list while the
    tag defines an unordered list.

Forms

The tag is used to create a form in HTML. Forms are used to get user inputs. Here are some attributes associated with the element:

  • action specifies where the form information goes when submitted.
  • target specifies where to display the form’s response.
  • autocomplete can have a value of on or off.
  • novalidate specifies that the form should not be validated.
  • method specifies the HTTP method used when sending form data.
  • name specifies the name of the form.
  • required specifies that an input element cannot be left empty.
  • autofocus gives focus to the input elements when the page loads.
  • disabled disables an input element so the user can longer interact with it.
  • placeholder is used to give users a hint on what information is required for an input element.

Here are other input elements associated with forms:

  • for getting user text input with multiple lines.
  • specifies a list of options the user can choose from.
  • creates an option under the select element.
  • specifies an input field where the user can enter data. This has a type attribute that specifies what type of data the user can input.
  • creates a button.
        

Tables

 
Course Progress
HTML 90%
CSS 80%
JavaScript 95%

Tags introduced in HTML5

Here are some tags introduced in HTML5:

  • specifies the webpage header
  • specifies the webpage footer.
  • specifies a main content section.
  • specifies an article’s section, usually for content that can stand alone on the webpage.
  • is used to create separate sections.
  • is usually used to when placing items in a sidebar.
  • is used for formatting date and time.
  • is used for figures like charts.
  • denotes a description of a figure.
  • is used to nest navigation links.
  • is used to measure data within a range.
  • is used as a progress bar.
  • is used to create a dialog box.
  • is used to embed an audio file in the web page.
  • is used to embed video.

Conclusion

In this article, we have seen a lot of HTML tags, elements, and attributes commonly used by developers. This is not all there is, but should serve as a good reference resource.

I hope you found this helpful. Thank you for reading.

Источник

The Best Guide to HTML Tags

The Best Guide to HTML Tags

Anytime you go on the internet, you are interacting with HTML code and related tags. HTML is primarily used to develop web pages and web applications that run on web browsers like Chrome, Firefox, and Internet Explorer. HTML tags are keywords present on a web page that define how your web browser must format and display the contents.

Learn From The Best Mentors in the Industry!

What Is HTML?

HTML, which stands for Hypertext Markup Language, is the language used to describe structured documents and the language used to create web pages on the internet.

You can use any text editor to write the HTML code, such as Notepad (PC) or TextEdit (Mac). For our demonstration, we will use a sublime text editor, which you can download at https://www.sublimetext.com/3.

Save the file with the .html extension, and open it using a web browser of your choice.

html_file

What Is an HTML Tag?

HTML tags are the keywords on a web page that define how your web browser must format and display your web page.

Almost all tags contain two parts, an opening, and a closing tag. For example, is the opening tag and is the closing tag. Note that the closing tag has the same text as the opening tag, but has an additional forward-slash ( / ) character.

There are a total of 100 HTML tags. We will divide them into categories and discuss the important ones in this article.

Basic HTML Tags

Head Tag

The head tag contains all the elements describing the document.

Title Tag

The title tag specifies the HTML page title, which is shown in the browser’s title bar.

Body Tag

The body tag is where you insert your web page’s content.

Paragraph Tag

A paragraph tag

is used to define a paragraph on a web page.

Heading Tag

The HTML heading tag is used to define the heading of the HTML document. The tag defines the most important tag, and defines the least.

Let’s practice using these tags and create a web page with them:

Title_and_heading_tag-html

Output_title_and_heading_tag

Formatting Tags

Emphasis tag

The HTML tag is used to emphasize the particular text in a paragraph.

Bold Tag

The tag is used to make the text bold.

Italic Tag

The tag is used to make the text italic.

Underline Tag

The tag is used to set the text underline.

Bold_italic_underline

output_page

Anchor_tag-html_tags

Output_anchor_tag

Learn 15+ In-Demand Tools and Skills!

List Tag

list_tag-html_tags

list_output

Image Tag

The tag is used to embed an image in an HTML document. You need to specify the source of the image inside the tag.

Image_tag

Image_tag_output-html_tags.

The center tag will center your content.

The Table Tag

The style () tag is used to add methods to the content by typing the code in the HTML file itself.

Table_tag-html_tags.

table_tag_output

Next Steps

This article on HTML tags offered a brief insight into different types of HTML tags and their functionalities. To learn more about web development in its entirety, certification is highly recommended to jumpstart your coding career. Further, Simplilearn’s Full Stack Java Developer will help you master web development. The course covers a wide array of relevant topics, including front-end, middleware, and back-end Java web developer technologies. You will learn to build an end-to-end application, test and deploy code, store data using MongoDB, and much more.

If you have any questions or feedback regarding the HTML tags article, let us know in the comments section. Our experts will get back to you as soon as possible.

Find our Full Stack Developer — MEAN Stack Online Bootcamp in top cities:

Name Date Place
Full Stack Developer — MEAN Stack Cohort starts on 9th Aug 2023,
Weekend batch
Your City View Details
Full Stack Developer — MEAN Stack Cohort starts on 27th Sep 2023,
Weekend batch
Your City View Details

About the Author

Taha Sufiyan

Taha is a Research Analyst at Simplilearn. He is passionate about building great user interfaces and keeps himself updated on the world of Artificial Intelligence. Taha is also interested in gaming and photography.

Full Stack Web Developer — MEAN Stack

Источник

Оцените статью