Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Cover image for HTML5 - How to identify an element
Arthur Nascimento Assunção
Arthur Nascimento Assunção

Posted on

     

HTML5 - How to identify an element

In this article, I'll teach you how to identify atag. It's very important when we useCSS orJavaScript.

Three Forms of Identification

Anelement ortag (opening) can be identified in three ways:

  1. Using anID (identifier);
  2. Using aclass;
  3. Using thetag name;

Using an ID

ID is anattribute that can be put in a tag, but you must use it just to identifyunique elements and "never" use it inCSS selector. AnID is unique; there is not a two equals ID in the same page, becauseID is like yourCPF (a Brazilian person identifier).ID is very useful when you need to access the element byJavaScript.

Example:

<mainid="content">...</main>
Enter fullscreen modeExit fullscreen mode

Using a Class

Class is anattribute that can be put in a tag, and we encourage you to useclass in almost tags that will needstyling with CSS. Aclass is the same thing thatclass in real life; you belong to student class, human class, developer class, etc. It's possible an element hasID andClass at the same time. Because each one is for a different purpose.

Example:

<mainclass="content">...</main>
Enter fullscreen modeExit fullscreen mode

Using a Tag Name

It's possible to access a tag using yourtag name, whetherCSS orJavaScript, but I don't recommend using this form inJS, and I recommend using it inCSS just tostyle an element in general, never a specified element.

Complete Initial Code

After this text, below, I show you a complete initial code for yourHTML5 codes.

<!DOCTYPE html><html><head><!-- External files (CSS, JS) and metadata --></head><body><!-- Prefer class than ID if you use it in CSS; ID is only for JS --><headerclass="header"id="header">            page header</header><navclass="nav">            menu</nav><mainclass="content"><!-- Only one per page/document -->            Main content<article>                internal article<header>header of this article</header><sectionid="introduction"></section><sectionid="content"></section><sectionid="summary"></section><!-- It's possible there are articles inside sections or vice-versa; see stackoverflow link --></article></main><sectionid="comments"></section><footerclass="footer"></footer></body></html>
Enter fullscreen modeExit fullscreen mode

I'll explain each line of the provided HTML code:

  1. <!DOCTYPE html>: This is the document type declaration, specifying that the document is an HTML5 document.
  2. <html>: This is the opening<html> tag, indicating the start of the HTML document.
  3. <head>: The<head> element contains meta-information about the document, such as links to external files (CSS and JavaScript) and metadata (like the document's title).
  4. <!-- External files (CSS, JS) and metadata -->: This is an HTML comment, providing a note to anyone reading the code but doesn't affect the rendering of the page. It suggests that the<head> section is typically where you include links to external CSS and JavaScript files and specify metadata.
  5. <body>: The<body> element is where the visible content of the web page goes.
  6. <!-- Prefer using classes for styling; IDs are primarily for JavaScript -->: Another HTML comment, giving guidance on using classes for styling elements and reserving IDs primarily for JavaScript interactions.
  7. <header>: This line defines a header element (<header>) with both aclass and anid attribute. Theclass attribute is set to "header," which can be used for styling with CSS. Theid attribute is also set to "header," which uniquely identifies this element on the page.
  8. Page header: Within the<header> element, "Page header" is the visible content that will be displayed as the header of the page.
  9. <nav>: This line defines a navigation element (<nav>) with aclass attribute set to "nav," indicating it's a navigation menu.
  10. Menu: Inside the<nav> element, "Menu" is the visible content for the navigation menu.
  11. <main>: Here, a<main> element is defined with aclass attribute set to "content." The<main> element typically contains the main content of the web page.
  12. Main content: Within the<main> element, "Main content" is the visible content indicating the primary content of the page.
  13. <article>: The<article> element is used to represent a self-contained piece of content, such as a blog post, article, or news story.
  14. Internal article: Within the<article> element, "Internal article" represents the title or heading of the article.
  15. <header>Header of this article</header>: This line defines another<header> element within the<article>, containing the header or title of the article.
  16. <section>: This line defines a<section> element with anid attribute set to "introduction," which can be used to target and style this section specifically.
  17. <section>: Similar to the previous line, this one defines another<section> element with anid attribute set to "content."
  18. <section>: Yet another<section> element is defined with anid attribute set to "summary."
  19. <!-- It's possible to have articles inside sections or vice-versa; see the stackoverflow link -->: This is another HTML comment, providing a note about the possibility of nesting articles inside sections or vice versa. It also references a Stack Overflow link for further information.
  20. </article>: This marks the end of the<article> element, closing it.
  21. <section>: This line defines a<section> element with anid attribute set to "comments," likely indicating a section where comments or discussions would go.
  22. </section>: This closes the<section> element for comments.
  23. <footer>: Here, a<footer> element is defined with aclass attribute set to "footer," suggesting it's the footer section of the page.
  24. </footer>: This closes the<footer> element.
  25. </body>: This marks the end of the<body> element.
  26. </html>: This is the closing</html> tag, indicating the end of the HTML document.

Each line in this HTML code contributes to the structure and content of a web page. The comments provide additional information and guidance for understanding the code.

What Lies Ahead

In upcoming articles, you will delve into:

  • figures
  • images
  • ordered and unordered lists
  • definition lists
  • details
  • tables

Stay tuned!

Top comments(0)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

I have experience in Front-end technologies like ReactJS, NextJS, TypeScript, React Native, Jest, etc. My expertise in both development and teaching makes me well-equipped to enhance your system.
  • Location
    Brazil
  • Work
    IFSudesteMG
  • Joined

More fromArthur Nascimento Assunção

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp