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.
term | description |
---|---|
tag | The basic building blocks of HTML. They are enclosed in angle brackets(< >) and define web elements. |
element | the overall structure, including tags and content. example: <tag>content</tag> . |
attribute | a key-value pair that provides additional information about a tag. example: <tag attribute="value">content</tag>. |
head | the area that defines the meta information for the document. It is written inside the <head> tag. |
body | the main content area that appears on a web page. It is written inside the <body> tag. |
HTML5 | The latest standardized version of HTML, with enhanced multimedia and interactivity. |
DOCTYPE | a declaration that defines the HTML version of a document. example: <!DOCTYPE html>. |
comment | an 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 thehref
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 thesrc
attribute and provide an alternative text with thealt
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
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.
no, HTML is a markup language used to define the structure of a web page. dynamic functionality is implemented with JavaScript.
HTML5 makes it easier to add multimedia elements(<video>
, <audio>
, etc.) and interactive features compared to previous versions.
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 😊?