web Development Fundamentals 3: HTML Key Terms and Concepts at a Glance

HyperText Markup Language (HTML) is a language used to define the structure of web pages. To understand it, you need to know some key terms and concepts. we’ve summarized the key terms in HTML below!

🔍 HTML key terms and concepts

HTML is the language that defines the structure of a web page. here are the basic terms of HTML that you need to know to get started with web development.

termdescription
tagThe basic building blocks of HTML. They are enclosed in angle brackets(< >) and define web elements.
elementthe overall structure, including tags and content. example: <tag>content</tag>.
attributea key-value pair that provides additional information about a tag. example: <tag attribute="value">content</tag>.
headthe area that defines the meta information for the document. It is written inside the <head> tag.
bodythe main content area that appears on a web page. It is written inside the <body> tag.
HTML5The latest standardized version of HTML, with enhanced multimedia and interactivity.
DOCTYPEa declaration that defines the HTML version of a document. example: <!DOCTYPE html>.
commentan area to add code comments, which are not displayed in the browser. Example: <!-- content -->.

key HTML tags and their descriptions

1. basic structural tags

  • <html>: The root element of an HTML document, which wraps around all tags.
  • <head>: The area that defines the document’s settings and meta information.
  • <body>: This is the area where you write the content that actually appears on the web page.

2. text-related tags

  • <h1> through <h6>: Tags that indicate headings, with <h1>being the most important and largest.
  • <p>: A tag that indicates a paragraph, used in body text.
  • <b> and <strong>: Bolds text; <strong>semantically indicates emphasis.
  • <i> and <em>: Italicize text. <em>contains semantic emphasis.
  • <br>: Move text to the next line with a newline tag.
  • <hr>: Inserts a horizontal line.

3. link and image tags

  • <a>: A tag that adds a hyperlink. specify the link address with the href attribute.
    for example: <a href="https://example.com">Click here</a>.
  • <img>: A tag that inserts an image. Specify the path to the image with the src attribute and provide an alternative text with the alt attribute.
    example: <img src="image.jpg" alt="Image description">.

4. list tags

  • <ul>: Creates an unordered list.
  • <ol>: Creates an ordered list.
  • <li>: defines a list item.
    example:htmlCopyEdit<ul><li>Item 1</li> <li>Item 2</li> </ul>

5. table-related tags

  • <table>: Creates a table.
  • <tr>: Creates a row of a table.
  • <td>: defines a data cell.
  • <th>: Defines the header cell of a table.
    example:htmlCopyEdit<table><tr> <th>Title 1</th> <th>Title 2</th> </tr> <tr> <td>Content 1</td> <td>Content 2</td> </tr> </table> </tr> </table>

6. form tags

  • <form>: A form that accepts user input.
  • <input>: Creates a single input field.
  • <button>: Creates a button.
  • <textarea>: Creates a multi-line text input field.
    example:htmlCopyedit<form><input type="text" placeholder="Please enter a name"> <button>Submit</button> </form>

7. meta information

  • <meta>: Defines information about the document (charset, keywords, etc.).
  • <title>: Defines the title of the web page. displayed in the browser tab.

🛠️ HTML Attribute Concepts

  • definition: A key-value pair that provides additional information about a tag.
  • format: <tag attribute name="attribute value">content</tag>.
  • key attributes
    • id: A unique identifier.
    • class: Grouping multiple elements.
    • style: Inline styling.
    • href: link path.
    • src: path to a resource (image, video, etc.).
    • alt: Alternative text (displayed when an image is unavailable).

1. HTML attribute concepts

attributes provide additional information to a tag and are always written in the form attribute name="attribute value". the main attributes are

  • id: Provides a unique identifier.
  • class: Used to group multiple elements together.
  • style: Specifies an inline style.
  • href: defines the path to the link.
  • src: Specifies the path to an image or script file.
  • alt: Provides an alternative text that is displayed when the image is not available.

2. HTML document basic structure

HTML documents have the following basic structure

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML Basic Structure</title> </head> <body> <h1>Hello!</h1> <p>HTML is the foundation for creating web pages.</p> </body> </html>

frequently asked questions

Q. Where does HTML code run?


HTML code runs in a web browser, and you can see the results of its execution by saving the file and opening it with a browser.

Q. Is HTML a programming language?


no, HTML is a markup language used to define the structure of a web page. dynamic functionality is implemented with JavaScript.

Q. What is different about HTML5?


HTML5 makes it easier to add multimedia elements(<video>, <audio>, etc.) and interactive features compared to previous versions.

Q. what is the difference between a <div> and a <span>?

a <div>is a block element, which takes up an entire line, and is used to organize layout. A <span>is an inline element, which is used to decorate a specific portion of text.

✨ Learning tips for HTML

  • understand the basic structure: HTML tags are nested.
  • learn by doing: Try writing and running simple HTML documents on your own.
  • Learn CSS and JavaScript together: HTML alone can only take you so far, so it’s a good idea to learn styling (CSS) and dynamic features (JavaScript) together.

are you now familiar with the basic terms and concepts of HTML 😊?

Content View